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

装了 Volar 还是没 defineProps 的智能提示？ref 类型显示为 any？模板里变量补全完全失灵？别急着怀疑插件没装对，真相是 Volar 根本没“真正接管”。Vetur 没禁用、Take Over 模式没开、tsconfig.json 里一个关键配置被跳过——这三件事但凡有一个没做对，Volar 的类型能力就会直接归零。

为什么禁用 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 不会自动补全为 v-model、defineProps<{ foo: string }>() 的泛型直接失效——这些问题的根源都是 Take Over 模式没开。

• 按下 Ctrl+Shift+P，输入 Volar: Enable Take Over Mode 并执行。
• 执行成功后，Volar 会自动在 .vscode/settings.json 中添加 "vetur.validation.template": false 等关键开关，彻底接管 Vue 文件的类型服务。
• 操作完成后，务必重启窗口（Developer: Reload Window），否则语言服务器不会重载新配置。

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

Volar 要能推导出 ref()、computed 等响应式类型，需要依赖 TypeScript 去加载 @vue/runtime-core 的类型定义。但 Vite 的默认脚手架常会设置 "skipLibCheck": true，这等于直接跳过了 node_modules 下的所有类型声明文件，Volar 自然就成了瞎子。

• 找到项目根目录的 tsconfig.json，确保 compilerOptions 里包含："skipLibCheck": false。
• 如果项目根目录没有这个文件，新建一个空的 tsconfig.json（内容只需 {}）也能让 Volar 启动类型服务。
• 检查 exclude 字段，千万不要把 src/**/*.vue 写进去，否则 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 等 Volar 认可的字段。
• 改完后，手动执行命令：Ctrl+Shift+P → 输入 Volar: Restart Server，确保配置生效。

最后再提两个最容易忽略的点：「完全退出 VSCode」和「skipLibCheck 设为 false」。前者让你配了半天发现服务器根本没机会重注册，后者让所有类型推导从一开始就宣告失败。这两步卡住了，其他配置做得再漂亮也是白搭。