WebStorm 实现保存时自动编译 TypeScript 文件依赖 File Watchers 插件绑定 tsc 命令，而非内置 TypeScript Service 或自动运行 tsc --watch；需正确配置 outDir、Output paths to refresh 及触发条件，否则易因路径冲突导致编译失败或无输出。
保存时自动编译 TypeScript 文件，靠的是 tsc --watch 还是 WebStorm 内置功能？
WebStorm 本身不直接调用 tsc 编译，它默认用的是自己的 TypeScript Service（基于 TS Server），但「保存即编译」这个动作，必须手动启用编译器监听，否则改完文件、保存、再切到浏览器——看到的还是旧 JS。
- WebStorm 的
File Watchers插件可以绑定tsc命令，实现保存即触发编译，这是最可控的方式 - 内置的
TypeScript Compiler设置（Settings → Languages & Frameworks → TypeScript）只控制类型检查和语言服务，不负责生成 .js 文件 - 如果项目里已有
tsconfig.json，tsc --watch能工作，但 WebStorm 不会自动帮你跑起来——它不是终端，不会持久维持进程
怎么配 File Watcher 让保存就出 .js？
核心是让 WebStorm 在你保存 .ts 文件时，自动执行一次 tsc 单文件编译（或增量编译），而不是等你手动敲命令。
- 打开
Settings → Tools → File Watchers，点+→tsconfig.json - 确保
Working directory设为项目根目录（即有tsconfig.json的地方），否则tsc找不到配置 -
Arguments建议填--project $ProjectFileDir$/tsconfig.json --noEmit false --skipLibCheck true，避免因skipLibCheck缺失导致报错中断 - 勾选
Auto-save edited files to trigger the watcher和Trigger the watcher on external changes，不然改了tsconfig.json或其他依赖文件时不会响应 - 如果不希望每次保存都全量编译，可在
tsconfig.json中设"incremental": true并加"composite": true（仅限多项目引用场景）
为什么改了 TS 保存后没生成 JS，或者报 Cannot write file ... because it would overwrite input file？
这是 File Watcher 配置里最常踩的坑：输入输出路径打架。TypeScript 默认把 .ts 当输入，但如果 outDir 没设或设成了 .，tsc 就试图把编译结果写回原目录，和源文件同名同路径，直接冲突。
- 检查
tsconfig.json是否有"outDir": "./dist"或类似配置；没有就加上，且确保该目录不在src或src/ts下面（否则 Watcher 可能二次触发） - 在 File Watcher 的
Output paths to refresh里填$ProjectFileDir$/dist/$FileNameWithoutExtension$.js，别留空，否则 WebStorm 不知道该刷新哪几个文件 - 如果用了
"composite": true，务必确认每个子项目的tsconfig.json里outDir是独立路径，否则多个tsc实例会抢写同一目录 - 遇到
error TS5055: Cannot write file，八成是outDir和rootDir没对齐，或include把dist目录也扫进去了
用 tsc --watch 终端命令行，比 File Watcher 更稳吗？
更稳，但得自己管进程。WebStorm 的 File Watcher 本质是起一个短命的 tsc 子进程，而 tsc --watch 是长连接，对增量编译更敏感，尤其在大型项目里。
- 在终端跑
npx tsc --watch后，WebStorm 的编辑器仍能正常跳转、提示，不影响开发流 - 但 WebStorm 不会感知这个进程——你关掉终端，编译就停了；切到别的 IDE，就得重新起
- 如果项目用了
ts-node或vite，它们自带 TS 编译逻辑，此时再配 File Watcher 容易重复编译，JS 文件被写两遍，甚至出现时序错乱 - 真正要“保存即生效”，推荐组合：用
tsc --watch做底层编译 + WebStorm 关闭所有 File Watcher，只保留语言服务。这样既轻量，又避免配置打架
复杂点在于，tsc --watch 不处理 .d.ts 发布或 declarationMap 生成，这些得靠完整构建脚本。日常开发盯住 outDir 和 rootDir 对齐，基本就不会卡在“保存了但没反应”这一步。
