需禁用Vetur并启用Volar，配置TS插件、volar.config.json、别名路径解析，关闭Volar模板诊断以避免ESLint冲突。
如果您在使用 VSCode 编辑 Vue 3 项目时遇到类型提示缺失、模板语法高亮异常或 `<script setup>` 支持不完整等问题，则很可能是 Volar 插件未正确配置或与其他插件发生冲突。以下是针对该场景的多种配置与调优方法：</script>
本文运行环境：MacBook Air，macOS Sequoia。
一、禁用 Vetur 并启用 Volar 全局覆盖
Vetur 与 Volar 在 Vue 3 项目中存在功能重叠且互不兼容，必须彻底停用 Vetur 才能确保 Volar 正常工作。
1、打开 VSCode 设置（Cmd + ,）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 vetur。
3、找到 Vetur: Enable 选项，取消勾选。
4、在扩展面板中搜索 Vetur，点击已安装的 Vetur 插件右侧的齿轮图标，选择 Disable Workspace。
二、配置 Volar 的 TypeScript 支持模式
Volar 默认使用内建的 TypeScript 语言服务，但需显式启用以支持 `<script setup>` 中的响应式 API 类型推导和 `defineProps`/`defineEmits` 的自动补全。</script>
1、按下 Cmd + Shift + P，输入 Volar: Switch TS Plugin 并回车。
2、在弹出选项中选择 Enable。
3、重启 VSCode 窗口（Cmd + Shift + P → Developer: Reload Window）。
三、设置项目级 `volar.config.json`
通过项目根目录下的 volar.config.json 文件可精细化控制模板校验级别、自定义组件解析路径及 `
1、在项目根目录创建文件 volar.config.json。
2、写入以下内容：
{"plugins":{"typescript":{},"vue":{}},"compilerOptions":{"lib":["esnext","dom","ES2022"],"target":"ES2022"}}
3、保存后，在任意 `.vue` 文件中右键选择 Volar: Restart Server。
四、启用 Volar 的别名路径解析
当项目使用 `vite.config.ts` 中的 `resolve.alias` 配置了如 @/components 别名时，Volar 默认无法识别，需手动同步路径映射关系以保障跳转与提示准确。
1、打开项目根目录下的 tsconfig.json 或 jsconfig.json。
2、确认已包含 "baseUrl": "./" 和 "paths" 字段，例如：
{"baseUrl": "./","paths": {"@/*": ["src/*"]}}
3、在 VSCode 设置中搜索 Volar: Use Tsconfig，确保该选项为启用状态。
五、处理 ESLint 与 Volar 的诊断冲突
Volar 提供模板内联诊断（如 `` 中的 `v-model` 语法校验），而 ESLint-Vue 插件也会报告同类问题，二者叠加会导致重复报错，需关闭 Volar 的模板校验模块。
1、打开 VSCode 设置，搜索 Volar: Template Diagnostic。
2、将该设置值改为 false。
3、确保已安装并启用 eslint-plugin-vue 及其推荐规则集。
