VSCode前端Vetur插件怎么配置使用-VSCode-PHP中文网

vetur在vue 2项目中必须正确配置才能生效，核心是确认状态栏显示“vue (2.x)”、v-指令提示正常、保存缩进合理；需配files.associations、vetur.config.js指定root路径，并避免将vetur.format.defaultformatter.html设为prettier，应使用js-beautify-html并配置wrap_attributes为force-expand-multiline。

vscode前端vetur插件怎么配置使用

Vetur 在 Vue 2 项目里能用，但默认配置下容易格式化错乱、模板补全失效、全局组件不识别——核心问题不在装没装插件，而在 vetur.config.js 和 settings.json 里那几行关键配置有没有对上你的项目结构和 Vue 版本。

怎么确认 Vetur 正在生效而不是“假装在工作”

打开一个 .vue 文件，观察三件事：

左下角状态栏是否显示 Vue (2.x) 或 Vue (3.x)（不是 HTML）
<template></template> 区域里输入 v- 是否弹出 v-if/v-for 等提示
保存时是否自动调整缩进，而不是把每个属性都换行塞成“竖排简历”

如果任意一条失败，大概率是 files.associations 没配，或 package.json 缺失导致 Vetur 无法识别 Vue 版本。别急着调格式化选项，先解决这个基础判断。

为什么 `vetur.format.defaultFormatter.html` 不能直接设为 `prettier`

Vue 2 的模板语法（比如 v-bind:foo="bar"、@click.native）在 Prettier 2.0+ 里支持不完整，强行设成 prettier 会导致：

v-model.lazy 被错误拆成多行
带括号的表达式如 {{ foo?.bar() }} 格式化后报错
<transition-group></transition-group> 内部子元素缩进错乱

正确做法是保持默认的 js-beautify-html，再通过 vetur.format.defaultFormatterOptions 控制行为：

{
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 180,
      "wrap_attributes": "force-expand-multiline",
      "end_with_newline": false
    }
  }
}

注意：wrap_attributes 设为 force-expand-multiline 才能避免单行塞满所有属性；设 auto 在 Vue 2 下经常失效。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

`vetur.config.js` 必须写，尤其当项目有 `src/views` 或 `packages/`

VS Code 默认只认项目根目录，但 Vue 2 项目常把源码放在 src 子目录下，不显式声明会导致：

自定义组件路径（如 @/components/Modal.vue）无法被补全
<router-link></router-link> 等内置组件标黄警告
TS 类型提示在 <script></script> 里断掉

在项目根目录新建 vetur.config.js，内容必须包含 root：

module.exports = {
  projects: [
    {
      root: './src',
      // 如果用了 TypeScript，加上 tsconfig 路径
      // tsconfig: './tsconfig.json'
    }
  ]
}

Monorepo 项目（如 packages/ui + packages/app）要列全路径，不能只写 ./packages/* —— Vetur 不支持 glob 匹配。

Vue 2 项目里 `editor.formatOnSave` 开关要谨慎

开启 editor.formatOnSave 后，Vetur 会每次保存都重跑整个文件格式化，但 Vue 2 的 js-beautify-html 引擎对嵌套 v-if/v-for 处理不稳定，常见症状：

保存后 <div v-if="loading"><span>{{ text }}</span></div> 变成三行，中间空一行
scoped style 里的 & 选择器被错误删掉
多层 <slot></slot> 嵌套后缩进错位

建议方案：

开发时关掉："editor.formatOnSave": false
需要格式化时手动触发：Ctrl+Shift+P → 输入 Format Document → 选 Vetur
或者只对特定区块格式化：选中 <template></template> 内容后按 Ctrl+K Ctrl+F

真正容易被忽略的是：Vetur 的格式化逻辑依赖 package.json 里的 vue 版本字段。如果项目用的是 vue@2.7.16，但 package.json 里写的是 "vue": "^2.6.0"，Vetur 可能降级启用 Vue 2.6 兼容模式，导致 defineComponent 类型推导失效 —— 这个坑不会报错，只会让类型提示悄悄消失。