Volar 是 Vue 3 项目必需的语言服务底座，须禁用 Vetur 并启用 Take Over Mode，配合 tsconfig.json 配置与 Path Intellisense 等插件，实现模板/脚本/样式全链路类型推导、跳转与提示。

Vue 开发效率提升，关键在用对工具——Volar 不是“可选插件”，而是 Vue 3 项目的语言服务底座。它让模板、脚本、样式三者真正打通，类型能推导、变量可跳转、错误早发现。

必须禁用 Vetur，否则一切功能都会打折

Vetur 和 Volar 都会抢夺 .vue 文件的控制权，但底层机制不兼容：Vetur 模拟 Vue 2 行为，Volar 对接 Vue 官方编译器和响应式类型系统。共存时会出现：

• 模板里点不了 ref(0) 变量，跳转失败
• defineProps<{ name: string }>() 写错字段名也不报错
• 保存后 ESLint 不再检查 <script setup> 区域的未使用变量

操作很简单：打开 VSCode 扩展面板 → 搜索 Vetur → 点击“禁用”（不用卸载）→ 重启编辑器。

启用 Take Over Mode，让模板和脚本统一由 Volar 管理

在 VSCode 设置中搜索 volar.takeOverMode.enabled，勾选开启。这会让 Volar 全面接管 .vue 文件的语言服务，包括 HTML、CSS、TS/JS 三部分，实现真正的全栈感知。

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

vue-component-analyzer

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

下载

开启后，右下角状态栏点击语言模式，确认显示的是 Vue（不是 Vue HTML 或 HTML）；再随便写个 {{ count }}，把光标放上去按 Ctrl+Click，就能直接跳到 const count = ref(0) 的定义处。

配合 tsconfig.json，激活精准类型提示

Volar 的类型能力依赖项目配置。确保根目录有 tsconfig.json，且包含：

• "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
• "compilerOptions": { "paths": { "@/*": ["src/*"] } }

这样 import { api } from "@/api" 不仅路径能自动补全，api.login 也能获得完整方法签名提示。

加装辅助插件，补全开发闭环

Volar 是核心，但单靠它还不足以覆盖全部场景：

• Path Intellisense：补全 import 路径，需手动配置别名映射（如 "@": "${workspaceFolder}/src"）
• CSS Peek：在模板中点击 class 名，直接跳转到对应 CSS/SCSS 定义（只支持静态类名，不解析 :class 表达式）
• Vue VSCode Snippets：输入 ref 或 onMounted，一键展开带注释的组合式 API 模板

这些插件不重叠、不冲突，和 Volar 协同工作，把写代码变成“填空式”体验。