Volar 不生效主因是 Vetur 冲突,需禁用 Vetur 并重启 VSCode;volar.server.config.json 必须命名正确、置于根目录且格式合法;ref 类型丢失多因 tsconfig 中 skipLibCheck 为 true;组件补全需开启 experimentalResolveType。

Vue 3 项目里 Volar 不生效?先关掉 Vetur
装了 Volar 却没语法高亮、没组件跳转、ref() 类型推导还是报错——八成是 Vetur 还在后台抢着干活。Vue 3 官方推荐 Volar,它和 Vetur 会冲突,且 VSCode 默认启用后者。
- 打开 VSCode 设置(
Cmd+,或Ctrl+,),搜vetur,把vetur.enable设为false - 右键禁用
Vetur插件(不是卸载,禁用即可) - 重启 VSCode:插件切换需要完全重载窗口,只重载扩展不够
- 确认状态栏右下角显示
Vue (Volar),不是Vue (Vetur)
volar.server.config.json 配置不生效?路径和格式必须严格匹配
Volar 的语言服务器配置文件名字和位置很敏感,写错一个字符就当不存在。它不是项目级配置,而是工作区级,且只认固定名和固定层级。
- 文件必须叫
volar.server.config.json(不能是volar.config.json或tsconfig.volar.json) - 必须放在项目根目录下(即
package.json所在层),不能放在src/或configs/里 - 内容必须是合法 JSON,且顶层只有
plugins、types、compilerOptions等允许字段,多一个逗号或注释都会静默失败 - 改完要手动触发
Volar: Restart Server命令(Cmd+Shift+P搜),不会自动热更
组合式 API 里 ref() 类型丢失?检查 tsconfig.json 是否启用了 skipLibCheck: false
Volar 依赖 TypeScript 的类型系统做响应式推导,但很多脚手架生成的 tsconfig.json 默认开了 skipLibCheck: true,导致 @vue/runtime-core 类型定义被跳过,ref<string>()</string> 就退化成 any。
- 打开项目根目录的
tsconfig.json - 找到
compilerOptions,确保"skipLibCheck": false(Vue 3.3+ 推荐设为false) - 如果用了
extends继承基础配置(比如./tsconfig.base.json),得去对应文件里改,不是只改当前文件 - 改完保存后,VSCode 右下角会提示 “TypeScript 已重新加载”,等几秒再看
ref类型是否恢复
使用 <script setup lang="ts"></script> 时组件名没补全?确认 experimentalResolveType 开关已启用
默认情况下,Volar 对 <script setup></script> 中的组件注册(比如 defineComponent 或 const Comp = defineAsyncComponent(...))不主动索引名称,所以 <comp> 按 <code>Tab 不出补全。
立即学习“前端免费学习笔记(深入)”;
- 在
volar.server.config.json里加:{"plugins": {"typescript": {"experimentalResolveType": true}}} - 这个选项开启后会略微拖慢首次启动速度,但对大型单文件组件的类型解析准确率提升明显
- 仅对
lang="ts"生效,lang="js"或无lang属性的setup脚本不支持 - 如果项目用了
unplugin-vue-components自动导入,这个开关可关掉,补全由插件接管
真正卡住人的地方往往不是“怎么装”,而是“谁在偷偷覆盖”。Volar 启动后不报错,但行为异常,大概率是其他插件、TS 配置或文件路径在暗处干扰。盯住状态栏右下角那个小标签,它比所有文档都诚实。


















