VSCode的Vetur vs Volar：Vue开发者该如何选择？_网络技术

发布时间 - 2025-12-30 00:00:00 点击率：次

应优先选择Volar用于Vue 3.2+项目，Vetur仅适用于Vue 2.7；需禁用Vetur主服务并启用Volar的TS插件，混合项目可通过工作区配置按目录切换扩展。

如果您正在使用 VSCode 开发 Vue 应用，可能会在 Vetur 和 Volar 两个扩展之间犹豫不决。这两个工具都提供语法高亮、代码补全和模板校验等功能，但底层实现与 Vue 版本适配存在显著差异。以下是针对不同开发场景的多种选择方案：

本文运行环境：MacBook Air，macOS Sequoia。

一、依据 Vue 版本决定扩展

Volar 是专为 Vue 3 的 Composition API 和 `

1、打开 VSCode 的扩展面板，搜索 “Volar”。

2、确认扩展作者为 “Vue Language Features (Volar)” 并安装。

3、在 VSCode 设置中搜索 “vetur”，将 “Vetur: Enable” 设为 false。

4、重启 VSCode，确保 Vue 单文件组件中的 `

Volar 内置了独立的 TypeScript 语言服务插件，可绕过默认 TS Server，直接解析 `

1、在项目根目录创建 vue-tsc.json 文件，并写入 `{ "compilerOptions": { "types": ["vue"] } }`。

2、通过终端执行 npm install -D vue-tsc 安装类型检查工具。

3、在 VSCode 命令面板（Cmd+Shift+P）中输入 “Volar: Switch TS Plugin”，选择 Enable。

部分遗留项目同时包含 Vue 2 和 Vue 3 子模块，此时可借助 VSCode 的工作区设置实现按文件夹启用不同扩展。Volar 支持通过 `.vscode/settings.json` 中的 `volar.enable` 和 `vetur.enable` 配合路径排除规则进行精细控制。

1、在 Vue 2 子目录下新建 `.vscode/settings.json`。

2、写入：{"vetur.enable": true, "volar.enable": false}。

3、在 Vue 3 子目录下的同名文件中写入：{"volar.enable": true, "vetur.enable": false}。

4、确保 VSCode 已启用 “Auto Save” 模式，避免因缓存导致配置未生效。

Vetur 和 Volar 同时启用会导致语言功能重叠，引发诊断错误、跳转失效或补全缺失。VSCode 不允许两个扩展同时注册 `.vue` 文件的语言服务器，必须显式停用其中一个的主服务。

1、进入 VSCode 设置界面，切换至“Extensions”分类。

2、找到 Vetur 扩展，点击齿轮图标，选择 “Disable (Workspace)”。

3、找到 Volar 扩展，在其设置项中将 “Volar: Ignore Package JSON” 设为 false。

4、重新打开一个 `.vue` 文件，观察右下角状态栏是否显示 “Vue (Volar)” 标识。