VSCode中通过任务运行器编译TypeScript-VSCode-PHP中文网

vscode默认不编译typescript，因其仅提供语言服务（类型检查、跳转、补全），tsc编译需手动配置tasks.json或启用tsc --watch；核心是正确指定tsc路径、tsconfig.json位置及错误匹配器。

vscode中通过任务运行器编译typescript

VSCode Tasks 为什么默认不编译 TypeScript

VS Code 的 TypeScript 支持默认只做语言服务（类型检查、跳转、补全），tsc 编译本身不会在保存时自动触发。所谓“自动编译”其实是靠手动配置 tasks.json 或启用 tsc --watch 实现的，不是编辑器内置行为。

如何配置一个可用的 tsc 构建任务

核心是让 VS Code 知道该用哪个 tsc、读哪个 tsconfig.json、以及怎么解析错误。直接改 .vscode/tasks.json：

确保 "type": "shell"（或 "process"，Windows 上推荐 shell）
"command": "npx" 比直接写 "tsc" 更安全，避免全局 tsc 版本干扰
"args": ["tsc", "-p", "."] 明确指定当前目录的 tsconfig.json，不要省略 -p
"problemMatcher": "$tsc" 必须保留，否则错误不会出现在「问题」面板
加 "group": "build" 才能被识别为构建任务，支持 Ctrl+Shift+B 快捷键

示例片段：

typescript-dev

使用 Vite 8、React 19、Tailwind CSS v4、shadcn/ui、Biome、Vitest 和 Hono 构建全栈 TypeScript 应用，涵盖前端（Vite/Rolldown 构建 + 开发）...

下载

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

为什么运行任务后没报错但也没生成 JS 文件

常见原因不是配置错了，而是 tsconfig.json 里关掉了输出：

检查 "noEmit": true —— 这个值会让 tsc 只做类型检查，不生成任何文件
确认 "outDir" 路径存在且可写（比如 "outDir": "./dist"，但 ./dist 目录不存在也不会报错，只是静默失败）
"include" 或 "files" 没覆盖你的 .ts 文件，比如写成 "include": ["src/**/*"] 却把文件放在根目录
如果用了 "composite": true 或引用项目（references），单跑 tsc -p . 不会递归编译依赖项，得加 --build