VS Code Tasks dependsOn 怎样串联构建步骤

如果你希望在 VS Code 里把“检查、构建、打包”固定成一条可重复执行的命令链，可以在工作区的 .vscode/tasks.json 中使用 dependsOn。需要注意的是，多个依赖默认会并行运行；只有显式写入 "dependsOrder": "sequence"，VS Code 才会按照依赖列表顺序串行执行。

官方地址：https://code.visualstudio.com/docs/debugtest/tasks

最小可靠写法是：每个动作单独定义并设置唯一的 label，入口任务只负责通过 dependsOn 组合它们；需要前一步完成后再开始下一步时，再加 dependsOrder: "sequence"。

• 独立动作：把检查、构建、打包分别写成任务，便于单独重跑。
• 统一入口：使用一个组合任务作为日常执行入口。
• 执行关系：多个依赖默认并行，顺序依赖必须显式声明。
• 结果确认：从任务名称、终端面板和退出状态确认链路是否完成。

先把每个构建动作写成独立任务

Tasks 依赖的匹配依据是任务的 label，不是代码块所在位置，也不是命令本身。因此先给每个动作起一个不会重复的名称。下面的例子把检查、构建和打包拆开，并用 options.cwd 让命令在对应目录执行。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "检查代码",
      "type": "shell",
      "command": "npm run lint",
      "options": {
        "cwd": "${workspaceFolder}/web"
      },
      "problemMatcher": ["$eslint-stylish"]
    },
    {
      "label": "构建前端",
      "type": "shell",
      "command": "npm run build",
      "options": {
        "cwd": "${workspaceFolder}/web"
      }
    },
    {
      "label": "打包产物",
      "type": "shell",
      "command": "npm run package",
      "options": {
        "cwd": "${workspaceFolder}"
      }
    }
  ]
}

这里的 type: "shell" 表示命令交给 shell 解释，problemMatcher 负责把检查输出关联到 Problems 面板。目录、脚本名称和匹配器要按项目实际情况替换；它们只是任务节点，不代表已经执行过。

用 dependsOn 创建一个统一入口

在已有任务中增加一个组合任务即可把多个动作收拢到一个入口。组合任务本身可以不写 command，它的职责是声明依赖关系。

{
  "label": "发布前准备",
  "dependsOn": [
    "检查代码",
    "构建前端",
    "打包产物"
  ],
  "group": {
    "kind": "build",
    "isDefault": true
  },
  "presentation": {
    "reveal": "always",
    "panel": "dedicated",
    "clear": true
  }
}

运行“发布前准备”时，VS Code 会根据列表找到对应的任务。此时不要把“列表顺序”理解成“执行顺序”：官方任务文档规定，多个依赖默认并行。若检查和构建互不依赖，并行可以缩短等待时间；若构建必须建立在检查成功之后，就需要下一节的串行配置。

用 dependsOrder: sequence 串行执行构建步骤

给组合任务加入 dependsOrder 后，依赖会按照 dependsOn 数组中的顺序执行。下面的入口任务要求先检查，再构建，最后打包。

{
  "label": "发布前准备",
  "dependsOrder": "sequence",
  "dependsOn": [
    "检查代码",
    "构建前端",
    "打包产物"
  ],
  "presentation": {
    "reveal": "always",
    "revealProblems": "onProblem",
    "panel": "dedicated",
    "clear": true
  }
}

这段配置只表达依赖关系，不会把任务变成一个新的 shell 命令。前一个任务返回失败时，后续链路不会按预期完成，因此排查时要先看最早失败的任务，而不是只看最后一个任务的状态。

如果你的目标是“检查”和“构建”同时开始，保留默认并行即可；如果目标是“检查通过后构建，再产出包”，使用 sequence。这两种写法不能只靠调整数组排列来互换。

从任务列表和终端确认结果

保存 tasks.json 后，从命令面板运行“Tasks: Run Task”，选择“发布前准备”。也可以把组合任务设为默认构建任务，再使用“Run Build Task”。确认时关注三个信号：任务名称是否是入口任务、终端中每个命令是否在正确目录执行、Problems 面板是否出现检查错误。

presentation.reveal 控制终端是否自动展开，revealProblems: "onProblem" 适合让面板只在发现问题时出现，panel: "dedicated" 则让同一任务重复运行时复用自己的终端。它们只影响可见性和终端组织，不改变依赖顺序。

常见配置错误与修正方式

为什么 dependsOn 写了顺序却仍然并行？

因为默认执行顺序是并行。检查组合任务是否写了 "dependsOrder": "sequence"，并确认它位于组合任务对象内，而不是写在 dependsOn 数组中。

依赖任务名称可以写命令名吗？

不能依赖命令名自动匹配。dependsOn 应引用任务的 label；如果修改了 label，也要同步修改所有引用它的组合任务。

为什么 watch 任务会让后续任务一直等待？

后台或 watch 任务需要通过 problemMatcher 告诉 VS Code 何时进入和离开活动状态。若没有完成信号，串行依赖会认为前一步仍在运行，后续任务自然不会开始。

怎样选择并行还是串行？

互不依赖的检查可以并行；需要消费前一步产物或以前一步成功为前提的动作应串行。最终以任务之间的真实数据依赖做决定，不要只按团队习惯设置。

总结一下：用唯一 label 拆出任务节点，用 dependsOn 组成入口；默认并行，要求严格先后时加 dependsOrder: "sequence"；最后通过任务终端、Problems 面板和工作目录确认链路结果。