必须安装非deprecated版volar插件并禁用webstorm内置ts服务，同步配置tsconfig.json（含"jsx":"preserve"、"types":["vue"]等）与本地typescript版本，清理缓存后重启，才能解决defineprops标红、ref跳转失效等问题。
WebStorm 对 Vue 项目不是开箱即用的“真支持”，尤其 Vue 3 + TypeScript 场景下，不配插件、不调设置，defineProps标红、ref跳转失效、<style lang="scss"></style>里嵌套语法全报错——这些都不是代码问题，是 IDE 没认对语言上下文。
必须装 Volar（非 Deprecated 版）并禁用内置 TS 服务
WebStorm 2023.1 起虽内置基础 Vue 支持，但 defineComponent() 类型推断、setup() 返回值在模板里的自动补全、lang="ts" 下 script 区域的错误提示，全依赖 Volar。只装 Vue.js 插件不够，Volar 才是主力。
- 进 Settings > Plugins，搜
Volar→ 安装 非 Deprecated 版本（名字带 "(Deprecated)" 的别点） - 再进 Settings > Languages & Frameworks > TypeScript，勾选
Disable built-in TypeScript service for Vue files - 不关这个开关，Volar 就不接管 .vue 文件，所有类型能力都打折扣
- 重启 WebStorm 后，如果还看到
Unresolved variable 'ref'或模板里点不进props类型，大概率就是这一步漏了
tsconfig.json 和本地 TypeScript 版本必须对齐
WebStorm 解析 .vue 里的 TypeScript，不是靠 <script lang="ts"></script> 单独生效的，它要和项目根目录的 tsconfig.json 及 IDE 加载的 TS 服务联动。配置不对，defineProps 解构后类型丢失、import 下划线不断，都是典型症状。
- 确认项目根目录有
tsconfig.json，且"compilerOptions"至少含："jsx": "preserve"、"moduleResolution": "node"、"types": ["vue"] - 进 Settings > Languages & Frameworks > TypeScript，
TypeScript version必须选 项目本地版本（路径类似node_modules/typescript/lib/tsserverlibrary.js），不能用 IDE 自带 TS -
include字段要覆盖src/**/*，否则src/components/Hello.vue可能被忽略 - 删掉
node_modules/.webstorm和.idea目录，重启强制重建索引——旧缓存卡住类型解析太常见了
WebStorm 对预处理器的支持不只看 lang，尤其在老项目或插件链未完整启用时，<style lang="scss"></style> 会被当成纯 CSS 处理，导致 @use、嵌套、变量全标红。
- 把
<style lang="scss"></style>改成<style lang="scss" rel="stylesheet/scss"></style> - 同理：
lang="less"→rel="stylesheet/less"，lang="stylus"→rel="stylesheet/stylus" - 这个
rel是告诉 WebStorm “按对应预处理器解析”，不是给浏览器用的 - 如果用了 PostCSS 或 CSS Modules，还需在 Settings > Languages & Frameworks > Stylesheets 里确认对应支持已启用
真正卡住人的往往不是“没配”，而是“配了一半”：比如装了 Volar 却忘了关内置 TS 服务，或者改了 tsconfig.json 却没切本地 TS 版本。每一步都得验证是否生效，而不是点完就以为完事了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
