VSCode与Vue 3：Volar插件的最佳实践

需禁用Vetur并启用Volar，配置TS插件、volar.config.json、别名路径解析，关闭Volar模板诊断以避免ESLint冲突。

如果您在使用 vscode 编辑 vue 3 项目时遇到类型提示缺失、模板语法高亮异常或 `

本文运行环境：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 语言服务，但需显式启用以支持 `

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

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

2、将该设置值改为 false。

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