vscode+qt+qmake开发环境搭建,史上最全最详细!

2024-06-04 3876阅读
00. 前言

​ 鉴于Qt官方IDE太过难用,VSCode+各种插件功能强大,遂采用VSCode来写Qt项目。

01. 环境搭建
1. 需要安装的软件:
  • VSCode,官方最新版就行
  • Qt,版本随意,本文主要针对较老版本使用Qmake构建系统的项目
    2. 环境变量:
    • Qt环境变量,需要配置Qt库跟MinGW,尽量使用Qt安装时自带的MinGW

      vscode+qt+qmake开发环境搭建,史上最全最详细! 第1张

    • VSCode插件,下面C/C++插件是必需的没意见吧

      vscode+qt+qmake开发环境搭建,史上最全最详细! 第2张

      vscode+qt+qmake开发环境搭建,史上最全最详细! 第3张

      02. 开始配置
      1. 创建项目项目

      先用Qt Creator创建个Qmake项目,最简单的空白窗口,项目结构如下

      vscode+qt+qmake开发环境搭建,史上最全最详细! 第4张

      2. 使用VSCode打开项目

      vscode+qt+qmake开发环境搭建,史上最全最详细! 第5张

      3. 配置C/C++插件

      VSCode快捷键ctrl+shift+p打开命令面板,输入c++,选择编辑配置

      vscode+qt+qmake开发环境搭建,史上最全最详细! 第6张

      4. 编辑C/C++设置
      • 编译器路径:下拉有得选就选你配置环境变量的Qt版本,没有就自己复制路径过来

        vscode+qt+qmake开发环境搭建,史上最全最详细! 第7张

      • IntelliSense 模式:选择安装的gcc的架构,我安装的是64位Qt,上面自带的gcc编译器也是64位,就选择windows-gcc-x64

        vscode+qt+qmake开发环境搭建,史上最全最详细! 第8张

      • 头文件路径:这个主要是实现头文件识别,要不然Qt的头文件一直飘红,也没法自动跳转头文件,第一行是当前像目录下所有,第二行是安装的Qt库的头文件路径

        vscode+qt+qmake开发环境搭建,史上最全最详细! 第9张

      • 剩下的配置按需配置,不配置也不影响。选择编辑json可以查看C/C++插件json版本的配置

        vscode+qt+qmake开发环境搭建,史上最全最详细! 第10张

        刚才配置的都在这里面了,现在引用Qt头文件已经不报错了 c_cpp_properties.json

        {
            "configurations": [
                {
                    "name": "Win32",
                    "includePath": [
                        "${workspaceFolder}/**",
                        "C:/Qt/5.15.2/mingw81_64/include/**"
                    ],
                    "defines": [
                        "_DEBUG",
                        "UNICODE",
                        "_UNICODE"
                    ],
                    "intelliSenseMode": "windows-gcc-x64",
                    "compilerPath": "C:/Qt/Tools/mingw810_64/bin/g++.exe"
                }
            ],
            "version": 4
        }
        
        5. 配置task.json
        • 选择终端-运行任务-配置任务-使用模板创建task.json文件-Others;这一步无所谓,就是搞个模板,用我下面贴的一样

          vscode+qt+qmake开发环境搭建,史上最全最详细! 第11张

        • 配置编译Qt项目的task,这一步其实是跟Qt Creator相同的,我们打开Qt Creator,选择项目,查看刚才的项目的项目构建配置

          vscode+qt+qmake开发环境搭建,史上最全最详细! 第12张

          Qt Creator构建步骤分析如下:

          • 设置构建目录,也就是编译出来的中间文件目录

          • qmake,这一步其实是用qmake将.pro配置文件编译成makefile,并且将其中涉及的.ui、.qrc等编译成cpp,都在构建目录中,下面是切换Debug/Release时不同的qmake编译命令

            #Debug
            C:/Qt/5.15.2/mingw81_64/bin/qmake.exe D:\Code\Other\untitled\untitled.pro -spec win32-g++ "CONFIG+=debug" "CONFIG+=qml_debug" && C:/Qt/Tools/mingw810_64/bin/mingw32-make.exe qmake_all
            #Release
            C:/Qt/5.15.2/mingw81_64/bin/qmake.exe D:\Code\Other\untitled\untitled.pro -spec win32-g++ "CONFIG+=qml_debug" && C:/Qt/Tools/mingw810_64/bin/mingw32-make.exe qmake_all
            
          • make,真正的编译cpp,MinGW使用的式mingw32-make.exe

            mingw32-make.exe -j22 in D:\Code\Other\untitled\build
            
          • clean,这里使用还是mingw32-make.exe

            mingw32-make.exe clean -j20 in D:\Code\Other\untitled\build
            
          • 将上面Qt Creator构建步骤转换为task.json就行了,我把debug、relese全流程都加上了,非常简单!

            {
                // See https://go.microsoft.com/fwlink/?LinkId=733558
                // for the documentation about the tasks.json format
                "version": "2.0.0",
                "tasks": [
                    {
                        //在当前项目目录创建build文件夹
                        "label": "mkdir", //任务名称
                        "type": "shell", //任务类型,定义任务是被作为进程运行还是在 shell 中作为命令运行。
                        "options": {
                            "cwd": "${workspaceFolder}" //已执行程序或脚本的当前工作目录,设置当前项目文件夹
                        },
                        "command": "mkdir", //命令
                        "args": [ //命令后面跟的参数
                            "-Force",
                            "build"
                        ]
                    },
                    {
                        "label": "qmake-debug",
                        "type": "shell",
                        "options": {
                            "cwd": "${workspaceFolder}/build" //进入build目录
                        },
                        "command": "qmake", //qmake命令,这里没用完整路径,是因为配置到环境变量了 C:/Qt/5.15.2/mingw81_64/bin/qmake.exe
                        "args": [ //跟的参数是不是很熟悉,就是上面分析出来的Qt Creator执行流程
                            "../${workspaceFolderBasename}.pro", //在build目录上一级哦
                            "-spec",
                            "win32-g++",
                            "\"CONFIG+=debug\"",
                            "\"CONFIG+=console\""
                        ],
                        "dependsOn": [ //这是本条命令依赖的前置条件,就是上面创建build文件夹的task,直接执行本task会自动先调用依赖的task
                            "mkdir" //其实可以手动执行一次,后面不用每次都执行创建目录的操作
                        ]
                    },
                    {
                        "label": "make-debug",
                        "type": "shell",
                        "options": {
                            "cwd": "${workspaceFolder}/build"
                        },
                        "command": "mingw32-make", //MinGW这个也配置在环境变量了,不用写完整路径了 C:/Qt/Tools/mingw810_64/bin/mingw32-make.exe
                        "args": [
                            "-f",
                            "Makefile.Debug", //-f 选择makefile,这是qmake编译出来的
                            "-j7" //这个参数都知道吧,编译用的线程数量
                        ],
                        "dependsOn": [
                            "qmake-debug"
                        ]
                    },
                    {
                        "label": "run-debug",
                        "type": "process", //运行就不能选择shell执行了,要选择process
                        "options": {
                            "cwd": "${workspaceFolder}/build/debug" //没在.pro配置DESTDIR,会生成到build目录下面对应目录
                        },
                        "command": "${workspaceFolderBasename}.exe", //执行的exe名字,一般当前项目文件夹的名称,自定义可以写其他的
                        "dependsOn": [
                            "make-debug"
                        ]
                    },
                    /
                    {
                        "label": "qmake-release",
                        "type": "shell",
                        "options": {
                            "cwd": "${workspaceFolder}/build"
                        },
                        "command": "qmake",
                        "args": [ //注意release跟debug参数的差异
                            "../${workspaceFolderBasename}.pro",
                            "-spec",
                            "win32-g++",
                            "\"CONFIG+=qtquickcompiler\""
                        ],
                        "dependsOn": [
                            // "mkdir" //不用每次都创建吧
                        ]
                    },
                    {
                        "label": "make-release",
                        "type": "shell",
                        "options": {
                            "cwd": "${workspaceFolder}/build"
                        },
                        "command": "mingw32-make",
                        "args": [
                            "-f",
                            "Makefile.Release", //注意release跟debug参数的差异
                            "-j7"
                        ],
                        "dependsOn": [
                            "qmake-release"
                        ]
                    },
                    {
                        "label": "run-release",
                        "type": "process",
                        "options": {
                            "cwd": "${workspaceFolder}/build/release"
                        },
                        "command": "${workspaceFolderBasename}.exe",
                        "dependsOn": [
                            "make-release"
                        ]
                    },
                    {
                        "label": "clean",
                        "type": "shell",
                        "options": {
                            "cwd": "${workspaceFolder}/build"
                        },
                        "command": "mingw32-make",
                        "args": [
                            "clean"
                        ]
                    }
                ]
            }
            
          • 既然配置好了,那就可以开心的运行代码,有两种方式

            • 终端-运行任务-选择任务,我们配置的task都在里面了,选择run-debug/run-release就行,因为配置过depend[],前面qmake、make都被一条龙调用

              vscode+qt+qmake开发环境搭建,史上最全最详细! 第13张

            • 既然是VSCode,不用快捷键怎么可以,超级强大的ctrl+shift+p,输入run,和手点流程一样,回车,方向键选择run-debug/run-release回车执行就好了

              vscode+qt+qmake开发环境搭建,史上最全最详细! 第14张

              一条龙调用的命令在控制台就会有输出了,exe启动后log也会在这输出

              vscode+qt+qmake开发环境搭建,史上最全最详细! 第15张

              03. 配置断点调试

              ​ 上面配置的是以debug/release方式运行程序,那么要打断点调试怎么办呢?

              1.配置launch.json
              • 侧边栏选择调试,点击创建launch.json文件

                vscode+qt+qmake开发环境搭建,史上最全最详细! 第16张

              • 选择c++就行,第一个第二个没关系,反正生成的几乎空白的模板

                vscode+qt+qmake开发环境搭建,史上最全最详细! 第17张

              • 选择创建配置,选择gdb启动作为基础模板,来在上面修改

                vscode+qt+qmake开发环境搭建,史上最全最详细! 第18张

              • 修改内容如下,我放了自动生成的模板跟修改后的,可以对比看下修改了那些地方,实际使用记得删除哈

                {
                    // 使用 IntelliSense 了解相关属性。 
                    // 悬停以查看现有属性的描述。
                    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
                    "version": "0.2.0",
                    "configurations": [
                        {
                            "name": "(gdb) 启动", //模板,实际使用记得删除
                            "type": "cppdbg",
                            "request": "launch",
                            "program": "输入程序名称,例如 ${workspaceFolder}/a.exe",
                            "args": [],
                            "stopAtEntry": false,
                            "cwd": "${fileDirname}",
                            "environment": [],
                            "externalConsole": false,
                            "MIMode": "gdb",
                            "miDebuggerPath": "/path/to/gdb",
                            "setupCommands": [
                                {
                                    "description": "为 gdb 启用整齐打印",
                                    "text": "-enable-pretty-printing",
                                    "ignoreFailures": true
                                },
                                {
                                    "description": "将反汇编风格设置为 Intel",
                                    "text": "-gdb-set disassembly-flavor intel",
                                    "ignoreFailures": true
                                }
                            ]
                        },
                        {
                            "name": "debug", //修改后
                            "type": "cppdbg",
                            "request": "launch",
                            "program": "${workspaceFolder}/build/debug/${workspaceFolderBasename}.exe", //写完整路径
                            "args": [],
                            "stopAtEntry": false,
                            "cwd": "${workspaceFolder}", //工作目录,项目根目录
                            "environment": [],
                            "externalConsole": false,
                            "MIMode": "gdb",
                            "miDebuggerPath": "C:/Qt/Tools/mingw810_64/bin/gdb.exe", //选择MinGW中的gdb
                            "setupCommands": [
                                {
                                    "description": "为 gdb 启用整齐打印",
                                    "text": "-enable-pretty-printing",
                                    "ignoreFailures": true
                                }
                            ],
                            "preLaunchTask": "make-debug", //这跟depend[]很像啊,make就行了,用make编译出exe
                        }
                    ]
                }
                
                2. 运行调试
                • 重新打开调试,刚才配置的调试配置已经存在了

                  vscode+qt+qmake开发环境搭建,史上最全最详细! 第19张

                • 打个断点,点击绿色三角,运行下看看效果

                  vscode+qt+qmake开发环境搭建,史上最全最详细! 第20张

                  04. 运行效果
                  • run-debug及自动生成的目录结构、控制台log,ctrl+c结束程序

                    vscode+qt+qmake开发环境搭建,史上最全最详细! 第21张

                  • run-release

                    vscode+qt+qmake开发环境搭建,史上最全最详细! 第22张

                  • debug断点调试

                    vscode+qt+qmake开发环境搭建,史上最全最详细! 第23张


    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]