Skip to content

Build on any OS with Clang and VS Code

Jump to bottom
Marcus Hudritsch edited this page Jul 1, 2024 · 6 revisions

Why?

Clang is a compiler that runs on and generates code for Windows, Linux, and macOS. Clang is a drop-in replacement for each platform "native" compiler (Microsoft Visual C++ on Windows, GCC on Linux, on Apple devices, it is the native compiler) because it provides a compatible command-line interface and emits compatible code. For example, you can mix Windows libraries built with MSVC and Clang and use the linker of either toolchain to produce the final binary. Using the same compiler on every platform is convenient because you get the same tools (sanitizers, profilers), error messages, quality of generated code, bugs, etc.

VS Code is a cross-platform editor developed by Microsoft. VS Code is heavily customizable, depending on official or community-developed extensions for most of its functionality. You get the extensibility of something like Vim together with a graphical interface that comes close to full-blown IDEs. Language support in VS Code is generally implemented using language servers that provide features like code completion, go to definition, renaming, etc. to the editor. For C/C++, a very popular language server is clangd, which of course integrates seamlessly with Clang.

Requirements

Windows

  • A Clang/LLVM toolchain: Open a PowerShell and enter winget install "LLVM"
  • Visual Studio Build Tools (Download)
  • Ninja: Open a PowerShell and enter winget install "Ninja-build.Ninja"
  • VS Code (Download)

macOS

  • Xcode (Apple's fork of Clang called Apple Clang comes with Xcode)
  • VS Code (Download)

Linux

Setup

  1. Clone the Git repository into a directory of your choice.
  2. Open the project in VS Code:
    • On macOS and Linux: Start VS Code, go to File > Open Folder..., and select the SLProject root directory
    • On Windows: Open a Developer PowerShell so Clang can find your MSVC toolchain and enter code <Your SLProject root directory>
  3. Install and enable the following extensions:
  4. Open the command palette (Ctrl + Shift + P) and enter CMake: Scan for Kits
  5. In the command palette, enter CMake: Select a Kit and select the Clang/LLVM toolchain:
    • On Windows, select Clang-cl <version> x86_64-pc-windows-msvc
      • Make sure you select Clang-cl and not Clang!
      • Example: Clang-cl 18.1.6 x86_64-pc-windows-msvc
    • On macOS, select Clang <version> <architecture>-apple-darwin<version>
      • Example: Clang 15.0.0 arm64-apple-darwin-23.4.0
    • On Linux, select Clang <version> <architecture>-unknown-linux-gnu
      • Example: Clang 17.0.0 x86_64-unknown-linux-gnu
  6. Open your VS Code settings, switch to Workspace, and go to Extensions > clangd
  7. Add the following clangd argument (Clangd: Arguments): --compile-commands-dir=build
  8. Run the command CMake: Configure
  9. Restart clangd by opening the command palette and entering clangd: Restart language server

Running

  1. Open the command palette and enter CMake: Set Debug Target
  2. Select app-demo to run the SLProject demo application
  3. Run the command CMake: Debug to build and launch the application

How to...

Use CMake Without the Command Palette

Most CMake configuration options are also available in the CMake view. To open the CMake view, click on the CMake icon in the Activity Bar on the left-hand side of the VS Code window. Here, you can configure:

  • The kit (toolchain)
  • The build type (Debug/Release)
  • The target to build
  • The target to launch/debug

Additionally, there are buttons in the Status Bar at the bottom to build, debug, and launch the selected target.

Develop for Emscripten

  1. Activate your Emscripten environment
  2. In a terminal, run: emcmake cmake -Bbuild-emscripten -DCMAKE_BUILD_TYPE=Debug -DCMAKE_EXPORT_COMPILE_COMMANDS=ON .
  3. Open your VS Code settings, switch to Workspace, and go to Extensions > clangd
  4. Change the argument to: --compile-commands-dir=build-emscripten
  5. clangd requires some additional configuration to work with Emscripten. Run the script scripts/configure_clangd_emscripten.py with the path to the build directory:
    • On Windows: python .\scripts\configure_clangd_emscripten.py build-emscripten
    • On macOS and Linux: python3 ./scripts/configure_clangd_emscripten.py build-emscripten
  6. Restart clangd by opening the command palette and entering clangd: Restart language server

To revert back to your normal development environment, set the clangd argument in your VS Code settings back to --compile-commands-dir=build, delete the file .clangd, and restart the language server.

Clone this wiki locally