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


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

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

  • 為什么選擇使用VSCode
  1. 實在用不習慣Visual Studio(也可能是用的太少了T▽T)
  2. 代碼編輯方面更喜歡用輕量級的編輯器,比如Sublime或者VSCode
  3. VSCode確實比較強大好用,插件豐富
  • 為什么使用CMake
  1. 通用的編譯構建工具,跨平台的關鍵,一份代碼,CMake可以針對不同的系統編譯構建生成不同的項目工程
  2. 源代碼管理,編譯更加方便(如果僅僅使用VSCode搭建開發環境,則每添加一個源文件,就要改動一下編譯指令)
  • 最終實現的開發流程是怎樣的
  1. VSCode編寫代碼
  2. 快捷鍵Ctrl+Shift+B,調用CMake完成本地項目生成(Mac快捷鍵Command+Shift+B
  3. 快捷鍵Ctrl+B,完成項目的編譯構建與運行(Mac快捷鍵Command+B
  4. 快捷鍵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庫為例

  1. 添加submodule引入glfw(glfw正好是github上的一個開源項目),或是直接將第三方庫的源碼放到自己的目錄中
git submodule add https://github.com/glfw/glfw.git
  1. 使用add_subdirectory命令,將glfw所在的文件夾添加到編譯的任務列表中
# 保證glfw dir被編譯
add_subdirectory (${GLFW_DIR})
  1. 將glfw的頭文件目錄添加到頭文件搜索路徑中
# 添加頭文件搜索路徑
include_directories (${GLFW_DIR}/include)
  1. 鏈接glfw庫,target_link_libraries命令用來鏈接目標與庫文件,第一個參數就是我們的構建目標,后面可以跟多個參數,來表示鏈接多個庫
# 添加鏈接庫
target_link_libraries (${PROJECT_NAME} glfw)

動態庫的加載問題

示例項目引入的irrKlang庫為例,它並不是一個開源項目,不過好在它提供了已經在多個平台上編譯好的庫,所以我們需要根據不同的平台來設置引入不同的庫文件

  1. 利用find_package引入外部依賴包,它可以幫我們找到官方預定義的許多依賴包模塊,當未在官方預定義的依賴中找到時,會再查找FindXXX.cmake文件,執行該文件從而找到XXX庫。更詳細的介紹可以查看這篇文章
# IrrKlang
find_package (IrrKlang REQUIRED)
  1. 先新建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()
  1. 將找到的irrKlan頭文件添加到頭文件搜索路徑中
include_directories (${IRRKLANG_INCLUDE_DIR})
  1. 鏈接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任務
  1. 打開VSCode快捷鍵設置

  1. 在彈出的界面中輸入“run build task”搜索,並修改其快捷鍵

  1. 點擊右上角的翻轉按鈕,進入快捷鍵文件配置

  1. 在打開的文件中,為剛配置的快捷鍵添加參數,告訴它直接啟動名字叫“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進行調試

參考鏈接


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM