在 Visual Studio Code 创建 C/C++ 的 WebAssembly 开发环境

本文链接：https://blog.youkuaiyun.com/funcoder/article/details/124539886

本文介绍了如何在Visual Studio Code(VSCode)中创建C/C++的WebAssembly开发环境，包括安装CMake、Ninja、Wasmtime解释器和WASI-SDK等依赖，安装必要的VSCode扩展，配置工具链、启动和调试设置，以及如何处理远程开发中的问题。此外，还讲解了如何在项目中使用第三方库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 Visual Studio Code 创建 C/C++ 的 WebAssembly 开发环境

安装依赖
- VSCode 扩展
VSCode 工作区配置
创建 C++ 项目
- 运行
- 调试
使用第三方库

缩写释义
WASM : WebAssembly
VSCode : Visual Studio Code

安装依赖

CMake
使用 3.21 以上版本，下载解压到磁盘后，追加目录路径到环境变量 PATH
Ninja
下载解压到磁盘后，追加目录路径到环境变量 PATH
Wasmtime 解释器
下载解压到磁盘后，将目录路径追加到环境变量 PATH
WASI-SDK 编译器
下载解压到磁盘后，将目录路径设置到环境变量 WASM_SDK_HOME

VSCode 扩展

VSCode 工作区配置

在确认所有依赖已经准备完毕后，进行工程的 VSCode 工作区配置

配置工具链

在 .vscode 目录中创建两个文件 cmake-kits.json 和 c_cpp_properties.json 编辑为以下内容

cmake-kits.json

配置 WASM 编译器工具链，指定使用 wasi-sdk。

[
    {
   
        "name":"wasi-sdk",
        "toolchainFile": "${env:WASI_SDK_HOME}/share/cmake/wasi-sdk.cmake",
        "cmakeSettings": {
   
            "WASI_SDK_PREFIX":"${env:WASI_SDK_HOME}"
        }
    }
]

c_cpp_properties.json

配置代码自动提示。

{
   
   "configurations": [
       {
   
           "name":"WASM",
           "includePath": [
               "${workspaceFolder}/**"
           ],
           "defines": [