必须安装官方vue.js插件并重启ide，确保.tsconfig.json配置合规且typescript服务启用，启用语义高亮，并将.vue文件类型正确关联至vue component而非html。
Vue.js 插件没装或没重启，.vue 文件根本不会被识别
WebStorm 默认不把 .vue 当 Vue Component 处理，而是当成纯 HTML 或文本。你看到的“高亮”，只是 HTML 语法着色，script setup 里 ref、defineProps 全是灰色，template 中的 v-if 也不提示——这不是配置不到位，是根本没走 Vue 解析器。
必须做两件事：
- 在
Settings > Plugins搜索并安装官方Vue.js插件（不是 Volar、不是 Vetur） - 安装后点
Restart IDE—— 不重启，插件功能全部不激活；重启后左下角状态栏应显示Vue Component，新建文件才有Vue File模板选项
如果搜不到 Vue.js，说明网络受限，可手动下载 vue-for-idea 或 vuejs-plugin 的最新 release（适配 WebStorm 2025.3+ 的版本号需 ≥ 243.x）
tsconfig.json 未被正确加载，setup() 类型推断全失效
即使插件装了、也重启了，const count = ref(0) 里的 count 还是没类型提示？大概率是 WebStorm 没读到 tsconfig.json，或者读到了但配置不合规。
检查三项硬性条件：
- 项目根目录存在
tsconfig.json，且"compilerOptions"包含："target": "esnext"、"module": "esnext"、"jsx": "preserve"、"lib": ["esnext", "dom"] - 进入
Settings > Languages & Frameworks > TypeScript，确认TypeScript language service已启用，Node interpreter和TS version指向node_modules/typescript - 若界面显示
TypeScript is not configured，点击右上角Reload project手动触发重新索引
漏掉任意一项，ref 返回值类型、defineProps 的泛型推导、computed 的响应式链路都会断掉——你写的不是 TS，是带括号的 JS
语义高亮关闭，ref 和 reactive 看起来一模一样
基础语法高亮只按 token 分类：所有函数调用都是蓝色，所有变量都是黑色。但语义高亮能让 ref(0)（函数调用）、count（响应式变量）、0（字面量）各自有专属颜色，这是判断 WebStorm 是否真正“懂 Vue”的最直观指标。
启用路径很明确：
- 进
Settings > Editor > Color Scheme > TypeScript，勾选Enable semantic highlighting - 别跳过
Languages & Frameworks > JavaScript > React JSX页面——Vue 的setup()类型推断复用同一套引擎，要确保Parameter、Keyword、Template string配色合理 - 改完点
Apply，然后在<script setup></script>里写一行const list = reactive([])，观察三者是否颜色分明
注意：一旦装了 Volar，它会覆盖 WebStorm 原生 Vue 支持，导致语义高亮退化回基础模式，且 Ctrl+Click 跳转失效——Vue.js 插件和 Volar 不能共存
.vue 文件被错误关联到 HTML 类型，<style scoped></style> 和 defineEmits 全报红
很多人以为“加个 *.vue 到 HTML 文件类型”就能高亮，结果 <style scoped></style> 里 CSS 变量不识别、defineEmits 下划线报错、<template></template> 中 @click 补全消失——这是因为 WebStorm 仍用 HTML 解析器处理整个文件，压根没调用 Vue 专用解析器。
必须手动修正文件类型映射：
- 进
Settings > Editor > File Types，左侧找到Vue Component（不是 HTML），确认右侧Registered Patterns包含*.vue - 如果
Vue Component条目不存在，说明插件未生效，回退检查重启和版本兼容性 - 务必删掉
HTML类型下的*.vue—— 这个旧配置会劫持识别逻辑，让<script setup lang="ts"></script>被当普通 script 解析
改完后打开任意 .vue 文件，左下角状态栏必须显示 Vue Component，否则后续所有高亮、补全、跳转都不可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
