VSCode 如何配置任务 runner 自动编译 TypeScript

最推荐直接使用 VSCode 内置的 TypeScript 任务检测功能，配合 tsc 的 watch 模式，适合日常开发中需要实时编译检查的场景。

先说结论：配置 tasks.json 调用 tsc 命令并开启监听，是让 VSCode 自动编译 TypeScript 的标准做法。

适合：需要在编辑器内实时看到编译错误或生成 JS 文件的开发场景
先准备：确保项目根目录已有 tsconfig.json 且已安装 TypeScript（建议本地安装）
验收：通过 Ctrl+Shift+B 触发任务后，观察终端输出和文件变化

命令速用版

如果你不想手动写配置，VSCode 通常能自动识别 TypeScript 项目。直接按下 Ctrl+Shift+B，如果弹出任务选择框，选择 tsc: watch - tsconfig.json 即可。

若需手动配置，核心是 .vscode/tasks.json 文件，关键配置片段如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: watch",
      "command": "tsc",
      "type": "shell",
      "args": ["-w"],
      "problemMatcher": "$tsc-watch",
      "group": "build"
    }
  ]
}

原理简述

VSCode 的任务系统（Tasks）允许你绑定外部命令。TypeScript 编译器 tsc 本身支持监听模式（watch mode），当文件保存时自动重新编译。VSCode 内置了问题匹配器（problem matcher）$tsc-watch，能解析 tsc 输出的错误信息并在编辑器中标记出来，这样你不用切换窗口就能知道编译是否成功。

分步处理

确认环境：在终端运行 tsc -v，确保已安装 TypeScript。如果没有，建议在项目内运行 npm install `--save-dev` typescript。
检查配置：确保项目根目录有 tsconfig.json。如果没有，运行 tsc `--init` 生成。
创建任务：在 VSCode 中点击菜单栏“终端”>“配置任务”，选择"tsc: watch - tsconfig.json"。VSCode 会自动生成 .vscode/tasks.json。
手动修正（可选）：如果自动生成的配置不生效，检查 tasks.json 中的 command 是否为 tsc，args 是否包含 -w，且 problemMatcher 设置为 $tsc-watch。

怎么验证是否生效

按下 Ctrl+Shift+B 启动任务后，查看 VSCode 底部的“终端”面板。如果看到终端显示 Watching for file changes... 且保持运行状态，说明监听已启动。尝试修改一个 .ts 文件并保存，观察终端是否有新的编译输出（如 TS6042: Found 0 errors. Watching for file changes.），同时检查输出目录是否生成了对应的 .js 文件。

常见坑

命令找不到：如果终端提示'tsc'不是内部命令，说明 TypeScript 未安装或环境变量未配置。若使用本地安装，确保在 VSCode 集成终端中运行，或改用 npm run 脚本调用。
问题匹配器失效：如果编译错误没有在下划线中标记，检查 problemMatcher 是否设置为 $tsc-watch（监听模式推荐）或 $tsc。
多个 tsconfig：如果项目有多个 tsconfig 文件，需要在 args 中指定 -p 参数指向具体配置文件路径，例如 ["-w", "-p", "./src/tsconfig.json"]。
版本冲突：避免全局安装 TypeScript，不同项目可能依赖不同版本。优先使用项目本地依赖（devDependencies）。

参考来源

Visual Studio Code 官方文档 - Tasks
Visual Studio Code 官方文档 - TypeScript in VS Code