Vue 3 项目必须使用 Volar 而非 Vetur，二者共存会导致类型推导失效、ref 跳转失败、defineProps 无提示等问题；根本原因是 Volar 基于官方语言服务深度集成 vue-tsc，而 Vetur 是 Vue 2 旧架构，对 script setup 的 TypeScript 支持仅为模拟补丁。
Vue 3 项目必须用 Volar，不是 Vetur；装错或共存会导致类型推导失效、ref 变量跳转失败、defineProps 提示空白——这不是配置问题，是插件冲突的必然结果。
为什么 Volar 不能和 Vetur 共存
Volar 和 Vetur 都接管 .vue 文件的语言服务，但底层机制完全不同：Volar 基于 Vue 官方的 @vue/language-service，深度集成 vue-tsc 类型检查；Vetur 是为 Vue 2 设计的旧架构，对 script setup + TypeScript 的支持是模拟补丁，无法解析响应式解构、泛型 props 等真实类型流。
常见错误现象包括：
-
ref变量在模板中显示为any，点不进定义 -
defineProps的返回值没有字段提示，甚至报错Cannot find name 'defineProps' - 保存后
script setup区域突然飘红，但实际能正常运行
解决方法只有一步：彻底禁用或卸载 Vetur。VSCode 设置里搜 “vetur”，勾掉启用状态；如有残留配置（如 "vetur.validation.template": true），一并删掉。
立即学习“前端免费学习笔记（深入）”；
Volar 必配的搭档：TypeScript Vue Plugin
Volar 本身只处理 template 区域的类型推导，script 或 script setup 中的 TypeScript 类型检查由另一个插件负责：TypeScript Vue Plugin (Volar)。
它不是可选项，是功能闭环的关键一环。没装它会出现：
-
const count = ref(0)→count.value没有自动补全 -
onMounted(() => {})参数无类型提示 - TS 报错不显示在 Problems 面板，或提示位置错乱
安装后无需额外配置，但需确认 VSCode 的 TS 版本指向项目本地（右下角点击 TS 版本 → 选择 “Use Workspace Version”）。若项目用 pnpm，确保 node_modules/.pnpm 下有 typescript 和 @vue/runtime-core，否则插件会回退到基础检查模式。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
路径跳转不准？别怪 Volar，先查别名配置
Volar 支持 @/components/Button.vue 这类别名跳转，但前提是 VSCode 能识别你的路径别名。它不读 vite.config.ts，只认 jsconfig.json 或 tsconfig.json 中的 compilerOptions.paths。
典型错误配置：
- 只在
vite.config.ts里写了resolve.alias，但tsconfig.json里没同步paths -
paths值用了相对路径（如"@/*": ["./src/*"]），但没加baseUrl: "./" - 用了 pnpm workspace，
paths指向了../packages/ui/src，但没在对应包的tsconfig.json中声明types
验证方式：在 script setup 中输入 import { xxx } from '@，看是否弹出正确路径列表。不弹？立刻检查 tsconfig.json 的 baseUrl 和 paths 是否匹配项目结构。
代码片段不够用？优先改 vue.json，别堆插件
Vue VSCode Snippets 提供了 ref、onMounted 等基础片段，但团队常用逻辑（如 useApi 组合式函数、definePage）它不覆盖。这时候与其找“Vue高级片段”插件，不如直接编辑 VSCode 用户代码片段。
操作路径：Cmd+Shift+P → 输入 “Preferences: Configure User Snippets” → 选 vue → 在打开的 vue.json 里追加：
"setup api": {
"prefix": "setupapi",
"body": [
"const { data, loading, error, fetch } = useApi<$1>('$2');",
"$0"
],
"description": "API 组合式调用"
}
这样输入 setupapi 回车，就能插入带占位符的结构。比装十个碎片化插件更可控，也避免插件间 snippet 前缀冲突（比如两个插件都注册了 ref，VSCode 会随机选一个）。
真正卡住 Vue 开发体验的，往往不是功能缺失，而是插件间的隐性耦合——Volar 依赖 tsconfig.json 的路径配置，TypeScript Vue Plugin 依赖本地 typescript 版本，而所有跳转能力又建立在你没手动关掉 "javascript.suggest.autoImports" 这种全局设置上。细节不拉平，再好的插件也变拖累。
