VS Code Tasks 组合前后端命令的依赖关系

前后端项目经常有两个独立命令：前端需要在 client 目录构建，后端需要在 server 目录启动或编译。VS Code Tasks 可以把这两个命令登记成基础任务，再用一个组合任务统一触发。多个依赖任务默认并行；只有明确写出 "dependsOrder": "sequence" 时，才会按照 dependsOn 数组的顺序执行。

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

本文只讨论工作区任务的依赖关系、工作目录和结果确认。任务配置放在项目的 .vscode/tasks.json 中，前提是已经用 VS Code 打开了工作区文件夹。

最小可用结构是“两个基础任务 + 一个组合入口”：没有先后依赖时让它们并行，有先后依赖时给组合入口加上 sequence，并通过任务面板和终端状态确认是否完成。

先确定最终结果和依赖顺序

先把目标拆成三个标签：Client Build 只负责前端构建，Server Build 只负责后端构建，Build All 只负责组合前两个任务。组合入口不重复写业务命令，这样每个基础任务都能单独运行，失败时也容易知道是哪一侧出了问题。

如果前端和后端互不等待，Build All 的 dependsOn 可以直接列出两个标签，VS Code 默认并行执行它们。如果后端必须等前端产物生成，就把 dependsOrder 设为 sequence，并按“前端、后端”的顺序排列依赖。

这张原创界面说明图把组合入口和两个基础任务放在同一个工作区里，重点看任务标签与工作目录的对应关系；它是静态示意，不是真实截图。

在 tasks.json 中拆出前端与后端任务

在项目根目录创建 .vscode/tasks.json。下面的示例把命令类型、工作目录和组合关系分开写，JSON 本身保持严格格式；字段含义已经放在代码前后说明，不在 JSON 中插入无效注释。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Build",
      "type": "shell",
      "command": "npm run build",
      "options": {
        "cwd": "${workspaceFolder}/client"
      },
      "problemMatcher": []
    },
    {
      "label": "Server Build",
      "type": "shell",
      "command": "go build ./...",
      "options": {
        "cwd": "${workspaceFolder}/server"
      },
      "problemMatcher": []
    },
    {
      "label": "Build All",
      "dependsOn": [
        "Client Build",
        "Server Build"
      ]
    }
  ]
}

label 是依赖关系里真正使用的名字，大小写和空格都要保持一致；options.cwd 把每条命令放到对应子项目中执行；type 为 shell 时由系统 shell 解释命令。problemMatcher 这里写空数组，表示先不把输出绑定到 Problems 面板，实际项目可以换成与工具输出格式匹配的内置或自定义匹配器。

如果命令只在某个系统可用，可以为任务补充 windows、linux 或 osx 配置；不要为了跨平台把所有路径写死，优先使用 ${workspaceFolder} 这样的预定义变量。

用一个入口任务组合依赖

打开命令面板运行“Tasks: Run Task”，选择 Build All。它没有自己的 command，只负责找到 dependsOn 中列出的任务。默认并行适合前端打包和后端编译彼此独立的项目，两个终端可能同时出现，这是预期行为。

当后端要读取前端刚生成的静态文件时，把组合任务改成下面的形式。这里的中文注释放在 JavaScript 配置示例中，帮助读者记住顺序控制只属于组合任务。

{
  "label": "Build All",
  "dependsOrder": "sequence",
  "dependsOn": [
    "Client Build",
    "Server Build"
  ]
}

严格 JSON 不支持注释，所以要把两点记在配置旁边：数组顺序决定 sequence 模式下的先后；并行模式下数组只是依赖集合，不代表执行顺序。若依赖里包含持续运行的后台任务，顺序模式还需要能报告“已完成”的 problem matcher，否则 VS Code 无法判断什么时候可以继续。

# 先确认当前目录是打开的工作区，再从任务面板运行组合入口
code .
# 任务名称来自 tasks.json 的 label，不是文件名
# 在命令面板中执行：Tasks: Run Task -> Build All

从终端状态确认执行结果

运行组合任务后，先看任务面板是否显示了 Build All，再看前端和后端各自的终端分组。并行模式下两边可以同时输出；顺序模式下，后一个任务应在前一个任务结束后出现。验收时不要只看任务名称，至少确认命令退出、目标输出生成或编译器返回成功，并检查 Problems 面板有没有新问题。

下面这张原创结果说明图展示任务选择、两个终端分组和完成状态的静态对应关系，图中状态用于帮助理解验收位置，不代表某次真实运行结果。

常见失效点和恢复方式

找不到任务：确认打开的是项目文件夹而不是单个文件，并检查文件路径是否为 .vscode/tasks.json。多根工作区还要确认任务放在哪个根目录下。

依赖没有执行：逐字对照 dependsOn 与基础任务的 label，不要把脚本文件名、显示名称和标签混用。

顺序看起来不对：没有 dependsOrder 时，多个依赖默认并行；需要先后关系就明确写 sequence。如果前一个任务是 watch 或其他后台任务，还要配置能识别完成状态的 matcher。

命令在终端里失败：先单独运行 Client Build 或 Server Build，确认工作目录、运行时和脚本本身正常，再回到 Build All。这样可以把“依赖关系问题”和“基础命令问题”分开。

相关问题

多个 dependsOn 任务一定按顺序执行吗？不一定。默认并行，只有组合任务设置 "dependsOrder": "sequence" 才按数组顺序执行。

能不能只运行后端任务？可以，直接在 Tasks 面板选择对应的基础任务；组合入口只是为了把重复的调用方式收拢起来。

为什么后台任务会让 sequence 卡住？因为 VS Code 需要知道后台任务什么时候进入可继续的状态，通常要给它配置能识别完成信号的 problem matcher。