vscode本身不自动编译typescript,需安装tsc(推荐项目级npm install --save-dev typescript)、配置有效tsconfig.json(含outdir、rootdir、sourcemap等)并用tasks.json设置isbackground:true的tsc --watch任务才能实现保存即编译和调试。

VSCode 本身不自动编译 TypeScript,也不会自动生成 .js 或 .js.map 文件——你看到的“保存没反应”“F5 报错 Cannot launch program because corresponding JavaScript cannot be found”“断点打在 .ts 上却跳到 .js 里”,全是因为编译链断在了最前端:没装 tsc、tsconfig.json 无效、或 tasks.json 没真正挂起监听任务。
确认 tsc 可用且版本 ≥ 5.0
VSCode 不自带 tsc 二进制,它只调用你本地装的编译器。终端里 tsc --version 报错,或输出 4.9.5 这类低于 5.0 的版本,后续 sourceMap 映射、路径解析、satisfies 检查都会异常。
- 项目级安装最稳:
npm install --save-dev typescript,然后用npx tsc --version验证(如输出5.4.5) - 别信“全局装一次就行”:全局安装容易和多项目版本冲突,Windows 用户还常因 PATH 没刷新导致命令找不到——关掉 VSCode 再重开一次
- 告诉 VSCode 用项目里的 TS:在工作区设置(
.vscode/settings.json)中加"typescript.tsdk": "./node_modules/typescript/lib",改完后必须手动执行Ctrl+Shift+P → TypeScript: Restart TS server
tsconfig.json 必须有效,空文件或带注释就失效
tsc 解析器不认 JSON 注释。一个只有 {} 或含 // 行的 tsconfig.json,会让 tsc 降级为单文件编译,直接忽略 outDir、include、sourceMap 等所有配置——结果就是 .js 根本不生成,调试断点全失效。
- 在项目根目录运行
npx tsc --init生成基础配置,然后手动删掉所有以//开头的行 -
"outDir": "./dist"和"rootDir": "./src"必须显式设置,且路径不能重叠(比如都设成"./",否则tsc可能把dist里的.js当源码二次编译) -
"sourceMap": true是调试前提,但必须配对"inlineSourceMap": false;只开一个,launch.json里断点照样跳不到原始.ts行 -
"include": ["src/**/*"]要加引号、用正斜杠;写成src\**\*或漏引号,源码文件就不参与编译 -
"noEmit": true是隐形杀手:它让tsc --watch只做类型检查,完全不输出.js——VSCode 看着一切正常,F5 却直接报错
用 tasks.json 启用真正的保存即编译
VSCode 默认不监听文件变化。Ctrl+Shift+B 手动触发太慢,tsc --watch 必须作为后台任务跑起来,才能实现“保存 → 编译 → 生成 .js + .js.map”。而这个任务必须通过 .vscode/tasks.json 正确声明,否则它启动即退出。
- 按
Ctrl+Shift+P → Tasks: Configure Task → Create tasks.json from template → Others - 填入结构,重点核对:
"isBackground": true(缺了它任务秒退)、"problemMatcher": "$tsc-watch"(缺了它错误不标红、F8 跳不了) - 完整示例(注意
args里是--watch,不是-w):
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: watch",
"type": "shell",
"command": "npx tsc",
"args": ["--watch"],
"isBackground": true,
"problemMatcher": "$tsc-watch"
}
]
}
- 配置完按
Ctrl+Shift+B → tsc: watch,终端应显示Found 0 errors. Watching for file changes. - 别依赖右键菜单里的“编译”选项——VSCode 默认没绑定这个动作,它只是个空壳
调试前必须验证 sourceMap 是否真实生效
断点打在 .ts 上却跳到 .js 里,或者压根不命中,90% 是因为 sourceMap 没真正生成或映射失败。光在 tsconfig.json 里写 "sourceMap": true 不够,还要看 .js.map 文件是否出现在 outDir 对应路径下,以及 launch.json 是否正确指向。
- 先手动运行
npx tsc,检查dist/(或你设的outDir)下是否有同名.js和.js.map文件 -
launch.json中"program"必须指向生成的.js(如"${workspaceFolder}/dist/index.js"),不是原始.ts - 确保
"sourceMaps": true和"outFiles"(如["${workspaceFolder}/dist/**/*.js"])都存在,否则 Debugger 找不到映射关系 - 如果用了
ts-node+nodemon组合,launch.json里"runtimeExecutable"要设为"node_modules/.bin/ts-node"(Windows 下加.cmd后缀),且必须传--project tsconfig.json参数,否则它会忽略你的配置
最常被忽略的一点:哪怕所有配置都对,只要 tsconfig.json 里 "rootDir" 指向错误(比如实际代码在 src/ 却写了 "./"),tsc 就可能把 node_modules 或 dist 当源码扫进去,导致编译卡死、.js.map 路径错乱、Debugger 完全失联。











