VS Code 中搭建 Qt 开发环境方案分享

 更新时间:2022年12月12日 16:45  点击:131 作者:之一Yo

前言

VS Code 高大上的界面、强大的智能联想和庞大的插件市场,着实让人对他爱不释手。虽然可以更改 Qt Creator 的主题,但是 Qt Creator 的代码体验实在差劲。下面就来看看如何在 VS Code 中搭建 Qt 开发环境。

安装拓展

工欲善其事,必先利其器。在开干之前,先来安装一些拓展,他们将提供函数提示、语法高亮等功能。

C/C++ 拓展

提供智能联想功能、语法高亮、Debug 等功能,确实很好用。设置 "C_Cpp.autocompleteAddParentheses": true,可以把函数名后面的括号也给补全了。

Qt 拓展

提供在 VS Code 中打开 Qt Designer、预览 ui 文件、编译 ui 文件和 qrc 文件为 python 源代码、 qss 和 pro 文件语法高亮的功能(之前这两个拓展评分还都是 5 分,VS Code 更新到 1.57 之后突然变成 0 分了,有点奇怪)。

使用之前,需要去设置里面配置下 Qt Designer 可执行文件的路径,如果想要编译 ui 和 qrc 文件为 python 源代码的话,还需要配置 pyuic.exe 和 pyqrc.exe 的路径,示例如下:

{
    "qtForPython.designer.path": "D:/Qt/6.1.0/mingw81_64/bin/designer.exe",
    "pyqt-integration.qtdesigner.path": "D:/Qt/6.1.0/mingw81_64/bin/designer.exe",
    "pyqt-integration.pyuic.cmd": "D:/Python38/Scripts/pyuic5.exe",
    "qtForPython.rcc.path": "D:/Python38/Scripts/pyrcc5.exe",
    "qtForPython.lupdate.path": "D:/Python38/Scripts/pylupdate5.exe",
    "qtForPython.rcc.liveExecution": false,
    "qtForPython.uic.liveExecution": false
}

这些配置都是根据最新的拓展版本来设置的,像 Qt for Python 拓展更新之后的那些配置项的键就和上个版本不一样了,所以推荐使用最新版本。配置好之后右击资源管理器中的 ui 文件,可以在右击菜单中看到和 Qt 相关的菜单项,点击 Edit in Designer 就可以打开 Qt Designer。

创建项目

假设我们的项目结构如上图资源管理器中所示(点击这里下载源代码和 VSCode 配置文件),下面看下如何在脱离 Qt Creator 的情况下创建一个项目。

创建 pro 文件

在终端输入 qmake -project 就可以在顶层目录下生成一个和顶层目录同名的 pro 文件,在这里为 FirstWidget.pro。写完代码之后在终端输入 qmake,就会在顶层目录下生成 Makefile、debug 文件夹和 release 文件夹,一下子就让整个文件夹变得混乱。所以这里我们让 qmake 生成的文件移到 build 文件夹下,方法是在 pro 文件中加入如下代码,然后在终端输入 qmake -o .\build\Makefile

release: DESTDIR = ./release
debug:   DESTDIR = ./debug

OBJECTS_DIR = $$DESTDIR/.obj
MOC_DIR = $$DESTDIR/.moc
RCC_DIR = $$DESTDIR/.qrc
UI_DIR = $$DESTDIR/.ui

但是每次创建项目都写上这么一段太麻烦了,这时候 VS Code 的 Snippets 功能就派上用场了。在 VS Code 中 Ctrl + Shift + P -> 首选项:配置用户代码片段 -> qmake,将打开的 qmake.json 的内容替换为如下代码,关于用户片段的写法参见 《[VS Code]跟我一起在Visual Studio Code 添加自定义snippet(代码段),附详细配置》:

{
	// Place your snippets for qmake here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	"config build dir": {
		"prefix": "build",
		"body": [
			"release: DESTDIR = ./release",
			"debug:   DESTDIR = ./debug",
			"",
			"OBJECTS_DIR = $$$DESTDIR/.obj",
			"MOC_DIR = $$$DESTDIR/.moc",
			"RCC_DIR = $$$DESTDIR/.qrc",
			"UI_DIR = $$$DESTDIR/.ui"
		],
		"description": "配置输出文件路径"
	},
	"initialize project": {
		"prefix": "init",
		"body": [
			"QT       += core gui",
			"",
			"greaterThan(QT_MAJOR_VERSION, 4): QT += widgets",
			"",
			"CONFIG += c++11",
			"",
			"# You can make your code fail to compile if it uses deprecated APIs.",
			"# In order to do so, uncomment the following line.",
			"#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0",
			"",
			"INCLUDEPATH += ${1:include}",
			"",
			"SOURCES += \\",
			"    ${2:src/main.cpp} \\",
			"    ${3:src/$WORKSPACE_NAME.cpp}",
			"",
			"HEADERS += \\",
			"    ${1:include}/$WORKSPACE_NAME.h",
			"",
			"FORMS += \\",
			"    $WORKSPACE_NAME.ui",
			"",
			"release: DESTDIR = ./release",
			"debug:   DESTDIR = ./debug",
			"",
			"OBJECTS_DIR = \\$\\$DESTDIR/.obj",
			"MOC_DIR = \\$\\$DESTDIR/.moc",
			"RCC_DIR = \\$\\$DESTDIR/.qrc",
			"UI_DIR = \\$\\$DESTDIR/.ui",
			"",
			"# Default rules for deployment.",
			"qnx: target.path = /tmp/\\$\\$TARGET/bin",
			"else: unix:!android: target.path = /opt/\\$\\$TARGET/bin",
			"!isEmpty(target.path): INSTALLS += target",
			"$0"
		],
		"description": "初始化工程文件"
	},
}

使用起来如下所示,真的太香了:

创建 tasks.json

在 VS Code 中按下 Ctrl + Shift + P,在命令面板中输入 task,选择配置任务,具体操作如下:

将 tasks.json 的内容替换成如下代码:

{
    "tasks": [
        {
            "type": "shell",
            "label": "qmake build makefile (debug)",
            "command": "qmake",
            "args": [
                "-o",
                "./build/Makefile",
                "CONFIG += debug",
                "CONFIG += console",
            ],
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "problemMatcher": [],
            "group": "build",
            "detail": "生成 Makefile (debug)"
        },
        {
            "type": "shell",
            "label": "qmake build makefile (release)",
            "command": "qmake",
            "args": [
                "-o",
                "./build/Makefile"
            ],
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "problemMatcher": [],
            "group": "build",
            "detail": "生成 Makefile (release)"
        },
        {
            "type": "shell",
            "label": "Qt build debug",
            "command": "make",
            "args": [
                "debug"
            ],
            "options": {
                "cwd": "${workspaceFolder}/build"
            },
            "problemMatcher": [],
            "group": "build",
            "detail": "Qt 生成可调试文件",
            "dependsOn": [
                "qmake build makefile (debug)"
            ]
        },
        {
            "type": "shell",
            "label": "Qt build release",
            "command": "make",
            "args": [
                "release"
            ],
            "options": {
                "cwd": "${workspaceFolder}/build"
            },
            "problemMatcher": [],
            "group": "build",
            "detail": "Qt 生成可执行文件",
            "dependsOn": [
                "qmake build makefile (release)"
            ]
        },
        {
            "type": "shell",
            "label": "Qt build and run release",
            "command": "${workspaceFolder}/build/release/${workspaceRootFolderName}.exe",
            "args": [],
            "problemMatcher": [],
            "group": "build",
            "detail": "Qt 生成并运行可执行文件",
            "dependsOn": [
                "Qt build release"
            ],
            // close 键在 VS Code 1.57 引入
            "presentation": {
                "close": true
            }
        },
        {
            "type": "shell",
            "label": "Qt build and run debug",
            "command": "${workspaceFolder}/build/debug/${workspaceRootFolderName}.exe",
            "args": [],
            "problemMatcher": [],
            "group": "build",
            "detail": "Qt 生成并运行可调试文件",
            "dependsOn": [
                "Qt build debug"
            ]
        },
    ],
    "version": "2.0.0"
}

tasks.json 是 VS Code 的一大亮点,可以在里面配置多个任务,每个任务其实就是帮你在终端输入指令。虽然每个任务的 command 键只能输入一条指令,但是你可以配合 dependsOn 的值,这样在输入这个 command 之前就会依次输入 dependsOn 中各个任务的 command,相当于一个任务在终端输入了多条指令。如果知道 Qt Creator 的编译过程的话就很容易看懂上面 tasks.json 中的每条指令在干些什么。

比如现在我想要在 build 目录下生成 Makefile,那么只要 Alt + T + R,在任务菜单中选择 qmake build makefile (release) 任务,具体过程如下:

再比如我们现在想要编译生成 exe 并运行之,那么只要选择 Qt build and run release,具体过程如下:

运行任务之后就可以在 ./build/release 目录下看到可执行文件。如果编译 makefile 的时候报错很有可能是因为你没有把 D:\Qt\6.2.1\mingw81_64\bin(这个是我的 Qt6.2.1 MinGW 套件目录) 添加到环境变量里,这个路径最好放的前面一点,如果电脑里面装了 Anaconda 还配置了 Anaconda 的路径的话 qmake 可能会发生冲突然后报错。

配置 C++ 智能联想

要想让 C/C++ 拓展解析 Qt 源文件,提供智能联想功能,就需要告诉他 Qt 的源文件在哪。只要打开了C/C++文件,就能在 VS Code 的状态栏看到 C/C++ 的配置按钮,我这里的配置按钮的文字是 Win32,因为我选了 Win32 配置集。下面看下怎么配置智能联想功能:

如动图中所示,我们只要在包含路径中填入需要解析的 Qt 源文件所在的文件夹即可,一种偷懒的方法是直接填入 D:/Qt/6.1.0/mingw81_64/include/** (这是我的 Qt 路径),但是这样会让 C/C++ 拓展递归解析 include 文件夹下的所有文件,会很慢,所以只需填入要用的那些头文件所在文件夹即可,比如:

D:/Qt/6.1.0/mingw81_64/include
D:/Qt/6.1.0/mingw81_64/include/QtGui
D:/Qt/6.1.0/mingw81_64/include/QtCore
D:/Qt/6.1.0/mingw81_64/include/QtWidgets

填好之后会在 .vscode 文件夹下面看到一个 c_cpp_properties.json,里面记录了用户的配置,之后就可以直接修改这个文件中的键的值来配置拓展。配置好之后就可以看到语法高亮和函数提示了,比如下图所示:

后记

至此在 VS Code 中搭建 Qt 开发环境的步骤全部介绍完毕了,但是 VS Code 的强大之处不止如此,可以在官网的文档和每个月的发行文档中了解更多正确的打开方式,而且VS Code 每个月都会更新,带来更多好用的特性,赶紧用起来吧!以上~~

到此这篇关于VS Code 中搭建 Qt 开发环境方案分享的文章就介绍到这了,更多相关 VS Code 中搭建 Qt 开发环境内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

原文出处:https://www.cnblogs.com/zhiyiYo/p/14877952.html

相关文章

  • php中json_decode()和json_encode()用法与中文不显示解决办法

    本文章介绍了关于php中json_decode()和json_encode()用法与中文不显示解决办法,有需要的朋友可以参考一下下。 php中json_decode()和json_encode() 1.json_decode(...2016-11-25
  • js URLdecode()与urlencode方法支持中文解码

    下面来介绍在js中来利用urlencode对中文编码与接受到数据后利用URLdecode()对编码进行解码,有需要学习的机友可参考参考。 代码如下 复制代码 ...2016-09-20
  • PHP json_encode() 函数详解及中文乱码问题

    在 php 中使用 json_encode() 内置函数(php > 5.2)可以使用得 php 中数据可以与其它语言很好的传递并且使用它。这个函数的功能是将数值转换成json数据存储格式。<&#63;php$arr = array ( 'Name'=>'希亚', 'Age'...2015-11-08
  • mac下Apache + MySql + PHP搭建网站开发环境

    首先为什不自己分别搭建Apache,PHP和MySql的环境呢?这样自己可以了解更多知识,说起来也更酷。可也许因为我懒吧,我是那种“既然有现成的,用就是了”的人。君子生非异也,善假于物也。两千年前的荀子就教导我们,要善于利用工具...2014-06-07
  • vscode搭建STM32开发环境的详细过程

    这篇文章主要介绍了vscode搭建STM32开发环境的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-02
  • VSCode搭建C/C++编译环境的详细教程

    Visual Studio Code是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,这篇文章主要介绍了VSCode搭建C/C++编译环境,需要的朋友可以参考下...2020-05-15
  • Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境(教程详解)

    这篇文章主要介绍了Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-12
  • php json_encode值中大括号与花括号区别

    1.当array是一个从0开始的连续数组时,json_encode出来的结果是一个由[]括起来的字符串而当array是不从0开始或者不连续的数组时,json_encode出来的结果是一个由{}括起来的key-value模式的字符串复制代码 代码如下:$test...2013-10-04
  • IntelliJ IDEA 刷题利器 LeetCode 插件详解

    这篇文章主要介绍了IntelliJ IDEA 刷题利器 LeetCode 插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-21
  • vscode安装git及项目开发过程

    这篇文章主要介绍了vscode安装git及项目开发过程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-19
  • Qt定时器和随机数详解

    在前一篇中我们介绍了键盘和鼠标事件,其实还有一个非常常用的事件,就是定时器事件,如果要对程序实现时间上的控制,那么就要使用到定时器。而随机数也是很常用的一个功能,在我们要想产生一个随机的结果时就要使用到随机数。本文我们就来简单介绍一下定时器和随机数。...2020-04-25
  • Vscode上使用SQL的方法

    这篇文章主要介绍了Vscode上使用SQL的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-26
  • Ubuntu 系统下安装Android开发环境 Android Studio 1.0 步骤

    Android Studio 是一个Android开发环境,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试,可以在Linux,Mac OS X,Window...2016-09-20
  • VS+opencv实现鼠标移动图片

    这篇文章主要为大家详细介绍了VS+opencv实现鼠标移动图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
  • VSCode 云同步扩展设置Settings Sync插件

    这篇文章主要介绍了VSCode 云同步扩展设置Settings Sync插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-29
  • 一篇文章教你3分钟如何发布Qt程序

    这篇文章主要给大家介绍了关于教你3分钟如何发布Qt程序的相关资料,文中通过实例代码结束的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-08-24
  • Fedora14 Linux系统安装Golang开发环境笔记

    这篇文章主要介绍了Fedora14 Linux系统安装Golang开发环境笔记,本文讲解了2种安装方法,需要的朋友可以参考下...2020-05-01
  • Qt 使用Poppler实现pdf阅读器的示例代码

    下面小编就为大家分享一篇Qt 使用Poppler实现pdf阅读器的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-25
  • Qt实现闹钟小程序

    这篇文章主要为大家详细介绍了Qt实现闹钟小程序,利用Qt的designer设计需要的闹钟界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-04-25
  • VSCode 配置uni-app的方法

    这篇文章主要介绍了VSCode 配置uni-app的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11