必须先卸载vetur再安装volar，否则二者冲突导致语法高亮错乱、defineprops类型推导失效、语言模式显示plain text；需彻底卸载vetur及相关插件，清理项目中vetur配置，并手动将.vue文件关联为vue语言模式。
必须先卸载 Vetur，再装 Volar，否则 Vetur 和 Volar 会抢 .vue 文件控制权，导致语法高亮错乱、defineProps 类型推导失效、甚至右下角语言模式显示为 Plain Text。
卸载 Vetur 并检查残留扩展
在 VSCode 中按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux），输入 Extensions: Show Installed Extensions。找到以下所有扩展并逐一卸载：
VeturVue 2 SnippetsVetur ESlintVetur Pug
这些插件哪怕只留一个，都可能干扰 Volar 的语言服务器启动。尤其注意 Vetur ESlint —— 它不是 ESLint 插件本体，而是 Vetur 的 ESLint 集成模块，容易被忽略。
清理项目级和工作区级的 vetur 配置
vscode 不会自动删掉 Vetur 写入的配置，它们会继续生效并覆盖 Volar 行为。打开项目根目录下的 .vscode/settings.json，删掉所有含 vetur 的字段，比如：
-
"vetur.validation.template"（已弃用） "vetur.format.options.tabSize""vetur.grammar.customBlocks"-
"vetur.enable"（即使设为false，也建议删掉）
保留的最小安全配置应类似：
{"editor.tabSize": 2,"eslint.validate": ["javascript", "typescript", "vue"],"prettier.semi": false,"prettier.singleQuote": true}
启用 Volar 并确认语言模式正确
安装 Vue Language Features (Volar)（发布者是 Vue）后，关键一步常被跳过：必须手动把 .vue 文件关联到 vue 语言模式。打开任意 .vue 文件，看右下角状态栏 —— 如果显示 HTML 或 Plain Text，点击它，在弹出菜单中选 Configure File Association for '.vue' → vue。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
也可在 .vscode/settings.json 中显式声明：
{"files.associations": {"*.vue": "vue"}}
这个配置不能被 files.associations 其他规则覆盖，例如 {"*.vue": "html"} 就会让 Volar 完全不加载。
Vue 2 项目里硬要用 Volar？小心类型推导崩坏
如果你在 Vue 2 项目里强行启用 Volar（比如为了尝鲜），必须加 vueCompilerOptions.target，否则 ref、reactive 的类型提示会出错：
{"vueCompilerOptions": {"target": 2}}
但要注意：defineProps<t>()</t> 和 defineEmits<e>()</e> 在 Vue 2 下根本不存在，Volar 会静默忽略它们，不会报错也不会补全 —— 这种“看似正常实则失效”的状态最难排查。
真正要同时维护 Vue 2 和 Vue 3 项目，别指望一个插件通吃；workspace 级配置 + vetur.enable/volar.enable 开关才是唯一稳的路子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
