Volar和Vetur不能共存，Vue 3项目必须禁用Vetur；典型现象包括.vue文件全白、template属性无补全、script setup中ref类型推导失败、右下角显示“Vue”但状态栏提示“Volar: disabled”，根源是二者争夺.vue文件解析权。
Volar 和 Vetur 不能共存，Vue 3 项目必须禁用 Vetur；React 项目若混用 Vue 文件，需确保语言模式准确、格式化命令按 langId 绑定。
如何确认是 Volar + Vetur 导致的 .vue 文件爆红
典型现象包括：.vue 文件全白（无高亮）、<template> 区块内属性无补全、<script setup> 中 ref 类型推导失败、右下角语言标识显示“Vue”但状态栏提示“Volar: disabled”。这些不是 TypeScript 配置问题，而是两个插件对 .vue 文件的解析权争夺所致。
验证方式：终端执行 code --disable-extensions 启动 VSCode，打开一个 .vue 文件——如果此时高亮和跳转恢复，再逐个启用插件，很快就能锁定冲突源。控制台（Ctrl+Shift+I）中若持续刷出 Command 'volar.*' is already registered 或 Conflict detected，就是明确信号。
Vue 3 项目中 Vetur 必须被禁用的三个原因
Vetur 是为 Vue 2 设计的语言服务，它无法理解 defineProps、defineEmits、withDefaults 等 Vue 3 Composition API 语法，强行启用会导致：
立即学习“前端免费学习笔记（深入）”；
- 类型检查绕过：TS Server 无法从
<script setup>中提取 props 类型，props.xxx不报错也不提示 - 模板绑定失效：
v-model、v-if等指令在<template>中不被识别为合法属性 - 语言服务器抢占：Vetur 会注册
vue语言 ID 的默认处理器，导致 Volar 的vue-language-features被静默降级或完全跳过
禁用方法不是简单点“禁用”按钮，而要在 settings.json 中显式关闭其语言支持：
{
"vetur.ignoreProjectCompilerOptions": true,
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false
}
更彻底的做法是：卸载 octref.vetur，只保留 johnsoncodehk.volar 及其配套扩展（如 volar-server）。
Vue/React 混合项目中格式化命令冲突的修复要点
当项目同时含 .vue 和 .tsx 文件时，Shift+Alt+F 全局格式化会随机触发 Volar 或 Prettier，造成格式错乱甚至报错 No formatter found for 'vue'。根本解法是按语言 ID 绑定命令：
-
editorlangid == 'vue'→ 使用volar.format（确保已安装 Volar 并启用） -
editorlangid == 'typescriptreact'→ 使用editor.action.formatDocument（前提是 Prettier 已设为 TS/JS 默认格式器） - 绝对不要在
keybindings.json中给Shift+Alt+F写全局映射
对应配置示例（settings.json）：
{
"[vue]": {
"editor.defaultFormatter": "johnsoncodehk.volar"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
注意：若 React 侧使用 ESLint Fix on Save，请务必关闭其格式化能力："eslint.format.enable": false，否则会与 Prettier 冲突。
容易被忽略的底层细节：语言模式切换与 tsconfig 路径
VSCode 对 .vue 文件的解析，严重依赖右下角显示的语言模式是否为 Vue（而非 HTML 或 Plain Text）。手动点击切换后，Volar 才会加载。但更隐蔽的问题是：tsconfig.json 路径未被正确识别，会导致 <script setup> 中的类型无法跨文件跳转。
务必检查：
- 项目根目录是否存在
tsconfig.json（非jsconfig.json），且其中"compilerOptions.types"包含"volar" -
vue.config.js或vite.config.ts中未错误覆盖resolve.alias，导致 Volar 无法定位类型声明 - 工作区设置中没有误配
"volar.ignoreProjectCompilerOptions": false（这会让 Volar 忽略项目级 tsconfig）
这类问题不会报错，只会表现为“能写、不能跳、不提示”，排查时最容易漏掉。
