Vue 3 项目开发中,编辑器智能提示好不好用,往往直接影响开发效率。先说一个最核心的判断:如果你还在用 Vetur 写 Vue 3,那类型推导基本等于摆设。defineProps、defineEmits、ref 这些高频 API,在 Vetur 下要么报红,要么跳转失败——不是代码写错了,是工具没跟上。Volar 作为 Vue 官方语言服务器,天然适配 的完整类型系统。不装它,TS 提示就只是“看起来有”,实际点不进、补不全,类型报错也不准。

Volar 必须启用,Vetur 在 Vue 3 中已失效
换到 Volar 后,有几个细节容易踩坑。第一,卸载 Vetur 之后必须重启 VS Code——缓存不清理,Volar 的语言服务不会真正接管 .vue 文件。第二,项目根目录里要确保存在 tsconfig.json 或 jsconfig.json,否则 Volar 解析不了模块路径和类型定义。第三,如果 compilerOptions.types 没有包含 "@vue/runtime-dom",组件 props 的类型提示会大面积丢失。这三个点缺一个,体验就大打折扣。
Vue 3 Snippets 补齐高频 API 快捷输入
光靠 Volar 能跳转、能推导,但写 onMounted(() => {}) 这类代码还是要手敲。Vue 3 Snippets 提供了 vs-setup、vs-onm、vs-ref 等前缀触发的片段,按 Tab 就能展开带类型标注的模板,比纯记忆快,也不容易拼错。
vs-setup一键生成标准结构,自动引入defineProps和defineEmitsvs-ref插入const count = ref,光标停在泛型和初始值处,直接修改即可(0) - 不建议和旧版 Vue Snippets 混用,冲突会导致片段不触发或覆盖错误
路径补全失效?不是插件问题,是 jsconfig.json 配置没生效
写 import { utils } from '@/utils' 时没提示,第一反应往往是 Path Intellisense 没装好。其实它默认只识别物理路径(比如 ./src/utils),对 @/ 别名没有感知——这是 TypeScript 模块解析的事,得靠 jsconfig.json 告诉编辑器“@ 指向哪”。
- 在项目根目录新建
jsconfig.json,内容包含"baseUrl": ".", "paths": {"@/*": ["src/*"]} - 改完必须执行
Cmd+Shift+P→Developer: Reload Window,否则缓存不刷新,补全永远不出现 - 别依赖插件级的
path-intellisense.mappings设置,它无法同步 Webpack/Vite 的真实解析逻辑,容易误导
组件名跳转不到定义?检查 Volar 是否被其他插件抢占语言模式
在模板中点击 按 F12 却跳到空白或报 “No definition found”,大概率是 Volar 的语言服务没真正激活。常见干扰源是 Auto Import 或某些旧版语法高亮插件,它们会注册 vue 语言 ID 并拦截请求。
- 打开命令面板,运行
Developer: Show Language Extensions,确认volar是vue文件的默认语言服务器 - 临时禁用 Auto Import、Vetur、Vue Syntax Highlight 等插件,逐个排查是否冲突
- 如果项目用了
unplugin-vue-components自动导入,需在volar.config.json中显式配置"plugins": ["auto-import"],否则组件名无法索引
最后说一个经常被忽略的点:Volar 的能力高度依赖项目配置的真实性和一致性。.vue 文件里写错一个 lang="tsx",或者 tsconfig.json 里漏了 "include",智能提示就会局部退化成“猜”,而不是“知道”。配置对了,效率才能真正提上来。