VSCode如何配置Volar Vue插件_VSCode Volar安装与Vue3语法支持

Volar未生效的三大原因：未禁用Vetur、未开启Take Over模式、tsconfig.json中skipLibCheck为true；需彻底退出VSCode并确保volar.server.config.json配置正确。

装了 Volar 还是没 defineProps 提示、ref 类型是 any、模板里变量不补全？不是插件没装，是 Volar 没真正接管——Vetur 没禁用、Take Over 模式没开、tsconfig.json 配置被跳过，三者缺一都会让类型能力直接归零。

为什么禁用 Vetur 是硬性前提

Vetur 和 Volar 会争夺 .vue 文件的语言服务控制权。Vetur 已停更，无法识别 defineProps<>、defineModel 或 ref() 的类型解包，强行共存只会触发 Cannot find name 'defineProps' 或 Property 'xxx' does not exist on type '{}'。

• 在扩展面板搜 Vetur，右键 → Disable (Workspace)（不是卸载，也不是只关配置项）
• 关闭所有 .vue 标签页，完全退出 VSCode 再重新打开（仅 Reload Window 不生效）
• 打开任意 .vue 文件，确认右下角状态栏显示的是 Vue (Volar)，不是 Vue (Vetur) 或 HTML

必须开启 Take Over Mode 才有类型推导

默认状态下 Volar 只做基础高亮和跳转，ref 不自动解包、template 里写 v-mo 不展开、defineProps<{ foo: string }>() 泛型不生效——这些全是 Take Over 关闭导致的。

• 按 Ctrl+Shift+P 输入 Volar: Enable Take Over Mode 并执行
• 该操作会自动在 .vscode/settings.json 中添加 "vetur.validation.template": false 等关键开关
• 执行后务必重启窗口（Developer: Reload Window），否则语言服务器不会重载

tsconfig.json 里 skipLibCheck: false 是关键开关

Volar 依赖 TypeScript 加载 @vue/runtime-core 类型定义来推导 ref<string>()、computed 等响应式类型。但 Vite 默认脚手架常设 "skipLibCheck": true，等于直接跳过所有 node_modules 下的类型声明。

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

• 检查项目根目录的 tsconfig.json，确保顶层 compilerOptions 包含："skipLibCheck": false
• 如果没这个文件，新建一个空的 tsconfig.json（内容只需 {}）也能让 Volar 启动类型服务
• 不要把 src/**/*.vue 写进 exclude 字段，否则 Volar 会跳过整个 SFC 类型解析

volar.server.config.json 名字/位置/格式三者必须严丝合缝

这个文件不是可选配置，而是 Volar 语言服务器启动时唯一认的入口。写错一个字符就静默失效，VSCode 不报错也不提醒。

• 文件名必须是 volar.server.config.json（不是 volar.config.json，也不是 tsconfig.volar.json）
• 必须放在项目根目录（即 package.json 所在层），不能在 src/、configs/ 或 .vscode/ 下
• 内容必须是合法 JSON：无注释、无尾逗号、顶层只含 plugins、types、compilerOptions 等允许字段
• 改完后手动执行命令：Ctrl+Shift+P → 输入 Volar: Restart Server

最常被忽略的是「完全退出 VSCode」和「skipLibCheck 设为 false」——前者让语言服务器根本没机会重注册，后者让所有类型推导从源头失效。这两个点卡住，其他配置全白搭。