使用VSCode和CMake構建跨平臺的C/C++開發環境

iwiniwin發表於2020-09-21

日前在學習製作LearnOpenGL教程的實戰專案Breakout遊戲時，希望能將這個小遊戲開發成跨平臺的，支援在多個平臺執行。工欲善其事必先利其器，首先需要做的自然是搭建一個舒服的跨平臺C/C++開發環境，所以這篇文章主要就是記錄環境搭建的整個過程，踩到的一些坑，以及對應的解決辦法。

正文開始之前，先來闡述幾個問題

為什麼選擇使用VSCode

實在用不習慣Visual Studio（也可能是用的太少了Ｔ▽Ｔ）
程式碼編輯方面更喜歡用輕量級的編輯器，比如Sublime或者VSCode
VSCode確實比較強大好用，外掛豐富

為什麼使用CMake

通用的編譯構建工具，跨平臺的關鍵，一份程式碼，CMake可以針對不同的系統編譯構建生成不同的專案工程
原始碼管理，編譯更加方便（如果僅僅使用VSCode搭建開發環境，則每新增一個原始檔，就要改動一下編譯指令）

最終實現的開發流程是怎樣的

VSCode編寫程式碼
快捷鍵Ctrl+Shift+B，呼叫CMake完成本地專案生成（Mac快捷鍵Command+Shift+B）
快捷鍵Ctrl+B，完成專案的編譯構建與執行（Mac快捷鍵Command+B）
快捷鍵F5，完成專案的除錯與執行（VSCode的F5除錯執行，為了能夠實現除錯功能額外做了許多工作，所以啟動會有些慢，因此在不需要除錯的時候，直接使用Ctrl+B編譯執行看效果會更快些）

開發工具

CMake與VSCode

CMake的獲取，可以檢視CMake官網
VSCode的獲取，可以檢視VSCode官網
關於CMake與VSCode如何安裝，比較簡單，網上也有很多教程，這裡就不詳細介紹了

VSCode外掛推薦安裝

在VSCode的Extensions皮膚中搜尋下面的外掛名即可，記得看清作者名，不要下錯啦

外掛名	作者	描述
C/C++	Microsoft	提供C/C++的程式碼提示，跳轉，除錯等諸多功能，官方出品，基本是C/C++開發必備了
CMake	twxs	提供CMake語法的高亮顯示以及程式碼段提示

示例專案

這裡給出例子工程的檔案目錄情況，並不完整，但具有一定的代表性，不僅涉及原始碼的編譯，同樣包含了靜態庫，動態庫的載入，以及資原始檔的讀取等問題

Breakout
├── 3rd                         // 第三方庫
│    ├── glfw                   // 一個靜態庫目錄
│    ├── irrKlang-1.6.0         // 一個動態庫目錄
│    └── FindIrrKlang.cmake     // cmake檔案
├── resources                   // 資源目錄
│    ├── textures               // 存放貼圖檔案
│    └── shaders                // 存放shader檔案
├── src                         // 原始碼目錄
│    ├── game                   // 原始碼子目錄
│    │    ├── game.h
│    │    └── game.cc
│    └── main.cc    
└── CMakeLists.txt              // cmake檔案

使用CMake

本文僅著重介紹為了完成示例專案開發，解決特定問題而使用的一些cmake語句，詳細的cmake介紹可以檢視這份還不錯的文件或者這篇博文

cmake的所有語句都寫在CMakeLists.txt中，cmake會根據該檔案中的配置完成最終的編譯，構建，打包，測試等一系列任務

一個簡單的CMakeLists.txt如下所示，完整的檔案可以檢視這裡

# cmake最低版本號要求
cmake_minimum_required (VERSION 2.8)
# 設定PROJECT_NAME變數
set(PROJECT_NAME Breakout)
# 設定工程名
project (${PROJECT_NAME})
# 查詢當前目錄下的所有原始檔並存入DIR_SRCS變數
aux_source_directory(src DIR_SRCS)
# 新增一個可編譯的目標到工程
add_executable (${PROJECT_NAME} ${DIR_SRCS})

如何編譯一個資料夾下的所有原始碼

在開發過程中，由於架構設計或是為了便於管理與查詢，原始檔一般會根據不同的功能存放在不同的資料夾中，資料夾中又可能嵌入資料夾，所以需要一條語句能夠獲取所有的原始檔進行編譯，而不用每新建立一個原始檔，就修改一次編譯指令

# 遞迴列出所有原始檔
file (GLOB_RECURSE SOURCE_FILES *.cc)
# 新增一個可編譯的目標到工程
add_executable (${PROJECT_NAME} ${SOURCE_FILES})

上面這條file命令會遞迴列出所有.cc檔案，並存入SOURCE_FILES變數，然後將SOURCE_FILES表示的所有.cc檔案新增到目標即可，從而解決多原始檔編譯問題

如何引入一個第三方靜態庫

為了不重複造輪子，開發中不可避免的要引入其他第三方庫。正常情況下，這個第三方庫也會是一個CMake工程（或是庫的開發者直接提供已經編譯好的庫）

以示例專案引入的glfw庫為例

新增submodule引入glfw（glfw正好是github上的一個開源專案），或是直接將第三方庫的原始碼放到自己的目錄中

git submodule add https://github.com/glfw/glfw.git

使用add_subdirectory命令，將glfw所在的資料夾新增到編譯的任務列表中

# 保證glfw dir被編譯
add_subdirectory (${GLFW_DIR})

將glfw的標頭檔案目錄新增到標頭檔案搜尋路徑中

# 新增標頭檔案搜尋路徑
include_directories (${GLFW_DIR}/include)

連結glfw庫，target_link_libraries命令用來連結目標與庫檔案，第一個引數就是我們的構建目標，後面可以跟多個引數，來表示連結多個庫

# 新增連結庫
target_link_libraries (${PROJECT_NAME} glfw)

動態庫的載入問題

以示例專案引入的irrKlang庫為例，它並不是一個開源專案，不過好在它提供了已經在多個平臺上編譯好的庫，所以我們需要根據不同的平臺來設定引入不同的庫檔案

利用find_package引入外部依賴包，它可以幫我們找到官方預定義的許多依賴包模組，當未在官方預定義的依賴中找到時，會再查詢FindXXX.cmake檔案，執行該檔案從而找到XXX庫。更詳細的介紹可以檢視這篇文章

# IrrKlang
find_package (IrrKlang REQUIRED)

先新建FindIrrKlang.cmake檔案，由它來負責具體的irrKlang庫載入。部分語句如下所示，主要是根據當前平臺的不同，設定不同的標頭檔案路徑，庫路徑，庫所在目錄等變數。用到的find_library語句可以實現直接根據庫的base name（即不需要lib，so等），找到對應的庫，並存入IRRKLANG_LIBRARY變數

find_path(IRRKLANG_INCLUDE_DIR NAMES irrKlang.h PATHS "${3RD_DIR}/irrKlang-1.6.0/include")
IF(WIN32)  # win32平臺
    if("${CMAKE_CXX_COMPILER_ID}" STREQUAL "MSVC")
        message(STATUS "Using MSVC")
        set (IRRKLANG_LIB_DIR "${3RD_DIR}/irrKlang-1.6.0/lib/Win32-visualStudio")
        set (IRRKLANG_BIN_DIR "${3RD_DIR}/irrKlang-1.6.0/bin/Win32-visualStudio")
        find_library(IRRKLANG_LIBRARY NAMES irrKlang PATHS ${IRRKLANG_LIB_DIR})
    elseif("${CMAKE_CXX_COMPILED_ID}" STREQUAL "GNU")
        message(STATUS "Using GCC")
        set (IRRKLANG_LIB_DIR "${3RD_DIR}/irrKlang-1.6.0/lib/Win32-gcc")
        set (IRRKLANG_BIN_DIR "${3RD_DIR}/irrKlang-1.6.0/bin/Win32-gcc")
        find_library(IRRKLANG_LIBRARY NAMES libirrKlang.a PATHS ${IRRKLANG_LIB_DIR})
    endif()

elseif(APPLE)  # mac平臺
    set (IRRKLANG_BIN_DIR "${3RD_DIR}/irrKlang-1.6.0/bin/macosx-gcc")
    find_library(IRRKLANG_LIBRARY NAMES libirrklang.dylib PATHS "${3RD_DIR}/irrKlang-1.6.0/bin/macosx-gcc")

elseif(UNIX AND NOT APPLE)  # 等同於linux平臺
    set (IRRKLANG_BIN_DIR "${3RD_DIR}/irrKlang-1.6.0/bin/inux-gcc")
    find_library(IRRKLANG_LIBRARY NAMES IrrKlang PATHS "${3RD_DIR}/irrKlang-1.6.0/bin/linux-gcc")

endif()

將找到的irrKlan標頭檔案新增到標頭檔案搜尋路徑中

include_directories (${IRRKLANG_INCLUDE_DIR})

連結irrKlang庫

# 新增連結庫
target_link_libraries (${PROJECT_NAME} glfw ${IRRKLANG_LIBRARY})

utf-8編碼格式的程式碼通過visual studio編譯報錯問題

跨平臺的程式碼，一般使用utf-8編碼格式的程式碼，更加通用，也可以保證在MacOS或者Linux平臺上的正常編譯。

但是visual studio預設編譯檔案的編碼是utf-8 with bom，在沒有中文的情況下，直接編譯是沒有問題的，然而當原始檔含有中文時（比如中文註釋），則可能會出現異常，報一些莫名其妙的語法錯誤。解決辦法是通過CMake語句通知MSVC編譯時採用utf-8編碼

# 設定MSVC編譯編碼
add_compile_options("$<$<CXX_COMPILER_ID:MSVC>:/source-charset:utf-8>")

可執行檔案的工作目錄問題

當編譯構建生成可執行檔案後，我們希望可以直接通過命令列命令啟動可執行檔案來檢視效果。但是由於工作目錄的問題，可能會導致出現資原始檔找不到，或者庫載入失敗問題

對於visual studio工程，可以通過CMake語句設定其工作目錄，但是這個工作目錄僅在通過visual studio除錯啟動時才會生效，但對於直接啟動可執行檔案的情況仍然是沒用的

# 設定工作目錄
set_property(TARGET ${PROJECT_NAME} PROPERTY VS_DEBUGGER_WORKING_DIRECTORY 
    ${CMAKE_SOURCE_DIR}/resources
)

所以只能將資原始檔目錄放置到可執行檔案所在目錄下，以保證一定能載入到需要的資源，這可以通過CMake的自定義命令實現

# 複製資原始檔到工作目錄
add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
    COMMAND ${CMAKE_COMMAND} -E copy_directory
    ${CMAKE_SOURCE_DIR}/resources
    $<TARGET_FILE_DIR:${PROJECT_NAME}>/resources
)

這條語句的功能是在編譯結束後，將指定的資源目錄複製到生成的可執行檔案所在的目錄。

同樣的，對於一些動態庫，比如dylib，dll等也需要複製，不過注意最好在編譯前就將它們複製到目標目錄，使用PRE_BUILD指明命令執行的時機

# 複製庫到工作目錄
add_custom_command(TARGET ${PROJECT_NAME} PRE_BUILD
    COMMAND ${CMAKE_COMMAND} -E copy_directory
    ${IRRKLANG_BIN_DIR}
    $<TARGET_FILE_DIR:${PROJECT_NAME}>
)

關於add_custom_command詳細介紹可以檢視這裡

如何修改Mac上動態庫的載入路徑

在Mac上啟動可執行檔案時，一直遇到一個動態庫無法載入的報錯

dyld: Library not loaded: /usr/local/lib/libirrklang.dylib
  Referenced from: ...
  Reason: image not found

這是由於在編譯生成動態庫時，可以指定動態庫的載入路徑，比如我們引入的libirrklang庫預設會到/usr/local/lib目錄下查詢dylib檔案

簡單的解決方式，自然是通過install命令，將libirrklang.dylib檔案安裝到/usr/local/lib目錄下，不過為了不“汙染”其他目錄，更希望可執行檔案載入的是我們放置在其所在目錄下的libirrklang.dylib檔案。為了實現這個目標，我們新增下面的CMake語句

if(APPLE)
    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
        COMMAND install_name_tool -change /usr/local/lib/libirrklang.dylib @executable_path/libirrklang.dylib ${PROJECT_NAME}
    )
endif()

判斷如果是Mac平臺，則通過add_custom_command呼叫install_name_tool命令，來修改應該應用程式對動態庫的查詢路徑。其中的@executable_path就表示可執行檔案所在目錄

關於動態庫載入路徑涉及到的rpath，executable_path，install_name_tool的詳細介紹可以檢視這裡

利用VSCode的task.json執行指定命令

CMake的配置檔案已經基本準備完畢了，接下來就是怎樣結合VSCode更方便的呼叫CMake的問題了

通過Ctrl+Shift+B執行CMake編譯本地工程

Ctrl+Shift+B是VSCode呼叫task的預設快捷鍵，task定義在.vscode目錄下的task.json檔案中，一般使用task來完成編譯等任務，VSCode任務系統提供了豐富的引數配置，我們可以利用它完成很多自定義任務

定義一個task，執行cmake ..命令，完成本地專案的編譯生成。Linux會生成Makefile，MacOS生成Makefile或Xcode工程，Windows下生成Visual Studio工程。注意這裡的..表示的是上層目錄，因為我們會在專案根目錄下新建一個build資料夾，然後在這個資料夾內完成一系列的編譯工作，這樣cmake生成的中間檔案都在build目錄，不會“汙染”開發目錄（將build目錄加入.gitignorej即可忽略CMake所產生的所有中間檔案），在編譯出問題的時候也可以直接刪除buidl目錄重新編譯

{
    "label": "cmake",  // task的名字
    "type": "shell",
    "command": "cmake",
    "args": [
        // "-DCMAKE_BUILD_TYPE=${input:CMAKE_BUILD_TYPE}",
        ".."
    ],
    "options": {
        "cwd": "build"  // 表示當前執行目錄build資料夾
    },
    "group": "build",
    "presentation": {  // 一些控制檯顯示配置
        "echo": true,
        "reveal": "always",  
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
    },
    // Use the standard MS compiler pattern to detect errors, warnings and infos
    "problemMatcher": "$msCompile",
    "dependsOn":["mkbuild"]  // 依賴的任務，在本任務執行前先執行mkbuild任務
}

在cmake ..命令執行前，先通過task執行mkdir新建build資料夾。其中通過windows引數，區分不同平臺設定不同的引數

{
    "label": "mkbuild",
    "type": "shell",
    "command": "mkdir",  // 呼叫的命令
    "args": [  // 命令引數
        "-p",
        "build"
    ],
    "windows":{  // windows平臺使用mkdir -Force build新建資料夾
        "args": [
            "-Force",
            "build"
        ]
    },
    "group": "build",
    "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
    },
    // Use the standard MS compiler pattern to detect errors, warnings and infos
    "problemMatcher": "$msCompile",
}

當按下Ctrl+Shift+B時，VSCode將彈出所有可執行的task，選擇執行cmake task即可。由於定義了依賴（dependsOn），在cmak task執行前，將自動先執行mkbuild task

通過Ctrl+B構建與執行可執行檔案

在啟動可執行檔案前，先通過cmake --build .構建生成可執行檔案

{
    "label": "compile",
    "type": "shell",
    "command": "cmake --build .",
    "options": {
        "cwd": "build"
    },
    "group": "build",
    "presentation": {
        // Reveal the output only if unrecognized errors occur.
        "reveal": "always",
        "clear": true
    },
    // Use the standard MS compiler pattern to detect errors, warnings and infos
    "problemMatcher": "$msCompile"
    }

在可執行檔案生成後，通過task啟動可執行檔案。其中的${workspaceFolderBasename}是VSCode的內建變數，表示工程名。更多的內建變數介紹可以檢視這裡

{
    "label": "run",
    "type": "shell",
    "command": "./${workspaceFolderBasename}",
    "group": "build",
    "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
    },
    "options": {
        "cwd": "build" 
    },
    "windows":{
        "options": {
            "cwd": "build/Debug"  // windows visual studio專案會預設多生成Debug/Release目錄
        },
    },
    // Use the standard MS compiler pattern to detect errors, warnings and infos
    "problemMatcher": "$msCompile",
    "dependsOn":["compile"]  // 在run任務執行前先執行compile任務，確保修改的程式碼生效
}

通過Ctrl+B直接呼叫run任務。由於編譯執行這個任務經常要用到，如果依然通過Ctrl+Shift+B彈出所有任務，再進一步選擇就會有些麻煩，所以定義一個快捷鍵（讀者可以用同樣的方法設定自己喜歡的快捷鍵）來直接執行run任務

開啟VSCode快捷鍵設定

在彈出的介面中輸入“run build task”搜尋，並修改其快捷鍵

點選右上角的翻轉按鈕，進入快捷鍵檔案配置

在開啟的檔案中，為剛配置的快捷鍵新增引數，告訴它直接啟動名字叫“run”的task

{
    "key": "ctrl+b",
    "command": "workbench.action.tasks.runTask",
    "args" : "run"
}

利用VSCode的launch.json完成除錯

VSCode通過.vscode目錄下的launch.json實現對多個平臺多種語言的除錯支援

通過F5完成專案的除錯與執行

配置launch.json檔案以支援C/C++專案的除錯

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Debug", //名稱
            "type": "cppdbg", //除錯型別，除使用msvc進行除錯外，均為該型別
            "request": "launch",
            "program": "${workspaceFolder}/build/${workspaceFolderBasename}", //指定C/C++程式位置
            "args": [], //指定執行引數
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}/build", //指定工作目錄
            "preLaunchTask": "compile", //在除錯前會先呼叫這個task編譯構建程式
            "environment": [],
            "externalConsole": false,
            "osx": { //macOS的特定配置
                // "miDebuggerPath": "/Applications/Xcode.app/Contents/Developer/usr/bin/lldb-mi", //修改使用的lldb-mi，一般不需要修改
                "MIMode": "lldb" //指定使用lldb進行除錯
            },
            "linux": { //linux的特定配置
                "MIMode": "gdb", //指定使用gdb除錯
                "setupCommands": [
                    {
                        "description": "Enable pretty-printing for gdb",
                        "text": "-enable-pretty-printing",
                        "ignoreFailures": true
                    }
                ]
            },
            "windows": { //windows的特定配置
                "type": "cppvsdbg", //指定使用msvc進行除錯
                "program": "${workspaceFolder}/build/Debug/${workspaceFolderBasename}.exe", //指定C/C++程式位置
            }
        }
    ]
}

F5是VSCode除錯執行的預設快捷鍵，不需要額外配置，啟動除錯後的介面如下所示

通過使用本地工具完成除錯

由於cmake在windows平臺會預設生成Visual Stduio工程，所以也可以直接開啟生成的解決方案，通過Visual Studio進行除錯
Mac平臺可以使用cmake .. -GXcode命令指定生成XCode工程，然後通過XCode進行除錯

參考連結

跨平臺的C/C++整合開發環境 CLion 2022
2022-10-31
C++開發環境
vscode中使用cmake構建c++專案
2024-06-27
VSCodeC++
linux下使用vscode和makefile搭建C++開發環境
2020-07-31
LinuxVSCodeC++開發環境
VSCODE 配置 C/C++ 開發環境
2024-06-27
VSCodeC++開發環境
VsCode配置C/C++開發環境
2022-02-08
VSCodeC++開發環境
使用c++開發跨平臺的程式
2019-07-25
C++
Vim+CMake+MinGW配置C/C++開發環境
2018-04-03
C++開發環境
vscode 配置c++環境
2021-07-19
VSCodeC++
VSCode系列 - 如何用VSCode搭建C++高效開發環境(1)
2024-08-20
VSCodeC++開發環境
VSCode系列 - 如何用VSCode搭建C++高效開發環境(2)
2024-08-21
VSCodeC++開發環境
VSCode使用優化(二):簡單快速地配置C/C++開發環境
2020-10-17
VSCode優化C++開發環境
VSCode中配置 C/C++ 環境
2024-12-03
VSCodeC++
Linux C++ 開發5 - 一文了解CMake構建
2024-08-26
LinuxC++
Linux C++ 開發1 - 搭建C++開發環境
2024-07-30
LinuxC++開發環境
CLion 2022開發C及C++所設計的跨平臺IDE
2022-07-28
C++IDE
Linux 開發環境 -- C/C++開發環境編譯安裝
2020-10-15
Linux開發環境C++編譯
VScode中配置C++執行環境
2021-01-03
VSCodeC++
macOS下使用VS Code配置C/C++開發環境
2023-05-09
MacC++開發環境
C++跨平臺庫boost和Poco的編譯
2024-05-28
C++編譯
C++入門（3）：C++開發環境搭建
2021-03-04
C++開發環境
linux環境下vscode 中C/C++編譯及除錯環境的搭建
2018-03-25
LinuxVSCodeC++編譯除錯
使用Electron構建跨平臺的桌面應用
2022-12-05
Ubuntu之C++開發環境的搭建
2018-05-17
UbuntuC++開發環境
使用 cmake 來搭建跨平臺的應用程式框架：C語言版本
2021-05-11
框架C語言
centos配置vim c++開發環境
2020-09-28
CentOSC++開發環境
CLion 2022 for Mac(C/C++整合開發環境)
2023-03-13
MacC++開發環境
JetBrains CLion 2024.2 (macOS, Linux, Windows) - C 和 C++ 跨平臺 IDE
2024-08-18
AIMacLinuxWindowsC++IDE
vscode 配置c/c++環境，無法生成 *.exe檔案
2024-04-25
VSCodeC++
Electron-使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用
2019-03-07
JavaScriptHTMLCSS
VSCode + Docker 的 PHP 開發環境
2020-08-12
VSCodeDockerPHP開發環境
Electron + Vue + Vscode構建跨平臺應用（一）知識點補充
2019-10-17
VueVSCode
atom for mac配置c/c++開發環境筆記
2020-12-06
MacC++開發環境筆記
macOS下使用VS Code配置gcc、gdb搭建C/C++開發環境
2023-05-10
MacGCC++開發環境
VSCode Python開發環境配置
2019-01-07
VSCodePython開發環境
VSCode配置JAVA開發環境
2018-12-31
VSCodeJava開發環境
Vscode配置golang開發環境
2022-06-24
VSCodeGolang開發環境
Pybind11和CMake構建python擴充套件模組環境搭建
2024-07-17
Python套件
用 Docker 構建 PHP 開發環境
2018-03-07
DockerPHP開發環境