Vue文件在PhpStorm中不高亮，90%因Vue.js插件未启用或文件类型未绑定为Vue.js Template；需手动启用插件并重启，添加*.vue到Vue.js Template的Registered Patterns，并确保tsconfig.json存在且含"types": ["vue"]及@vue/runtime-dom已安装。
Vue 文件在 PhpStorm 中不高亮，不是插件没装就是文件类型绑错了，90% 的问题出在这两个地方，其他配置都是锦上添花。
Vue.js 插件必须手动启用且重启生效
PhpStorm 不像 WebStorm 那样默认带 Vue 支持，Vue.js 插件得自己装、自己开、自己重启——光勾选“Enable”但不重启，<script setup> 里的 ref 和 defineProps 依然标红。
- 进
Settings / Preferences → Plugins，搜Vue.js（不是Volar，也不是Vue Language Features (Builtin)） - 确认状态是
Enabled；如果是Install，点它，然后必须 重启 PhpStorm - 重启后看两个信号：
.vue文件左侧图标变成 Vue Logo，且File → New里出现Vue File模板
文件类型必须绑定为 Vue.js Template
插件装了，但单个 .vue 文件还是灰的？大概率是 PhpStorm 把它当成了 HTML 或纯文本。这不是语法问题，是“认错人”了。
- 进
Settings / Preferences → Editor → File Types - 在
Recognized File Types列表中找到Vue.js Template - 在
Registered Patterns下添加*.vue（若已存在，先删掉其他类型如HTML Files对*.vue的注册） - 改完不生效？右键该文件 →
Override File Type → Vue.js Template，或关掉再重开文件
TypeScript + Vue 3 场景下 ref/computed 不识别
高亮有了，但 ref() 是蓝色、count 变量也是蓝色——说明只有基础语法着色，缺语义层。核心卡点是 PhpStorm 没读到 tsconfig.json 或类型定义没加载。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“PHP免费学习笔记（深入）”；
- 项目根目录必须有
tsconfig.json，且含"types": ["vue"]或["vue", "@vue/runtime-dom"] - 确保已安装
@vue/runtime-dom（仅devDependencies不够，PhpStorm 会扫描node_modules实际内容） - 进
Settings → Languages & Frameworks → JavaScript → Libraries，确认node_modules/@vue被标记为Library - 检查
Settings → Editor → Color Scheme → TypeScript是否勾选了Enable semantic highlighting
别碰 Volar，也别信 Vetur
JetBrains 官方 Vue.js 插件从 2025 年起已原生支持 <script setup>、响应式 API 推断和模板类型检查。Volar 和 Vetur 在 PhpStorm 中不仅不兼容，还会导致符号解析冲突、跳转失效甚至报错 Cannot resolve symbol 'ref'。
- 如果已装 Volar/Vetur，请在
Plugins里禁用并重启 - 不推荐用
File → Settings → Languages & Frameworks → JavaScript → Libraries手动加node_modules/vue作为库——这容易绕过类型系统，反而让defineProps推导失败 - 真正关键的是：文件类型绑定 +
tsconfig.json可达 +@vue/runtime-dom存在
最容易被忽略的是：改完 tsconfig.json 或装完依赖后，PhpStorm 不会自动重载类型服务，得手动触发一次 Ctrl + Shift + O（Reload project from disk），否则 ref 还是标红。
