第一部分：環(huán)境準(zhǔn)備與安裝

1. 安裝 VSCode

1. 訪問 VSCode 官網(wǎng) 下載并安裝。
2. 安裝完成后，打開 VSCode，安裝以下必備擴(kuò)展：
   • C/C++ (Microsoft): 提供 C/C++ 語言的 IntelliSense、調(diào)試等功能。
   • CMake (Microsoft): 提供 CMake 項(xiàng)目的構(gòu)建、調(diào)試、配置支持。
   • CMake Tools (Microsoft): CMake 擴(kuò)展的增強(qiáng)工具，是核心。
   • (可選) Qt Configure (TheQtCompany): 幫助配置 Qt 環(huán)境，提供 .ui 文件預(yù)覽等功能。
   • (可選) Qt Tools (TheQtCompany): 提供 Qt 特有的語法高亮等。

2. 安裝 Qt

1. 訪問 Qt 官網(wǎng) 下載 Qt Online Installer。
2. 運(yùn)行安裝程序，登錄或注冊 Qt 賬戶。
3. 在選擇組件頁面，至關(guān)重要的一步：
   • 選擇最新的 Qt 版本 (如 Qt 6.7.0)。
   • 展開該版本，勾選以下組件：
     • MSVC 2019 64-bit (如果你在 Windows 上使用 Visual Studio 的編譯器) 或
     • MinGW 11.2.0 64-bit (如果你使用 MinGW 編譯器) 或
     • Android, iOS, macOS 等 (根據(jù)你的目標(biāo)平臺選擇)。
   • 務(wù)必勾選 Sources 和 Debugging Tools for Windows (Windows MSVC 下)，這對調(diào)試非常有幫助。
   • 勾選 Qt Creator（雖然我們用 VSCode，但 Qt Creator 自帶了許多有用的工具，如 qmake, uic, moc 等，這些工具在構(gòu)建時是必需的）。
   建議： 如果你使用 MSVC，請確保系統(tǒng)已安裝對應(yīng)版本的 Visual Studio Build Tools 或 Visual Studio。

3. 安裝 CMake

1. 訪問 CMake 官網(wǎng) 下載安裝包。
2. 安裝時，務(wù)必勾選 “Add CMake to the system PATH for all users”，這樣 VSCode 和終端才能找到它。
3. 安裝完成后，打開終端 (CMD/PowerShell)，輸入 cmake --version 驗(yàn)證是否安裝成功。

4. 安裝編譯器 (如果未安裝)

• Windows (MSVC): 安裝 Visual Studio 并勾選 “C++ 桌面開發(fā)” 工作負(fù)載。
• Windows (MinGW): 可以單獨(dú)安裝 MinGW-w64，但更簡單的方法是如上所述，在安裝 Qt 時直接勾選 MinGW 組件。
• Linux: 通常系統(tǒng)自帶 GCC/G++，可通過包管理器安裝 (sudo apt install build-essential on Ubuntu)。
• macOS: 安裝 Xcode Command Line Tools (xcode-select --install)。

第二部分：配置 VSCode 環(huán)境

1. 配置 Qt 路徑

VSCode 需要知道 Qt 的安裝位置，以便 CMake Tools 擴(kuò)展能找到 Qt 的庫和工具。

1. 打開 VSCode 的設(shè)置 (Ctrl+,)。
2. 搜索 cmake kit。
3. 找到 Cmake: Kits 設(shè)置，點(diǎn)擊 “在 settings.json 中編輯”。
4. 這會打開 settings.json 文件。我們需要添加一個 “Kit”。

示例配置 (請根據(jù)你的實(shí)際路徑修改):

{
    "cmake.configureOnOpen": false, // 可選：建議關(guān)閉，手動配置
    "cmake.generator": "Ninja",     // 可選：推薦使用更快的 Ninja 代替 NMake
    "cmake.kits": [
        {
            "name": "Qt-6.7.0-MSVC2019_64",
            "compilers": {
                "C": "C:/Program Files (x86)/Microsoft Visual Studio/2019/Community/VC/Tools/MSVC/14.29.30133/bin/Hostx64/x64/cl.exe",
                "CXX": "C:/Program Files (x86)/Microsoft Visual Studio/2019/Community/VC/Tools/MSVC/14.29.30133/bin/Hostx64/x64/cl.exe"
            },
            "environmentVariables": {
                // 將 Qt 的 bin 目錄和編譯器的目錄添加到 PATH
                "PATH": "C:/Qt/6.7.0/msvc2019_64/bin;C:/Program Files (x86)/Microsoft Visual Studio/2019/Community/VC/Tools/MSVC/14.29.30133/bin/Hostx64/x64;${env:PATH}"
            },
            "qtDir": "C:/Qt/6.7.0/msvc2019_64" // 最關(guān)鍵的一行，指向你的 Qt 安裝目錄
        }
    ]
}

• name: 給你的配置起一個易懂的名字。
• compilers: 指定 C 和 C++ 編譯器的完整路徑。
• environmentVariables: 設(shè)置臨時的 PATH 環(huán)境變量，確保構(gòu)建時能找到 moc, uic, rcc 等 Qt 工具以及編譯器。
• qtDir: CMake Tools 擴(kuò)展用這個變量來查找 Qt。

更簡單的方法：
很多時候，CMake Tools 會自動掃描系統(tǒng)并生成 Kits。安裝完上述軟件后，重啟 VSCode，點(diǎn)擊底部狀態(tài)欄的 “No Kit Selected” 或已選擇的 Kit 名稱，可能會自動彈出檢測到的 Kits 列表（包括上面配置的），直接選擇即可。

第三部分：創(chuàng)建并配置一個 CMake Qt 項(xiàng)目

1. 項(xiàng)目結(jié)構(gòu)

創(chuàng)建一個新的項(xiàng)目文件夾，結(jié)構(gòu)如下：

my_qt_app/
├── CMakeLists.txt
├── main.cpp
├── MainWindow.cpp
├── MainWindow.h
├── MainWindow.ui (可選，UI文件)
└── resources.qrc (可選，資源文件)

2. 編寫 CMakeLists.txt

這是 CMake 構(gòu)建系統(tǒng)的核心配置文件。

# 指定 CMake 的最低版本要求。Qt6 推薦使用 3.16 或更高版本。
cmake_minimum_required(VERSION 3.16)
# 設(shè)置項(xiàng)目名稱和版本
project(MyQtApp VERSION 1.0.0 LANGUAGES CXX)
# 設(shè)置 C++ 標(biāo)準(zhǔn)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
# 自動調(diào)用 MOC、UIC、RCC
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTORCC ON)
# 查找所需的 Qt 組件
# 這里的 Core Gui Widgets 是你的項(xiàng)目所依賴的 Qt 模塊
find_package(Qt6 REQUIRED COMPONENTS Core Gui Widgets)
# 如果你的 Qt 安裝在非標(biāo)準(zhǔn)路徑，可能需要手動設(shè)置 Qt6_DIR
# set(Qt6_DIR "C:/Qt/6.7.0/msvc2019_64/lib/cmake/Qt6")
# 添加可執(zhí)行文件目標(biāo)
add_executable(${PROJECT_NAME}
    main.cpp
    MainWindow.h
    MainWindow.cpp
    # MainWindow.ui  # 如果啟用了 AUTOUIC，通常不需要直接添加 .ui 文件
    # resources.qrc  # 如果啟用了 AUTORCC，通常不需要直接添加 .qrc 文件
)
# 將找到的 Qt 庫鏈接到你的可執(zhí)行文件
target_link_libraries(${PROJECT_NAME} PRIVATE
    Qt6::Core
    Qt6::Gui
    Qt6::Widgets
)
# 在 Windows 上，如果是 GUI 應(yīng)用程序（非控制臺），添加以下代碼
if (WIN32)
    win32_gui_executable(${PROJECT_NAME})
endif()

3. 編寫簡單的源代碼

main.cpp

#include <QApplication>
#include "MainWindow.h"
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

MainWindow.h

#pragma once
#include <QMainWindow>
class MainWindow : public QMainWindow
{
    Q_OBJECT // 必須的宏，用于支持 Qt 的信號/槽機(jī)制
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
};

MainWindow.cpp

#include "MainWindow.h"
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    // 設(shè)置窗口標(biāo)題和大小
    setWindowTitle("My First Qt App in VSCode");
    resize(800, 600);
}
MainWindow::~MainWindow() {}

第四部分：在 VSCode 中構(gòu)建和運(yùn)行

1. 打開項(xiàng)目文件夾: 用 VSCode 打開 my_qt_app 文件夾。
2. 選擇 Kit: 點(diǎn)擊底部狀態(tài)欄的 “No Kit Selected”，從列表中選擇你之前配置好的 Kit (如 Qt-6.7.0-MSVC2019_64)。
3. 選擇 Variant (構(gòu)建類型): 點(diǎn)擊底部狀態(tài)欄的 “[Debug]”，可以選擇 Debug, Release, RelWithDebInfo等。
4. 配置項(xiàng)目 (Configure):
   • 按下 Ctrl+Shift+P 打開命令面板。
   • 輸入 CMake: Configure 并執(zhí)行?；蛘唿c(diǎn)擊底部狀態(tài)欄的 “Configure” 按鈕。
   • 這會讓 CMake 讀取你的 CMakeLists.txt，檢查依賴，并在項(xiàng)目根目錄生成一個 build 文件夾（默認(rèn)）和 CMakeCache.txt。
5. 構(gòu)建項(xiàng)目 (Build):
   • 按下 Ctrl+Shift+P，輸入 CMake: Build 并執(zhí)行?；蛘唿c(diǎn)擊底部狀態(tài)欄的 “Build” 按鈕 (一個小齒輪)。
   • 編譯輸出會顯示在終端中。成功后，可在 build/Debug 或 build/Release 文件夾中找到生成的 .exe 文件。
6. 運(yùn)行項(xiàng)目 (Run):
   • 按下 Ctrl+Shift+P，輸入 CMake: Run Without Debugging?；蛘唿c(diǎn)擊底部狀態(tài)欄的 “Play” 按鈕。
   • 你的 Qt 應(yīng)用程序就會啟動！
7. 調(diào)試 (Debug):
   • 首先在代碼中設(shè)置斷點(diǎn) (點(diǎn)擊行號左側(cè))。
   • 然后點(diǎn)擊底部狀態(tài)欄的 “Debug” 按鈕 (一個帶蟲子的播放按鈕) 或按 F5。
   • VSCode 會啟動程序并在斷點(diǎn)處暫停，你可以查看變量、調(diào)用堆棧等信息。

第五部分：常見問題與技巧 (FAQ)

• CMake 找不到 Qt？
  • 檢查 settings.json 中的 qtDir 路徑是否正確。
  • 嘗試在 CMakeLists.txt 中手動設(shè)置 set(Qt6_DIR “你的Qt安裝路徑/lib/cmake/Qt6”)。
• 構(gòu)建失敗，提示找不到 moc_MainWindow.cpp 之類的文件？
  • 確保 CMakeLists.txt 中設(shè)置了 set(CMAKE_AUTOMOC ON)。
  • 確保你的頭文件包含了 Q_OBJECT 宏。
  • 嘗試執(zhí)行 CMake: Delete Cache and Reconfigure 命令，然后重新構(gòu)建。
• 如何添加 .ui 文件或 .qrc 文件？
  • 將 .ui 文件放在源碼目錄。
  • 在 CMakeLists.txt 的 add_executable 命令中不需要直接添加 .ui 文件。AUTOUIC 會自動處理。
  • 確保 .ui 文件對應(yīng)的頭文件（如 MainWindow.h）中包含了使用 ui->setupUi(this); 的代碼。.qrc 資源文件同理。
• 如何清理構(gòu)建？
  • 直接刪除項(xiàng)目根目錄下的 build 文件夾，然后重新 Configure 和 Build。

總結(jié)

VSCode + Qt + CMake 的組合提供了高度可定制化和現(xiàn)代化的開發(fā)體驗(yàn)。雖然初始配置比 Qt Creator 稍顯復(fù)雜，但它提供了無與倫比的編輯器體驗(yàn)、強(qiáng)大的擴(kuò)展生態(tài)系統(tǒng)和對構(gòu)建流程的更深層次控制。一旦配置完成，其流暢的開發(fā)體驗(yàn)會讓你覺得物有所值。

這套組合是當(dāng)前 Qt C++ 開發(fā)的主流選擇之一，它結(jié)合了：

• VSCode: 輕量級、插件豐富、生態(tài)強(qiáng)大的代碼編輯器。
• Qt: 強(qiáng)大的跨平臺應(yīng)用開發(fā)框架。
• CMake: 跨平臺的自動化構(gòu)建系統(tǒng)，能生成用于編譯的 Makefile 或項(xiàng)目文件。

到此這篇關(guān)于VSCode+Qt+CMake詳細(xì)地講解的文章就介紹到這了,更多相關(guān)VSCode Qt CMake內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論