VS Code 中搭建 Qt 開發環境方案分享
前言
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 開發環境內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Qt creator中項目的構建配置和運行設置的步驟
- 史上最貼心的 VS code C++ 環境配置超詳細教程
- 在Visual Studio Code中配置C++編譯環境的問題
- vscode 采用C++17版本進行編譯的實現
- vscode搭建STM32開發環境的詳細過程