Vue 3 项目必须禁用 Vetur、单独启用 Volar，因二者底层语言服务不兼容，Vetur 无法支持 Vue 3 的 、类型推导和多根节点，共存会导致模板报错、defineProps 无法识别、跳转失效；需禁用 Vetur（非卸载）、重启 VSCode、确认状态栏显示“Vue (Volar)”，并配置 vetur.validation.* 为 false 及启用 Volar 实验特性。
Vue 3 项目不能配置 Vetur 转 Volar——必须停用 Vetur，单独启用 Volar。Vetur 和 Volar 底层语言服务不兼容，不是“切换”或“升级”，而是彻底替换。Vetur 对 Vue 3 的 <script setup>、类型推导、多根节点等特性基本不支持，强行保留会导致模板报错、defineProps 无法识别、跳转失效等问题。</script>
为什么必须禁用 Vetur
Vetur 基于 Vue 2 的语言服务模型，把 .vue 文件拆成 HTML/JS/CSS 分别处理；Volar 则将整个 SFC 视为统一语言单元，深度对接 Vue 3 编译器和 TypeScript 类型系统。两者同时启用时，VSCode 会随机选择一个接管 .vue 文件，结果往往是 Vetur 抢占了语言模式，Volar 的类型服务完全静默。
- 状态栏右下角显示 “Vue (Vetur)” 或仅 “Vue” → 表示 Volar 未接管
- Ctrl+Click 点击组件名无响应、
defineProps 不提示泛型 → 典型 Vetur 干扰表现 - Vetur 的校验规则（如
vetur.validation.template）会覆盖 Volar 的语义分析
正确操作步骤
打开 VSCode 扩展面板，搜索 “Vetur”，点击齿轮图标 → 选择 Disable (Workspace)（推荐）或 Disable (Global)。不要卸载，方便临时切回 Vue 2 项目。
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 重启 VSCode（仅重载窗口不够，需冷启动语言服务器）
- 打开任意 .vue 文件，确认右下角语言模式显示为 Vue (Volar)，不是带括号的旧别名如 “Vue (Volar)”（那是废弃插件残留）
- 在命令面板（Ctrl+Shift+P）运行 Developer: Toggle Developer Tools，Console 中搜 “volar” 应看到已注册 vue 语言服务
关键配置补全
Volar 启用后默认功能不完整，需手动补全几项设置：
- 在项目根目录创建
.vscode/settings.json，写入：
{
"vue.experimental.enableExperimentalFeatures": true,
"vue.suggestions.autoImport": true,
"vetur.validation.template": false,
"vetur.validation.style": false,
"vetur.validation.script": false
}
- 确保项目有
tsconfig.json或jsconfig.json，且"baseUrl": "."和路径别名配置正确（如"@/*": ["src/*"]），否则@/components会标红 - 若用 pnpm/yarn PnP，运行
pnpm add -D @vue/language-core，Volar 运行时依赖该包
验证是否生效
新建一个 .vue 文件，写入最简 setup 语法：
<script setup>
const props = defineProps<{ msg: string }>()
</script>
-
defineProps不报红，鼠标悬停能显示类型签名 → Volar 已接管脚本块 - 在
中输入{{ props.，应自动提示msg→ 模板类型推导正常 - Ctrl+Space 在 script 内触发补全，能看到
defineEmits、useSlots等组合式 API → 语言功能完整
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
