webstorm保存ts文件不生成js,主因是typescript编译器路径未指向本地node_modules/typescript,或file watcher未按tsconfig.json配置执行;需手动指定tsc.js路径并选用“tsconfig.json”类型watcher,同时确保outdir非源目录、working directory设为项目根目录。

WebStorm 保存 TypeScript 文件后不生成 .js,基本不是编译器坏了,而是两个地方没对齐:TypeScript 编译器路径没指向本地 node_modules/typescript,或者 File Watcher 没按 tsconfig.json 的规则执行编译。
确认 TypeScript 编译器路径是否正确
WebStorm 默认不认全局安装的 tsc(哪怕终端里 tsc -v 能跑)。它只信任项目本地的 typescript 包。
- 先在项目根目录运行
npm install typescript --save-dev,确保node_modules/typescript/lib/tsc.js存在 - 打开
Settings/Preferences → Languages & Frameworks → TypeScript - 在
TypeScript version下拉菜单中,手动选中Project preferences → node_modules/typescript/lib/tsc.js - 如果下拉列表为空,点右侧刷新按钮;还不行就去终端执行
ls node_modules/typescript/lib/tsc.js看路径和权限
用 tsconfig.json 驱动 File Watcher(别选“TypeScript”类型)
File Watcher 里选 “TypeScript” 是旧版配置方式,现在推荐选 “tsconfig.json”,这样它才会真正读你的 tsconfig.json 配置,而不是硬编码参数。
- 进入
Settings → Tools → File Watchers,点+→ 选tsconfig.json -
Working directory必须设为项目根目录(即tsconfig.json所在路径),否则tsc找不到配置 -
Arguments建议填:--project $ProjectFileDir$/tsconfig.json --noEmit false --skipLibCheck true - 勾选
Auto-save edited files to trigger the watcher和Trigger the watcher on external changes
避免 “Cannot write file because it would overwrite input file” 错误
这个报错几乎全是路径冲突导致的:源文件和输出文件被写到了同一个目录下。
- 检查
tsconfig.json是否有"outDir": "./dist"(不能是"."或"./src") -
outDir目录不能嵌套在src下(比如"./src/dist"),否则 File Watcher 可能循环触发 - 在 File Watcher 的
Output paths to refresh中必须填具体路径,例如:$ProjectFileDir$/dist/$FileNameWithoutExtension$.js - 如果用了
"composite": true,建议同时加"incremental": true,否则每次保存都全量编译很慢
Vue / React 项目里 TS 提示不准?别只调 File Watcher
这时候问题往往不在编译,而在类型服务没加载对。WebStorm 的 TS 语言服务和编译是两套逻辑。
- 确保已启用官方
Vue.js插件(Settings → Plugins),并重启 IDE -
tsconfig.json的compilerOptions.types至少包含["vue", "node"](Vue 项目)或["react", "react-dom"](React 项目) - 如果用
<script setup lang="ts"></script>,确认node_modules/@types/vue存在;没有就补装npm install -D @types/vue - 别依赖 File Watcher 来“修复跳转”,先点状态栏的
TypeScript小部件看有没有报错,再检查tsconfig.json是否被正确识别
最常被忽略的是:File Watcher 配置完不生效,第一反应是重装插件或换版本,其实 90% 是 Working directory 设错了,或者 Output paths to refresh 留空了——WebStorm 根本不知道该刷新哪几个文件,自然看不到 .js 出来。











