需禁用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 文件可精细化控制模板校验级别、自定义组件解析路径及 `

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

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 提供模板内联诊断（如 `

1、打开 VSCode 设置，搜索 Volar: Template Diagnostic。

2、将该设置值改为 false。

3、确保已安装并启用 eslint-plugin-vue 及其推荐规则集。