2023-12-13 VsCode + CMake + Qt环境搭建

---

点击 快速C语言入门

---

---

前言

要解决问题: 最近研究 Qt, 使用 qtcreator, 发现在搭建 UI 界面时候很方便, 但到编码和调试就比较有问题了.

想到的思路: 用 VSCode 进行编码及调试.

其它的补充: 需要装CMake

---

一、前期准备

安装vscode, Qt, qtcreator, 不再赘述, vscode需要安装clangd, lldb, CMake插件:

对于vscode, clangd, lldb配置C++环境有疑问的可以看VsCode中使用clangd插件的各种设置

二、具体设置

首先, 通过qtcreator建立cmake项目, 并且设置UI, 设置信号和槽函数等.

注意, 所有项目都放在一个专用文件夹下, 比如E:\clangC++\learnQT\, 在此文件夹下, 专门为Qt建立项目文件.

然后, 用vscode设置工作目录, 将E:\clangC++\learnQT\设置为工作目录, 配置.vscode文件夹内容, 包括settings.json, launch.json.

settings.json 文件下, 增加CMake配置:

sourceDirectory的内容是Qt项目文件, 如果不设置, 目前cmake插件无法找到, 为了方便, 我就建立了30个, 省的一个一个弄了.

buildDirectory是构建的文件夹, 为了项目不混淆, 直接用了源文件地址, 这样直接在项目文件中进行构建. 还有一个好处, clangd在构建后, 可以直接识别UI产生的.h文件, 而不用自己动手拷贝了.

    "cmake.sourceDirectory": [
        "E:/clangC++/learnQT/learn_1",
        "E:/clangC++/learnQT/Learn_2",
        "E:/clangC++/learnQT/Learn_3",
        "E:/clangC++/learnQT/Learn_4",
        "E:/clangC++/learnQT/Learn_5",
        "E:/clangC++/learnQT/Learn_6",
        "E:/clangC++/learnQT/Learn_7",
        "E:/clangC++/learnQT/Learn_8",
        "E:/clangC++/learnQT/Learn_9",
        "E:/clangC++/learnQT/Learn_10",
        "E:/clangC++/learnQT/Learn_11",
        "E:/clangC++/learnQT/Learn_12",
        "E:/clangC++/learnQT/Learn_13",
        "E:/clangC++/learnQT/Learn_14",
        "E:/clangC++/learnQT/Learn_15",
        "E:/clangC++/learnQT/Learn_16",
        "E:/clangC++/learnQT/Learn_17",
        "E:/clangC++/learnQT/Learn_18",
        "E:/clangC++/learnQT/Learn_19",
        "E:/clangC++/learnQT/Learn_20",
        "E:/clangC++/learnQT/Learn_21",
        "E:/clangC++/learnQT/Learn_22",
        "E:/clangC++/learnQT/Learn_23",
        "E:/clangC++/learnQT/Learn_24",
        "E:/clangC++/learnQT/Learn_25",
        "E:/clangC++/learnQT/Learn_26",
        "E:/clangC++/learnQT/Learn_27",
        "E:/clangC++/learnQT/Learn_28",
        "E:/clangC++/learnQT/Learn_29",
        "E:/clangC++/learnQT/Learn_30",
    ],
    "cmake.buildDirectory": "${sourceDirectory}/",
    "cmake.autoSelectActiveFolder": true,

launch.json 增加以下调用, 注意, 和普通c++构建不同, 这里没有调用tasks.json文件

{
            "type": "lldb",
            "request": "launch",
            "name": "QtDebug",
            "program": "${fileDirname}/${fileBasenameNoExtension}.exe",
            "args": [],
            "cwd": "${workspaceFolder}"
        }

为了clangd可以识别Qt的文件, 需要在工作目录加一个E:\clangC++\learnQT\compile_flags.txt文件, 文件内容是:

-xc++
-std=c++17
-Wall
-IE:\msys64\clang64\include\qt6\ActiveQt
-IE:\msys64\clang64\include\qt6\Qt3DAnimation
-IE:\msys64\clang64\include\qt6\Qt3DCore
-IE:\msys64\clang64\include\qt6\Qt3DExtras
-IE:\msys64\clang64\include\qt6\Qt3DInput
-IE:\msys64\clang64\include\qt6\Qt3DLogic
-IE:\msys64\clang64\include\qt6\Qt3DQuick
-IE:\msys64\clang64\include\qt6\Qt3DQuickAnimation
-IE:\msys64\clang64\include\qt6\Qt3DQuickExtras
-IE:\msys64\clang64\include\qt6\Qt3DQuickInput
-IE:\msys64\clang64\include\qt6\Qt3DQuickRender
-IE:\msys64\clang64\include\qt6\Qt3DQuickScene2D
-IE:\msys64\clang64\include\qt6\Qt3DRender
-IE:\msys64\clang64\include\qt6\QtAxBase
-IE:\msys64\clang64\include\qt6\QtAxContainer
-IE:\msys64\clang64\include\qt6\QtAxServer
-IE:\msys64\clang64\include\qt6\QtBluetooth
-IE:\msys64\clang64\include\qt6\QtBodymovin
-IE:\msys64\clang64\include\qt6\QtCharts
-IE:\msys64\clang64\include\qt6\QtChartsQml
-IE:\msys64\clang64\include\qt6\QtConcurrent
-IE:\msys64\clang64\include\qt6\QtCore
-IE:\msys64\clang64\include\qt6\QtCore5Compat
-IE:\msys64\clang64\include\qt6\QtDataVisualization
-IE:\msys64\clang64\include\qt6\QtDataVisualizationQml
-IE:\msys64\clang64\include\qt6\QtDBus
-IE:\msys64\clang64\include\qt6\QtDesigner
-IE:\msys64\clang64\include\qt6\QtDesignerComponents
-IE:\msys64\clang64\include\qt6\QtDeviceDiscoverySupport
-IE:\msys64\clang64\include\qt6\QtExampleIcons
-IE:\msys64\clang64\include\qt6\QtFbSupport
-IE:\msys64\clang64\include\qt6\QtGrpc
-IE:\msys64\clang64\include\qt6\QtGui
-IE:\msys64\clang64\include\qt6\QtHelp
-IE:\msys64\clang64\include\qt6\QtHttpServer
-IE:\msys64\clang64\include\qt6\QtJsonRpc
-IE:\msys64\clang64\include\qt6\QtLabsAnimation
-IE:\msys64\clang64\include\qt6\QtLabsFolderListModel
-IE:\msys64\clang64\include\qt6\QtLabsQmlModels
-IE:\msys64\clang64\include\qt6\QtLabsSettings
-IE:\msys64\clang64\include\qt6\QtLabsSharedImage
-IE:\msys64\clang64\include\qt6\QtLabsWavefrontMesh
-IE:\msys64\clang64\include\qt6\QtLanguageServer
-IE:\msys64\clang64\include\qt6\QtLocation
-IE:\msys64\clang64\include\qt6\QtMultimedia
-IE:\msys64\clang64\include\qt6\QtMultimediaQuick
-IE:\msys64\clang64\include\qt6\QtMultimediaWidgets
-IE:\msys64\clang64\include\qt6\QtNetwork
-IE:\msys64\clang64\include\qt6\QtNetworkAuth
-IE:\msys64\clang64\include\qt6\QtNfc
-IE:\msys64\clang64\include\qt6\QtOpenGL
-IE:\msys64\clang64\include\qt6\QtOpenGLWidgets
-IE:\msys64\clang64\include\qt6\QtPacketProtocol
-IE:\msys64\clang64\include\qt6\QtPositioning
-IE:\msys64\clang64\include\qt6\QtPositioningQuick
-IE:\msys64\clang64\include\qt6\QtPrintSupport
-IE:\msys64\clang64\include\qt6\QtProtobuf
-IE:\msys64\clang64\include\qt6\QtQml
-IE:\msys64\clang64\include\qt6\QtQmlCompiler
-IE:\msys64\clang64\include\qt6\QtQmlCore
-IE:\msys64\clang64\include\qt6\QtQmlDebug
-IE:\msys64\clang64\include\qt6\QtQmlDom
-IE:\msys64\clang64\include\qt6\QtQmlIntegration
-IE:\msys64\clang64\include\qt6\QtQmlLocalStorage
-IE:\msys64\clang64\include\qt6\QtQmlModels
-IE:\msys64\clang64\include\qt6\QtQmlTypeRegistrar
-IE:\msys64\clang64\include\qt6\QtQmlWorkerScript
-IE:\msys64\clang64\include\qt6\QtQmlXmlListModel
-IE:\msys64\clang64\include\qt6\QtQuick
-IE:\msys64\clang64\include\qt6\QtQuick3D
-IE:\msys64\clang64\include\qt6\QtQuick3DAssetImport
-IE:\msys64\clang64\include\qt6\QtQuick3DAssetUtils
-IE:\msys64\clang64\include\qt6\QtQuick3DGlslParser
-IE:\msys64\clang64\include\qt6\QtQuick3DHelpers
-IE:\msys64\clang64\include\qt6\QtQuick3DHelpersImpl
-IE:\msys64\clang64\include\qt6\QtQuick3DIblBaker
-IE:\msys64\clang64\include\qt6\QtQuick3DParticles
-IE:\msys64\clang64\include\qt6\QtQuick3DPhysics
-IE:\msys64\clang64\include\qt6\QtQuick3DPhysicsHelpers
-IE:\msys64\clang64\include\qt6\QtQuick3DRuntimeRender
-IE:\msys64\clang64\include\qt6\QtQuick3DSpatialAudio
-IE:\msys64\clang64\include\qt6\QtQuick3DUtils
-IE:\msys64\clang64\include\qt6\QtQuickControls2
-IE:\msys64\clang64\include\qt6\QtQuickControls2Impl
-IE:\msys64\clang64\include\qt6\QtQuickControlsTestUtils
-IE:\msys64\clang64\include\qt6\QtQuickDialogs2
-IE:\msys64\clang64\include\qt6\QtQuickDialogs2QuickImpl
-IE:\msys64\clang64\include\qt6\QtQuickDialogs2Utils
-IE:\msys64\clang64\include\qt6\QtQuickEffects
-IE:\msys64\clang64\include\qt6\QtQuickLayouts
-IE:\msys64\clang64\include\qt6\QtQuickParticles
-IE:\msys64\clang64\include\qt6\QtQuickShapes
-IE:\msys64\clang64\include\qt6\QtQuickTemplates2
-IE:\msys64\clang64\include\qt6\QtQuickTest
-IE:\msys64\clang64\include\qt6\QtQuickTestUtils
-IE:\msys64\clang64\include\qt6\QtQuickTimeline
-IE:\msys64\clang64\include\qt6\QtQuickWidgets
-IE:\msys64\clang64\include\qt6\QtRemoteObjects
-IE:\msys64\clang64\include\qt6\QtRemoteObjectsQml
-IE:\msys64\clang64\include\qt6\QtRepParser
-IE:\msys64\clang64\include\qt6\QtScxml
-IE:\msys64\clang64\include\qt6\QtScxmlQml
-IE:\msys64\clang64\include\qt6\QtSensors
-IE:\msys64\clang64\include\qt6\QtSensorsQuick
-IE:\msys64\clang64\include\qt6\QtSerialBus
-IE:\msys64\clang64\include\qt6\QtSerialPort
-IE:\msys64\clang64\include\qt6\QtShaderTools
-IE:\msys64\clang64\include\qt6\QtSpatialAudio
-IE:\msys64\clang64\include\qt6\QtSql
-IE:\msys64\clang64\include\qt6\QtStateMachine
-IE:\msys64\clang64\include\qt6\QtStateMachineQml
-IE:\msys64\clang64\include\qt6\QtSvg
-IE:\msys64\clang64\include\qt6\QtSvgWidgets
-IE:\msys64\clang64\include\qt6\QtTest
-IE:\msys64\clang64\include\qt6\QtTextToSpeech
-IE:\msys64\clang64\include\qt6\QtTools
-IE:\msys64\clang64\include\qt6\QtUiPlugin
-IE:\msys64\clang64\include\qt6\QtUiTools
-IE:\msys64\clang64\include\qt6\QtVirtualKeyboard
-IE:\msys64\clang64\include\qt6\QtWebChannel
-IE:\msys64\clang64\include\qt6\QtWebSockets
-IE:\msys64\clang64\include\qt6\QtWebView
-IE:\msys64\clang64\include\qt6\QtWebViewQuick
-IE:\msys64\clang64\include\qt6\QtWidgets
-IE:\msys64\clang64\include\qt6\QtXml
-IE:\msys64\clang64\include\qt6\

这是为了让 clangd 找到Qt的头文件目录, 方便代码补全.

进入vscode cmake插件, 选择要编译的项目文件夹, 配置编译工具链, 我的是clang, 它会自己从系统找, 你选一个合适的就可以了, 前提是必须配合你下载的Qt的编译链, 我的版本是clang64环境编译版本, 那对应的编译工具链必须是这个版本.

接着设置生成版本, 我主要用Debug版本, 用于调试.

如果要进行测试, 可以进一步配置, 我这里没有用到, 所以也没有配置.

所有设置完成后, 就可以点击生成, 然后会自动生成项目的可执行程序, 以及通过UI建立的.h文件和 moc文件.

最后更改可执行文件, 因为通常生成的是项目文件名.exe比如Learn_17.exe, 要改为main.exe, 也就是主程序名.exe.

之后就可以打断点, 愉快的debug了, 调试界面选择QtDebug, 按F5进行调试.

---

总结

其实对于Qt的工程工具链, 争议还是有的, 我所知道, 极少人使用本文的这套方案, 毕竟太繁琐, 同时没有脱离qtcreator, 当然, 有些纯编码的案例也是有的, 看个人的选择了.

---

点击 快速C语言入门

---