VSCode任务系统可一键触发构建、编译、测试等命令，本质是封装调用外部工具（如tsc、npm）并集成输出到终端或问题面板；支持通过tasks.json自定义或自动识别package.json脚本，还可与launch.json联动实现调试前自动构建。
VSCode 的任务（Tasks）系统能帮你把重复的构建、编译、测试等命令一键触发，不用再切终端敲命令，也不用记一堆参数。
什么是任务（Task）？
任务就是 VSCode 里封装好的可执行操作，本质是调用外部工具（比如 tsc、npm、python、make），并把输出结果集成到编辑器的“终端”或“问题面板”中。它不替代构建工具本身，而是让构建流程更顺手、更可视化。
快速创建一个自定义任务
按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Tasks: Configure Task → 选 Create tasks.json file from template → 选 Others（通用模板）。
编辑生成的 .vscode/tasks.json，例如运行 TypeScript 编译：
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: build",
"type": "shell",
"command": "tsc",
"args": ["--build"],
"group": "build",
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": false
},
"problemMatcher": ["$tsc"]
}
]
}
- label 是你在命令面板或右键菜单里看到的名字
- group 设为 build 或 test 后，可用 Ctrl+Shift+B 快速运行默认构建任务
- problemMatcher 能解析编译错误，直接跳转到出错行（$tsc 对应 TypeScript，默认已内置）
关联 package.json 脚本（推荐方式）
如果你项目有 package.json，VSCode 可自动识别 scripts 字段里的脚本，无需手动写 tasks.json。
- 确保 package.json 中有类似：
"scripts": { "test": "jest", "build": "rollup -c" } - 按 Ctrl+Shift+P → 输入 Tasks: Run Task → 会列出所有 npm script，选一个即可运行
- VSCode 会自动配置 problemMatcher（如 Jest 错误、ESLint 报告）和输出面板行为
调试时自动构建 + 启动
结合 launch.json，可实现“保存即构建，F5 即调试”：
- 在 .vscode/launch.json 的 launch 配置中加：
"preLaunchTask": "tsc: build"（值必须和 tasks.json 中 label 一致） - 这样每次按 F5 调试前，VSCode 会先执行该任务；若任务失败（返回非零码），调试不会启动
- 也可设
"isBackground": true和"problemMatcher"让任务持续监听文件变化（如 tsc --watch）
