VSCode怎么运行TypeScript VSCode自动编译运行TS代码
先说一个核心事实：VSCode本身并不运行TypeScript，更不会自动编译它。你在编辑器里看到的“没有报错”，仅仅是语言服务在后台做类型检查，真正的.js文件并不会凭空出现。要实现保存即编译的丝滑体验，必须手动配置tsc、tsconfig.json和tasks.json这三驾马车，缺一不可。
确认 tsc 命令在终端可用
这是所有后续操作的基础。VSCode自带TypeScript语言服务，但编译的核心工具tsc是独立的命令行程序，没安装就一切免谈。
- 推荐本地安装：执行
npm install --sa ve-dev typescript。这样做能避免全局版本与项目版本冲突，是更稳妥的选择。 - 验证安装：打开集成终端（
Ctrl+`），输入npx tsc -v。如果能看到类似5.4.5的版本号输出，才算成功。 - 注意版本陷阱：如果你只在全局安装了
tsc，而项目里用的是typescript@5.0，那么全局的旧版本（比如4.9）可能会静默忽略新版本才支持的配置项，例如moduleResolution: “bundler”。 - Windows用户注意：安装后建议重启一次VSCode，确保新的PATH环境变量生效。
tsconfig.json 必须存在且关键字段不能少
没有这个配置文件，tsc只会进行简单的单文件转换，根本不会读取任何编译选项。但有了它，如果写错或包含非法内容，同样会导致监听失败或文件输出到错误目录。
- 生成与修改：首先运行
npx tsc --init生成基础配置文件，然后务必手动修改两个核心字段： “outDir”: “./dist”：指定Ja vaScript文件的输出目录。如果路径不存在，tsc会自动创建。“rootDir”: “./src”：明确指定TypeScript源代码的根目录。这能防止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目录里依旧空空如也”的情况，问题通常不在配置逻辑，而在于路径或文件覆盖范围。
- 检查
outDir路径：确认tsconfig.json里的“outDir”路径是否正确。例如写成了“./build”却忘了创建该目录，或者仅仅是拼写错误。 - 确认
include范围：检查“include”字段是否覆盖了你的.ts文件。比如你的文件放在src/下，但配置里却没有“include”: [“src/**/*”]。 - 避免路径重叠：确保
“rootDir”和“outDir”的路径没有重叠。如果都设置成“./src”，tsc可能会把刚生成的.js文件当作源码再次编译，导致循环错误甚至进程卡死。
最可靠的验证方法是：关闭所有VSCode窗口，直接在系统终端里运行npx tsc --noEmitOnError --watch，观察报错信息是否清晰。有时候，编辑器的封装会掩盖真实的路径问题。
