VS Code 调试前置任务怎样用 dependsOn 启动

VS Code 调试前置任务应分两层配置：在 launch.json 用 preLaunchTask 指向一个任务 label，再在 tasks.json 的这个任务上用 dependsOn 列出依赖。需要按列表顺序执行时，设置 dependsOrder 为 sequence。dependsOn 不应直接写到某个普通调试配置中充当前置任务列表。

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

下面用一个 Node.js 小项目演示：按 F5 前先检查入口文件语法，再显示准备提示，最后启动调试。示例不依赖 npm 包，也不启动常驻开发服务器。需要安装 Node.js，并确保 VS Code 使用的环境能找到 node；使用桌面版 VS Code 打开完整文件夹。

步骤1：在工作区建立可调试的演示文件

选择 File → Open Folder…（文件 → 打开文件夹），打开自己的演示目录；随后在左侧 Explorer（资源管理器）点击 New File（新建文件），创建 app.js，写入以下内容并保存。再用 New Folder 创建 .vscode 文件夹。使用中文语言包时菜单显示可能不同，英文命令名可帮助定位。

// 把断点放在 console.log 这一行，方便确认已进入调试器。
const message = "debug session entered";
console.log(message);

这一步完成后，资源管理器应显示根目录的 app.js 和 .vscode 文件夹，编辑器标签页没有未保存标记。暂时不需要项目构建脚本。下面的全部界面图片均为原创操作说明图，按钮位置和配色用于解释操作，不是软件截图。

步骤2：在 tasks.json 定义依赖任务

在 Explorer 中选中 .vscode，点击 New File，输入 tasks.json。把下面的 JSONC 配置保存进去。VS Code 的任务配置允许这种注释写法；它不是需要去掉注释的严格 JSON 示例。

{
  "version": "2.0.0",
  "tasks": [
    {
      // 只检查语法，不执行入口文件。
      "label": "demo:syntax",
      "type": "process",
      "command": "node",
      "args": ["--check", "${workspaceFolder}/app.js"],
      "problemMatcher": []
    },
    {
      // 有限任务会自行退出；用于观察依赖启动后的提示。
      "label": "demo:ready",
      "type": "process",
      "command": "node",
      "args": ["-e", "console.log('preflight ready')"],
      "problemMatcher": []
    },
    {
      // 调试只引用此聚合入口，依赖顺序在这里声明。
      "label": "demo:prepare",
      "dependsOn": ["demo:syntax", "demo:ready"],
      "dependsOrder": "sequence",
      "problemMatcher": []
    }
  ]
}

demo:syntax 和 demo:ready 是两个具体任务，demo:prepare 是没有自己命令的聚合任务。process 类型将 node 与参数分开传递，避免把整个命令串交给 shell 解析。sequence 表示依赖按列表顺序执行；没有这个设置时，多个依赖默认并行，数组排列不能替代顺序设置。

打开 View → Command Palette…（查看 → 命令面板），搜索 Tasks: Run Task，选择 demo:prepare。正常情况下语法检查结束后出现 preflight ready，任务随后退出；单独运行此任务不会启动调试会话。若找不到任务，先核对文件位置和 label；若提示 node 不存在，先修复该运行环境的 PATH。

步骤3：在 launch.json 绑定聚合任务

继续在 Explorer 的 .vscode 下新建 launch.json，写入下面配置并保存。这里直接创建配置文件，避免不同项目自动生成的调试模板差异。preLaunchTask 的值应与聚合任务 label 完全一致，包括冒号和大小写。

{
  "version": "0.2.0",
  "configurations": [
    {
      // 此名称出现在“运行和调试”的配置列表中。
      "name": "Demo: debug app",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "cwd": "${workspaceFolder}",
      // 名称必须匹配 tasks.json 中的任务 label。
      "preLaunchTask": "demo:prepare",
      "console": "internalConsole"
    }
  ]
}

打开 View → Run（查看 → 运行），或点击活动栏的 Run and Debug（运行和调试）图标。顶部配置下拉框应出现 Demo: debug app。选择它后，调试入口才会使用这份 preLaunchTask；随意点击另一个“运行文件”入口，不一定经过同一配置。

步骤4：从运行和调试入口启动并确认状态

先在 app.js 的 console.log 行左侧单击行号边缘，放置断点。保持运行配置为 Demo: debug app，点击配置旁的绿色 Start Debugging 按钮，或按 F5。前置任务完成后，调试器才启动；在这个最小项目中，执行应停在断点行，可看到暂停位置和调试工具栏。

停在断点比“看到了准备提示”更能说明调试器已进入目标程序。继续执行后，Debug Console（调试控制台）应出现 debug session entered，程序随后结束。任务提示与程序输出可能出现在不同面板，不必强求在一个输出窗口里看到全部信息。

如果前置任务失败，先修复任务错误，再重新启动调试；不要在错误提示中直接选择忽略并继续，否则可能调试旧产物。日常项目可把语法检查替换成已有的检查或构建任务，但应保留这个“调试入口引用聚合任务、聚合任务编排依赖”的关系。

常见问题

为什么前置任务一直不结束，调试也没开始？

检查依赖是否是长期运行的 watch 或开发服务器。普通有限任务以进程退出表示结束；后台任务需要正确的 background problem matcher 表达就绪，单独加 isBackground 并不能代替就绪判断。本例使用会退出的任务，先把基本关系配置正确，再接入常驻服务。

为什么两个依赖还是一起启动？

确认 dependsOrder: sequence 写在实际被引用的聚合任务上。写到另一个同名相似任务或 launch 配置里，不会改变此聚合任务的依赖顺序。

多根工作区找不到任务怎么办？

先确认 launch.json 与 tasks.json 所属文件夹，避免跨文件夹的同名 label 引用不明确。本例按单文件夹工作区编写，迁移到多根工作区时，应根据任务所在文件夹和 VS Code 实际提示选择正确任务。

最终可见状态应是：任务列表有 demo:prepare，调试配置有 Demo: debug app，启动该配置后先完成准备任务，再进入 app.js 的断点。完成这个闭环后，就可以把同一编排方式用于真实项目的构建与调试。

参考：VS Code Tasks 官方文档、调试配置官方文档。