VSCode不自动编译TypeScript,必须安装本地tsc、配置含outDir和rootDir的tsconfig.json,并通过tasks.json设置isBackground:true的tsc --watch任务才能实现保存自动编译。

VSCode 本身不运行 TypeScript,也不自动编译它——你看到的“没报错”只是编辑器在做类型检查,.js 文件根本不会凭空生成。必须手动配 tsc、tsconfig.json 和 tasks.json,缺一不可。
确认 tsc 命令在终端可用
这是所有后续步骤的前提。VSCode 自带 TS 语言服务,但 tsc 是独立命令行工具,不装就编译不了。
- 推荐本地安装:
npm install --save-dev typescript(避免全局版本和项目版本冲突) - 装完后在集成终端(
Ctrl+`)执行:npx tsc -v,能看到类似5.4.5的输出才算成功 - 如果只装了全局
tsc,但项目里typescript@5.0,而全局是4.9,某些新配置项(如moduleResolution: "bundler")会被静默忽略 - Windows 用户装完建议重启 VSCode,确保 PATH 刷新生效
tsconfig.json 必须存在且关键字段不能少
没有它,tsc 只会单文件转换,不读任何配置;有但写错或含注释,会导致监听失败或输出到错目录。
使用 Vite 8、React 19、Tailwind CSS v4、shadcn/ui、Biome、Vitest 和 Hono 构建全栈 TypeScript 应用,涵盖前端(Vite/Rolldown 构建 + 开发)...
- 运行
npx tsc --init生成基础文件,然后手动改两处核心: -
"outDir": "./dist":JS 输出目录,路径不存在会自动创建 -
"rootDir": "./src":明确源码起始位置,否则tsc可能误扫node_modules或配置文件 - 删掉所有以
//开头的行——JSON 不支持注释,tsc遇到直接退出并报错 - 常见陷阱:
"noEmit": true是默认关闭的,但如果手抖开了,tsc就完全不输出 JS,还假装编译成功
用 tasks.json 绑定 Ctrl+Shift+B 启动监听
手动敲 npx tsc --watch 太原始;VSCode 的任务系统能后台持续监听,但必须配对 isBackground 和 problemMatcher 才能真正“自动”。
- 按
Ctrl+Shift+P→ 输入 “Tasks: Configure Task” → 选 “Create tasks.json from template” → “Others” - 替换内容为以下结构,重点核对
command、args和isBackground:
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: watch",
"type": "shell",
"command": "npx tsc",
"args": ["--watch"],
"group": "build",
"isBackground": true,
"problemMatcher": ["$tsc-watch"]
}
]
}
-
isBackground: true缺了它,任务执行完就退出,无法监听文件变化 -
problemMatcher: ["$tsc-watch"]决定错误能不能标红、能不能 F8 跳转;没它,报错只堆在终端里,编辑器无感知 - 配完后按
Ctrl+Shift+B→ 选 “tsc: watch”,终端应输出Found 0 errors. Watching for file changes.
保存后没生成 .js?先查这三处
现象是“文件改了、保存了、终端也显示 File change detected,但 dist 里还是空的”,大概率不是配置逻辑问题,而是路径或覆盖范围出错。
-
tsconfig.json里"outDir"路径写错(比如写成"./build"却忘了建对应目录,或拼错字母) -
"include"没覆盖你的.ts文件(例如你把文件放在src/下,但tsconfig.json没写"include": ["src/**/*"]) -
"rootDir"和"outDir"路径重叠(比如都设成"./src"),tsc会把刚生成的.js当源码再编译一次,导致循环错误甚至卡死
最稳的验证方式:关掉所有 VSCode 窗口,在终端里直接跑 npx tsc --noEmitOnError --watch,看报错是否清晰——编辑器封装有时会掩盖真实路径问题。

















