vscode的launch.json怎么配置

VSCode launch.json 配置全攻略：从入门到精通

在 VSCode 中进行调试时，launch.json 是不可或缺的配置文件，它就像调试的“路线图”，告诉 VSCode 如何启动程序、附加到进程、传递参数，以及设置断点、变量监控等调试行为，无论是前端开发、后端服务，还是数据脚本，正确配置 launch.json都能让调试效率事半功倍，本文将从基础到进阶，详细讲解 launch.json 的配置方法，覆盖常见场景和实用技巧。

初识 launch.json：它是如何工作的？

launch.json 是 VSCode 的调试配置文件，存储在项目的 .vscode 目录下（需手动创建），它的核心作用是定义一个或多个“调试配置”（configurations），每个配置对应一种调试场景（如启动 Web 服务、测试单元代码、附加到运行中的进程等）。

当按下 F5 或点击调试面板的“启动”按钮时，VSCode 会读取 launch.json，根据当前选择的配置执行对应的启动和调试逻辑。

创建 launch.json：第一步操作

自动生成（推荐）

首次在项目中调试时,VSCode 会提示“创建 launch.json 文件”，点击“创建”后，VSCode 会根据项目类型（如 Python、Node.js、Java 等）自动生成一个模板文件，包含基础配置。

手动创建

若未自动提示,可手动创建：

• 在项目根目录新建 .vscode 文件夹（若不存在）；
• 在 .vscode 中新建 launch.json 文件；
• 参考官方模板或本文示例编写配置。

核心配置项解析：每个参数的含义

launch.json 的核心是 configurations 数组，每个元素是一个调试配置，以下是通用配置参数（部分参数因语言/环境而异）：

基础参数

高级参数

常见场景配置示例

场景1：Node.js 调试（调试 Express 服务）

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Express Server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/app.js",
      "args": [],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "sourceMaps": true,
      "env": {
        "NODE_ENV": "development",
        "PORT": "8080"
      }
    }
  ]
}

• sourceMaps: true：支持 ES6/TypeScript 代码调试（需配置 tsconfig.json）；
• console: "integratedTerminal"：在 VSCode 终端中显示输出，方便查看日志。

场景2：Python 调试（调试 Flask 应用）

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Flask App",
      "type": "python",
      "request": "launch",
      "module": "flask",
      "args": ["run", "--host=0.0.0.0", "--port=5000"],
      "cwd": "${workspaceFolder}",
      "env": {
        "FLASK_APP": "app.py",
        "FLASK_ENV": "development"
      },
      "console": "integratedTerminal"
    }
  ]
}

• module: "flask"：以模块方式启动 Flask（需确保已安装 flask）；
• env 设置 Flask 相关环境变量。

场景3：前端调试（Chrome + React）

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome-profile"
    }
  ]
}

• type: "chrome"：需安装 “Debugger for Chrome” 扩展；
• webRoot：指定前端代码根目录，source map 会基于此路径映射；
• userDataDir：避免 Chrome 缓存影响调试。

场景4：附加到运行中进程（调试已启动的服务）

适用于服务已通过命令行启动（如 npm start），需附加调试器的情况：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Node Process",
      "type": "node",
      "request": "attach",
      "port": 9229, // Node 默认调试端口（需启动时添加 --inspect 参数）
      "skipFiles": ["<node_internals>/*"]
    }
  ]
}

• 启动服务时需添加调试参数：node --inspect src/app.js；
• port 需与启动时的调试端口一致。

场景5：C++ 调试（GDB/LLDB）

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug C++ Program",
      "type": "cppdbg",
      "request": "launch",
      "program": "${workspaceFolder}/build/main",
      "args": [],
      "stopAtEntry": true,
      "cwd": "${workspaceFolder}",
      "environment": [],
      "externalConsole": false,
      "MIMode": "gdb",
      "miDebuggerPath": "/usr/bin/gdb", // GDB 路径（Windows 可改为 "gdb.exe"）
      "setupCommands": [
        {
          "description": "Enable pretty-printing for gdb",
          "text": "-enable-pretty-printing",
          "ignoreFailures": true
        }
      ]
    }
  ]
}

• type: "cppdbg"：需安装 “C/C++” 扩展；
• MIMode：调试器模式（gdb 或 lldb）；
• miDebuggerPath：调试器可执行文件路径。

进阶技巧：提升调试效率

使用变量（Variables）

launch.json 支持预定义变量，灵活配置路径： | 变量 | 说明 | |------|------| | ${workspaceFolder} | 当前项目根目录 | | ${fileDirname} | 当前文件所在目录 | | `${fileB