如何在VS Code中配置构建或保存时自动执行多步任务？

一、配置构建任务（Command + Shift + B） #

修改项目根目录的.vscode/tasks.json，通过复合任务串联所有步骤，复用现有package.json脚本简化配置：

{
  "version": "2.0.0",
  "tasks": [
    // 1. TypeScript编译（或监听）任务
    {
      "label": "tsc: build",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": "build"
      // 若需持续监听文件变化，添加 "watch": true 并将problemMatcher改为"$tsc-watch"
    },
    // 2. Bun处理任务（调用package.json中的bun脚本）
    {
      "label": "bun: process",
      "type": "shell",
      "command": "bun run build", // 替换为你package.json中对应的bun命令
      "problemMatcher": [],
      "dependsOn": ["tsc: build"]
    },
    // 3. Node.js启动服务（调用package.json中的start脚本）
    {
      "label": "node: start",
      "type": "shell",
      "command": "npm run start", // 替换为你package.json中对应的node启动命令
      "problemMatcher": [],
      "dependsOn": ["bun: process"]
    },
    // 4. 启动浏览器（macOS Chrome示例，替换为你的浏览器和服务地址）
    {
      "label": "browser: open",
      "type": "shell",
      "command": "sleep 2 && open -a 'Google Chrome' http://localhost:3000",
      "problemMatcher": [],
      "dependsOn": ["node: start"],
      "runOptions": { "waitForExit": false } // 避免浏览器阻塞任务序列
    },
    // 复合任务：按顺序执行所有步骤，设为默认构建任务
    {
      "label": "Full Workflow",
      "dependsOn": ["tsc: build", "bun: process", "node: start", "browser: open"],
      "dependsOrder": "sequence",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

配置完成后，按下Command + Shift + B会自动执行完整流程。

二、配置保存时自动触发（Command + S） #

在.vscode/settings.json中添加保存触发任务的配置，仅在指定文件类型保存时执行：

{
  "tasks.runOnSave": {
    "enabled": true,
    "tasks": [
      {
        "task": "Full Workflow",
        "match": "**/*.{ts,tsx,js,jsx}", // 仅保存TS/JS文件时触发
        "runOptions": { "instanceLimit": 1 } // 避免重复触发任务
      }
    ]
  }
}

若你的VS Code版本不支持tasks.runOnSave，可替代为：

{
  "editor.codeActionsOnSave": {
    "source.fixAll": false
  },
  "files.autoSave": "afterDelay",
  "tasks.runOnSave.enabled": true
}

三、简化配置的技巧 #

• 复用package.json脚本：将Bun、Node的命令定义在package.json的scripts字段中，tasks.json直接调用，避免重复写命令。
• 任务依赖自动串联：用dependsOn和dependsOrder确保任务按顺序执行，无需手动拼接命令。
• 避免阻塞任务：浏览器任务添加"waitForExit": false，Node启动后无需等待浏览器关闭；添加sleep 2给服务启动留缓冲时间。
• TS监听模式：如果需要实时编译TS，将TS任务改为watch: true，保存时自动触发编译，无需手动执行。

内容的提问来源于stack exchange，提问作者1.21 gigawatts