下面这份模板适合前端或 Node 项目。它包含 dev、build、test、lint 四类任务, 并把 build 设成默认构建任务。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev:web",
      "type": "npm",
      "script": "dev",
      "isBackground": true,
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "group": "dev"
      }
    },
    {
      "label": "build:web",
      "type": "npm",
      "script": "build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": "$tsc"
    },
    {
      "label": "test:unit",
      "type": "npm",
      "script": "test",
      "group": "test",
      "problemMatcher": []
    },
    {
      "label": "lint",
      "type": "npm",
      "script": "lint",
      "problemMatcher": "$eslint-stylish"
    }
  ]
}

如果 task 只是帮你运行命令,它只是一个快捷方式。 一旦加上 problemMatcher,VSCode 就能把输出解析成 Problems 面板里的诊断信息: 文件、行号、列号、错误级别、消息都能被点击跳转。

自定义 matcher 示例

{
  "label": "check:custom",
  "type": "shell",
  "command": "node scripts/check.js",
  "problemMatcher": {
    "owner": "custom-check",
    "fileLocation": ["relative", "${workspaceFolder}"],
    "pattern": {
      "regexp": "^(.*):(\\d+):(\\d+):\\s+(error|warning):\\s+(.*)$",
      "file": 1,
      "line": 2,
      "column": 3,
      "severity": 4,
      "message": 5
    }
  }
}

本地 CI 示例

{
  "label": "precheck",
  "dependsOn": [
    "lint",
    "test:unit",
    "build:web"
  ],
  "dependsOrder": "sequence",
  "problemMatcher": []
}

Task 不只是从命令面板里手动运行。它还可以成为 Debug 的前置动作。 比如调试前先启动 dev server、先编译 TypeScript、先生成代码。

// .vscode/tasks.json
{
  "label": "dev:web",
  "type": "npm",
  "script": "dev",
  "isBackground": true,
  "problemMatcher": {
    "owner": "vite",
    "pattern": {
      "regexp": "^(.*):(\\d+):(\\d+):\\s+(.*)$",
      "file": 1,
      "line": 2,
      "column": 3,
      "message": 4
    },
    "background": {
      "activeOnStart": true,
      "beginsPattern": "Local:",
      "endsPattern": "ready in"
    }
  }
}

// .vscode/launch.json
{
  "type": "chrome",
  "request": "launch",
  "name": "Debug Web",
  "url": "http://localhost:5173",
  "webRoot": "${workspaceFolder}/src",
  "preLaunchTask": "dev:web"
}

Lab 1 — 把手敲命令写进 tasks.json

目标:把 Day09 的临时命令升级为可复用任务。

1. 在练习项目中创建 .vscode/tasks.json
2. 加入 dev:web、build:web、test:unit 三个任务
3. 执行 Tasks: Run Task,选择 build:web
4. 给 build:web 加上 build group,并设为 default
5. 按 ⌘⇧B(Win: Ctrl Shift B)确认默认构建任务能直接运行

Lab 2 — 让错误进入 Problems 面板

目标:理解 problemMatcher 如何把终端输出变成可点击错误。

1. 在 TypeScript 项目中故意写一个类型错误
2. 创建任务 typecheck:运行 tsc --noEmit
3. 给它加 problemMatcher: "$tsc"
4. 运行任务后打开 Problems 面板 ⌘⇧M(Win: Ctrl Shift M)
5. 点击错误,确认能跳到对应文件和行号

Lab 3 — 组合一个本地 precheck

目标:把 lint、test、build 编排成一个本地 CI。

{
  "label": "precheck",
  "dependsOn": ["lint", "test:unit", "build:web"],
  "dependsOrder": "sequence",
  "problemMatcher": []
}

1. 确保 lint、test:unit、build:web 都能单独运行
2. 加入上面的 precheck 任务
3. 运行 precheck,观察三个任务是否按顺序执行
4. 故意让 lint 失败,确认后续任务不会继续浪费时间
5. 修复后重新运行,把它作为提交前的本地检查

1. label、type、command、args、options.cwd 分别控制什么?
2. type: npm、type: shell、type: process 适合什么场景?
3. 为什么说 problemMatcher 是 task 系统的灵魂?
4. dependsOn 和 dependsOrder 如何组合成本地 CI?
5. background task 作为 preLaunchTask 时,为什么需要 ready 条件?