webstorm 支持 vue 项目 typescript 类型检查需同时满足三个条件：启用 vue.js 插件、script 标签显式声明 lang="ts"、tsconfig.json 正确配置 types 和 include；否则 definecomponent 报红、ref 推导失效、类型提示退化为 js 行为。
WebStorm 本身不“支持 Vue 脚手架混编”，它只负责识别和协同——关键在项目结构、tsconfig.json 和插件三者对齐，否则 defineComponent 报红、ref 推导失效、<script lang="ts"></script> 当 JS 解析都是常态。
Vue 插件必须启用，且 lang="ts" 不可省略
WebStorm 默认把 .vue 文件里的 <script></script> 当作 JavaScript 处理，哪怕你装了 TypeScript。只有两个条件同时满足，它才启用 TS 类型检查：
- Settings → Plugins 中已启用 Vue.js 插件（2024.2+ 版本需手动开，不是“已安装”就自动生效）
-
<script></script>标签显式声明lang="ts"，写成<script lang="ts"></script>；写成<script setup lang="ts"></script>同样有效 - 若用
defineComponent，确保@vue/runtime-core已安装（npm install -D @vue/runtime-core），否则类型无法推导到 props 和 emits
tsconfig.json 必须存在，且 "types" 字段要含 "vue"
没有 tsconfig.json，WebStorm 的跳转、自动导入、错误提示全部退化为 JS 行为；有但配置错，import.meta.env 标红、ref 返回 any 都会高频出现。
- 运行
tsc --init在项目根目录生成基础配置 -
compilerOptions至少包含："jsx": "preserve"、"moduleResolution": "node"、"strict": true、"types": ["node", "vue"] -
include必须覆盖src/**/*，不能漏掉src/components或src/views - 若用 Vite，建议加
"types": ["node", "vue", "vite/client"]，否则import.meta.env和__dirname会标红
不要配 File Watcher 自动编译，改用 tsc --watch 或构建工具
File Watcher 配 tsc 是 WebStorm 早期的妥协方案，现在和 Vite/Webpack 冲突概率极高：保存后没生成 JS、报 Cannot write file because it would overwrite input file、热更新卡住都是典型症状。
- 删掉 Settings → Tools → File Watchers 里所有
tsc相关 watcher - 终端执行
npx tsc --watch（确保本地装了typescript --save-dev） - 开发时直接用
npm run dev（Vite）或npm run serve（Vue CLI），它们自带 TS 类型检查和增量编译，WebStorm 只需专注编辑体验 - 如需 IDE 内实时类型反馈，确认 Settings → Languages & Frameworks → TypeScript 中启用了
Use TypeScript Service
本地 tsc 路径必须指向 node_modules/typescript/lib/tsc.js
WebStorm 不读全局 tsc，哪怕 tsc -v 在终端能跑通，IDE 里仍报 Cannot find TypeScript compiler。
- 执行
npm install typescript --save-dev，确认node_modules/typescript/lib/tsc.js存在 - Settings → Languages & Frameworks → TypeScript → TypeScript version 下拉菜单中，手动选
Project preferences → node_modules/typescript/lib/tsc.js - 如果下拉列表为空，先点右侧刷新按钮；还不行，进终端执行
ls node_modules/typescript/lib/tsc.js确认路径和权限 - 绝对不要选
Bundled或留空——那只是语法高亮，不触发类型服务
真正容易被忽略的是：Vue 单文件的类型能力不是靠“WebStorm 设置”打开的，而是靠 lang="ts" + tsconfig.json + Vue.js 插件 三者联动生效。少一个，defineAsyncComponent 就不会推导组件类型，useRouter 的返回值就是 any。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
