Vue 3 项目必须禁用 Vetur 并启用 Volar，否则类型提示、defineProps 泛型检查、模板中 ref 跳转及 v-model 解析将全面失效；因二者注册冲突的语言服务，Vetur 会抢占入口导致 Volar 不工作，需禁用 Vetur、启用 Volar、重启 VSCode 并确认状态栏显示 Vue (Volar)。

Vetur 和 Volar 不能共存，禁用 Vetur 是必须操作，不是可选项。 否则 Vue 3 的语法提示、类型推断、v-model 解析、defineProps 类型检查全都会失效或报错，且错误信息往往不指向真实原因（比如显示“找不到模块”或“ref 未定义”，实际是语言服务没加载）。

为什么禁用 Vetur 是第一步？

Vetur 是 Vue 2 时代的语言支持插件，已停止维护；Volar 是 Vue 官方推荐的 Vue 3+ 语言服务器。两者注册同一组语言功能（如 vue 语言模式、script setup 支持），VS Code 只能启用其中一个——若 Vetur 仍启用，它会抢占语言服务入口，导致 Volar 完全不工作。

常见现象包括：

• Ctrl+Space 在 <script setup> 中无 defineProps 补全
• 鼠标悬停变量看不到 TypeScript 类型
• @/components/xxx.vue 跳转失败，报“无法找到模块”
• 模板中 v-for、v-if 不触发 Emmet 展开

怎么确认 Vetur 是否还在生效？

打开任意 .vue 文件，在右下角状态栏查看语言模式图标。如果显示的是 Vue (Vetur) 或 HTML，说明 Vetur 仍在接管；正确应为 Vue (Volar)。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

操作步骤：

• 按 Ctrl+Shift+P 打开命令面板，输入 Extensions: Show Enabled Extensions
• 搜索 vetur，点击右侧齿轮图标 → Disable
• 搜索 volar，确保 Volar 和 Volar Server 均为启用状态
• 关闭并重新打开 .vue 文件，观察右下角语言模式是否变为 Vue (Volar)

禁用 Vetur 后还报错？检查这三处

禁用只是前提，不是万能解。以下配置缺一不可：

• files.associations 必须设为 "*.vue": "vue"，否则 VS Code 把 .vue 当 HTML 解析，Volar 根本不启动
• 项目根目录要有 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目），且 "types" 中包含 "vue"，否则 defineProps、ref 等全局类型无法识别
• 若用 Vite，确认 vite.config.ts 中 resolve.alias 已配 @ 别名；同时 jsconfig.json 的 "paths" 也要同步映射，否则跳转和类型检查双失效

最常被忽略的是：禁用 Vetur 后不重启文件或不重开 VS Code 窗口，Volar 不会自动接管已打开的标签页。关掉所有 .vue 文件，再重新打开一个，才是验证是否生效的唯一可靠方式。