Vetur已停止维护,Vue 3项目应迁移到Volar;Vue 2项目可安装Vetur实现基础支持,但需正确配置文件关联为vue语言模式并避免ts类型报错。

VSCode 安装 Vetur 插件本身很简单,但真正影响 Vue 开发体验的,是它和项目配置、Vue 版本、TypeScript 支持之间的配合。Vetur 在 Vue 3 + setup + TypeScript 项目中默认行为可能不生效,甚至报错 Cannot find name 'defineProps' 或 Property 'xxx' does not exist on type 'ComponentPublicInstance' —— 这不是插件没装好,而是配置没对上。
在 VSCode 扩展市场搜索并安装 Vetur
Vetur 已于 2023 年底停止维护,官方推荐迁移到 Volar(尤其 Vue 3 项目)。但如果你仍在维护 Vue 2 项目,或需快速启用基础语法高亮/模板补全,Vetur 仍可工作:
- 打开 VSCode,点击左侧扩展图标(或按
Ctrl+Shift+X) - 搜索框输入
Vetur,认准发布者为octref的官方插件 - 点击「Install」,安装后**无需重启 VSCode**,但需确保当前打开的是一个含
.vue文件的文件夹 - 装完后打开任意
.vue文件,应看到区域有 HTML 补全,区域有 JavaScript 语法支持
Vetur 不生效?检查文件关联和语言模式
常见现象:打开 .vue 文件,右下角显示「Plain Text」或「HTML」,而不是「Vue」——这时 Vetur 完全不会启动。
- 点击 VSCode 右下角语言模式标识(如「Plain Text」),选择「Configure File Association for '.vue'」
- 在弹出的下拉菜单中选
vue(不是html或javascript) - 也可手动在用户设置中添加:
"files.associations": { "*.vue": "vue" } - 如果项目已存在
.vscode/settings.json,确认里面没有覆盖该配置,例如误写"files.associations": {"*.vue": "html"}
Vue 3 项目强烈建议换用 Volar,而非强行用 Vetur
Vetur 对 Composition API(尤其是 defineProps、defineEmits)缺乏类型推导支持,且与 Vue 3 的响应式系统、TSX 支持存在根本性兼容问题。
立即学习“前端免费学习笔记(深入)”;
- 卸载 Vetur:在扩展面板中找到它,点击「Uninstall」
- 安装
Volar(发布者Vue)和Volar Server(自动随 Volar 安装) - 禁用 Vetur 的旧版语言服务器:在 VSCode 设置中搜
volar.enable,勾选Volar: Enable,取消勾选Vetur: Enable - 若项目使用
defineProps<...>()语法,还需在tsconfig.json中启用"compilerOptions": { "types": ["vue"] }
额外注意:Vetur 的 vetur.validation.template 已被弃用
老教程常让你在 settings.json 里加:
"vetur.validation.template": true。这个选项在 Vetur v0.35+ 后已失效,实际由内置的
vue-eslint-parser 控制。若需模板校验,应配 eslint-plugin-vue + ESLint 插件,而不是依赖 Vetur。
真正容易被忽略的是:Vetur 的代码片段(如输入 v-for 回车生成完整结构)只在语言模式为 vue 且文件后缀为 .vue 时触发;如果用 .jsx 或 .tsx 写 Vue 组件,它完全不工作——这时候得靠 Volar 或纯 TypeScript 配置。









