VSCode配置详解：Launch、Settings与Tasks

VS Code 的强大离不开 .vscode 目录下的三个核心配置文件：settings.json、tasks.json 和 launch.json。这些配置仅对当前项目生效，且Cursor 编辑器也能完美兼容。本文通过精简的示例介绍它们的作用及协作方式。

1. settings.json：编辑器配置

作用：控制编辑器行为（当前工作区级别，优先级高于全局设置）。

示例：

// .vscode/settings.json
{
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.tabSize": 2, // 缩进大小
  "files.exclude": {
    // 隐藏特定文件
    "**/.git": true,
    "**/.DS_Store": true
  },
  "search.exclude": {
    // 搜索时排除
    "**/node_modules": true
  }
}

2. tasks.json：任务自动化

作用：将命令行脚本集成到编辑器中。不同语言的配置方式略有差异（如 Node.js 用 npm 类型，C++/Rust 用 shell 类型），但核心都是为了支持通过快捷键一键调用。

2.1 Node.js 项目示例 (npm)

定义一个 npm test 任务，并让 npm build 依赖它（即构建前自动测试）。

// .vscode/tasks.json
{
  "version": "2.0.0", // 推荐版本
  "tasks": [
    {
      "label": "npm: build",
      "type": "npm", // 任务类型：自动识别 package.json
      "script": "build", // 对应 scripts.build (自动执行 npm run build)
      "dependsOn": ["npm: typecheck"], // 依赖项：先运行 typecheck，成功后再运行 build
      "group": {
        "kind": "build", // 归类为“构建任务” (Cmd+Shift+B 专用)
        "isDefault": true // 设为默认，按快捷键直接运行，不弹窗选择
      },
      "problemMatcher": ["$tsc"] // 捕获 TS 错误并在代码中高亮
    },
    {
      "label": "npm: typecheck",
      "type": "npm",
      "script": "typecheck",
      "group": "test" // 归类为“测试任务” (可通过 Run Test Task 查找)
    }
  ]
}

2.2 C++ 项目示例 (Shell)

C++/Rust 等项目通常使用 shell 类型直接调用编译器。

{
  "label": "build cpp",
  "type": "shell", // 任务类型：直接在终端运行命令
  "command": "g++", // 命令
  "args": ["-g", "main.cpp", "-o", "main"], // 参数
  "group": {
    "kind": "build",
    "isDefault": true
  }
}

2.3 核心概念解析

• type：决定任务的执行方式。
  • "npm", "gulp", "grunt" 等: 智能模式。VS Code 插件提供的特定类型，能自动识别配置文件并补全命令。
  • "shell": 通用模式。直接在终端执行你指定的 command。
• kind：任务的身份分类。
  • "build": 标记为构建任务 -> Cmd+Shift+B 快捷键专用。
  • "test": 标记为测试任务 -> 方便筛选。
• dependsOn：任务依赖链。
  • 逻辑类似 &&：先执行依赖任务，成功后才执行当前任务。

2.4 使用方式

1. 快捷键（推荐）：直接按 Cmd+Shift+B。
   • 因配置了 isDefault: true，会直接触发默认构建任务。
2. 命令面板：Cmd+Shift+P -> 输入 Run Task -> 选择任务。

3. launch.json：调试配置

作用：配置调试器，支持断点、变量查看等。

示例：调试 Node.js 应用，并在启动前先运行构建任务。

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node", // 调试环境 (常用：node, chrome, python等, 想调试什么语言，就装对应的插件，然后这里填对应的类型。)
      "request": "launch", // 核心模式仅两种：launch (启动新进程) / attach (附加到已有进程)
      "name": "Debug App",
      "program": "${workspaceFolder}/dist/index.js", // 调试构建后的文件
      "preLaunchTask": "npm: build", // 选填：调试前是否先运行构建任务（如无需构建可删除行）
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}

3.2 前端项目示例 (Vite/React/Vue)

对于 Vite 项目，不需要构建。你只需要启动开发服务器 (npm run dev)，然后让 VS Code 连接到浏览器。

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", // 调试浏览器
      "request": "launch",
      "name": "Debug Vite App",
      "url": "http://localhost:5173", // Vite 默认端口
      "webRoot": "${workspaceFolder}/src", // 源码目录
      "preLaunchTask": "npm: dev" // 选填：调试前是否先运行构建任务（如无需构建可删除此行）
    }
  ]
}

使用方式：

1. 打断点：在源码文件（如 src/index.js）的行号左侧点击，出现红点即为断点。
2. 启动调试：按 F5，或者点击左侧“运行和调试”图标 -> 选择 Debug App -> 点击绿色播放键。
3. 效果：VS Code 会先运行 npm: build，构建成功后自动启动调试器，程序运行到断点处会自动暂停，你可以查看变量状态。

总结

• settings.json：管环境（怎么看、怎么写）。
• tasks.json：管动作（怎么构建、怎么跑脚本）。
• launch.json：管运行（怎么调试）。

三者结合：launch.json 通过 preLaunchTask 调用 tasks.json，在符合 settings.json 定义的环境中高效开发。