VS Code 中搭建 Qt 開發環境方案分享

2022-12-11 14:01:05

前言

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 .buildMakefile：

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:Qt6.2.1mingw81_64bin（這個是我的 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 開發環境內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！