必须安装volar插件并禁用webstorm自带vue.js插件，配置正确tsconfig.json（含"types": ["vue"]和完整include路径），重启ide后才能支持definecomponent类型推断、script setup智能提示及模板变量跳转。

WebStorm 开箱即用 Vue 3 项目，但默认不启用关键语言支持——defineComponent 无类型推断、<script setup></script> 里 ref 不提示、模板中 v-model 绑定变量标红，本质是没配 Volar。

必须装 Volar，禁用自带 Vue.js 插件

WebStorm 自带的 “Vue.js” 插件只支持 Options API 和基础高亮，对 <script setup lang="ts"></script> 完全无效。Volar 才是 Vue 3 SFC 的官方语言服务提供者。

• 打开 Settings/Preferences → Plugins，搜索并安装 Volar（不是 Vetur，那是 Vue 2 的）
• 在已安装插件列表中，找到并 禁用 WebStorm 自带的 Vue.js 插件（它和 Volar 冲突，会导致类型丢失）
• 重启 WebStorm——这步不能跳，Volar 需要完整重载语言服务才能接管 .vue 文件
• 验证：打开任意 .vue 文件，在 <script setup lang="ts"></script> 中写 const count = ref(0)，按 Ctrl+Click（Win）或 Cmd+Click（Mac）能跳转到 ref 类型定义，说明生效

tsconfig.json 必须被 WebStorm 正确识别

WebStorm 不会自动把 tsconfig.json 当作整个项目的类型根。尤其用 Vite 创建的项目，常有多个配置文件（tsconfig.json、tsconfig.app.json、tsconfig.node.json），而 WebStorm 默认只读最外层那个。一旦路径或 include 配错，defineProps 就无法推导类型，useRouter 标红。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 确认项目根目录存在 tsconfig.json，且内容至少包含 "types": ["vite/client", "vue"] 和 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
• 进入 Settings/Preferences → Languages & Frameworks → TypeScript，检查 Compiler 是否设为 Use TypeScript version specified in the tsconfig.json，且路径指向你项目的 tsconfig.json
• 如果仍报 Cannot find name 'defineProps' 或类似错误，右键项目根目录 → Reload project from tsconfig

运行配置别依赖终端命令行

每次手动开终端输 npm run dev 效率低，还容易漏环境变量或路径问题。WebStorm 可以直接集成 npm script，启动时自动注入 Node.js 运行时和工作目录。

• 点击右上角 Add Configuration → + → npm
• 填入：Package directory 指向项目根目录；Command 填 run；Scripts 选 dev（对应 package.json 里的 "dev": "vite"）
• 勾选 Run npm install automatically before running this script，避免依赖未装就启动失败
• 启动后，控制台输出应含 Local: 地址，且 WebStorm 底部状态栏显示 Running，而非卡在 npm start 报错

ESLint + Prettier 要关掉 WebStorm 自带校验

WebStorm 自带的 JavaScript 语法检查器和 ESLint 插件会打架，尤其当你用了 @vue/eslint-config-typescript 后，defineProps 可能被误判为未声明变量。

• 进 Settings/Preferences → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint，启用 Automatic ESLint configuration，路径指向项目内 eslint.config.js 或 .eslintrc.cjs
• 关闭 Settings/Preferences → Editor → Inspections → JavaScript → General → Unresolved variable（它和 ESLint 重复报错）
• Prettier 配置同理：进 Code Style → JavaScript → Prettier，勾选 Run on save，但取消勾选 On code reformat，避免格式化和 ESLint 修复冲突

最易忽略的是 tsconfig.json 的 types 字段漏了 "vue"，或者 Volar 启动后没重启 IDE——这两处一错，整个 <script setup></script> 就退化成纯文本编辑器。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！