Volar是唯一靠谱选择，因Vetur已归档且对Vue3支持失效；必须卸载Vetur、启用Take Over模式、配置files.associations为"*.vue":"vue"、确保tsconfig.json存在，否则ref不跳转、defineProps无类型提示、模板无补全。
VSCode 默认不识别 .vue 文件，装错插件或配置不到位，ref 不跳转、defineProps 无类型提示、模板里输 v-model 没补全——不是代码写错了，是编辑器根本没“看懂”你在写 Vue。
为什么 Volar 是唯一靠谱的选择
Vetur 已归档，对 Vue 3 的 <script setup></script>、defineProps 类型推导、模板内变量跳转基本失效。Volar 是 Vue 官方维护的语言服务器，直接对接 @vue/compiler-sfc，能真正把 .vue 当成一个整体解析，而不是把 <template> 当 HTML、<script> 当 JS 分开处理。
- 必须卸载或禁用 Vetur，否则两者冲突，
Ctrl+Click跳转会失败，状态栏可能显示 “Plain Text” - 安装后打开命令面板（
Ctrl+Shift+P），运行Volar: Switch to Take Over Mode，否则 TypeScript 语言服务不会被接管，类型提示形同虚设 - 确保项目根目录有
tsconfig.json或jsconfig.json，Volar 靠它确定类型作用域，空项目里光装插件也不行
文件关联和语言模式必须手动设对
即使装了 Volar，右下角状态栏如果显示 “HTML” 或 “Plain Text”，说明 VSCode 根本没把 .vue 当 Vue 文件处理，所有智能提示都会降级或消失。
- 在
settings.json中加这一行："files.associations": { "*.vue": "vue" } - 不要依赖插件自动设置——有些旧工作区会残留
"*.vue": "html"，得手动删掉 - 如果已打开
.vue文件，点击右下角语言模式名称，从下拉菜单中选 “Vue”，强制切换一次，再观察是否出现语法高亮和 Emmet 补全
代码片段要靠 Vue VSCode Snippets 补齐
Volar 本身不带代码片段，vue3-ref、vue3-onMounted 这类快捷输入来自独立插件 Vue VSCode Snippets（作者 sdras），它和 Volar 兼容良好，且前缀明确区分 Vue 2/3。
立即学习“前端免费学习笔记（深入）”；
- 装完插件后，在
<script setup>区域直接输vue3-ref+Tab，就能展开const xxx = ref(null)带类型占位符的结构 - 避免自己写
vue.json片段：容易和插件冲突，且无法随 Vue 版本更新；自定义只建议补团队私有逻辑，比如api-fetch这种业务相关前缀 - 如果输不出现有片段，先检查语言模式是否为 “Vue”，再确认 Volar 是否处于 Take Over Mode（命令面板搜 “Volar: Show Server Status” 可验证）
ESLint 和 Prettier 的协作不能只靠插件
装了 ESLint 插件但没配规则，ref 忘写 .value、defineProps 缺泛型、onMounted 拼错成 onMount 都不会报错。
- 项目里必须有
.eslintrc.cjs，启用plugin:vue/vue3-recommended，否则插件只是摆设 - Prettier 不该直接格式化
.vue文件——Volar 内置格式化能力更强，建议关掉prettier.eslintIntegration，让 ESLint 插件只负责校验，格式化交给 Volar - 保存时自动修复要限定范围：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }加到工作区.vscode/settings.json，避免误修package.json等非源码文件
最常被忽略的一点：Volar 的 Take Over Mode 不是“装完就生效”，它需要重启 VSCode 或重新打开文件夹才能完全加载；很多问题其实只需要关掉窗口再重开一次。
