可用规则
标记指示规则类型
- ⚠️ 可能的问题：这些规则与代码中可能的逻辑错误有关。
- 🔨 建议：这些规则建议了其他做事方式。
- 💄 布局和格式：这些规则关心代码的外观，而不是代码如何执行。
基本规则（启用正确的 ESLint 解析）
此类别中的规则对 eslint-plugin-vue 提供的所有预设均启用。
| 规则 ID | 描述 | ||
|---|---|---|---|
| vue/comment-directive | 在 <template> 中支持注释指令 | ⚠️ | |
| vue/jsx-uses-vars | 防止将 JSX 中使用的变量标记为未使用 | ⚠️ |
优先级 A：基本（错误预防）
- 3️⃣ 表示该规则适用于 Vue 3，并且包含在所有
"plugin:vue/vue3-essential"、*.configs["flat/essential"]、"plugin:vue/vue3-strongly-recommended"、*.configs["flat/strongly-recommended"]、"plugin:vue/vue3-recommended"和*.configs["flat/recommended"]预设中。 - 2️⃣ 表示该规则适用于 Vue 2，并且包含在所有
"plugin:vue/essential"、*.configs["flat/vue2-essential"]、"plugin:vue/strongly-recommended"、*.configs["flat/vue2-strongly-recommended"]和"plugin:vue/recommended"、*.configs["flat/vue2-recommended"]预设中。
| 规则 ID | 描述 | ||
|---|---|---|---|
| vue/multi-word-component-names | 要求组件名称始终为多单词 | 3️⃣2️⃣🔨 | |
| vue/no-arrow-functions-in-watch | 禁止使用箭头函数定义侦听器 | 3️⃣2️⃣⚠️ | |
| vue/no-async-in-computed-properties | 禁止在计算属性中使用异步操作 | 3️⃣2️⃣⚠️ | |
| vue/no-child-content | 禁止元素的子内容被指令（如 v-html 或 v-text）覆盖 | 💡 | 3️⃣2️⃣⚠️ |
| vue/no-computed-properties-in-data | 禁止在 data 中访问计算属性。 | 3️⃣2️⃣⚠️ | |
| vue/no-custom-modifiers-on-v-model | 禁止在组件上使用的 v-model 上使用自定义修饰符 | 2️⃣⚠️ | |
| vue/no-deprecated-data-object-declaration | 禁止在 data 上使用已弃用的对象声明（在 Vue.js 3.0.0+ 中） | 🔧 | 3️⃣⚠️ |
| vue/no-deprecated-destroyed-lifecycle | 禁止使用已弃用的 destroyed 和 beforeDestroy 生命周期钩子（在 Vue.js 3.0.0+ 中） | 🔧 | 3️⃣⚠️ |
| vue/no-deprecated-dollar-listeners-api | 禁止使用已弃用的 $listeners（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-dollar-scopedslots-api | 禁止使用已弃用的 $scopedSlots（在 Vue.js 3.0.0+ 中） | 🔧 | 3️⃣⚠️ |
| vue/no-deprecated-events-api | 禁止使用已弃用的事件 API（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-filter | 禁止使用已弃用的过滤器语法（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-functional-template | 禁止使用已弃用的 functional 模板（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-html-element-is | 禁止在 HTML 元素上使用已弃用的 is 属性（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-inline-template | 禁止使用已弃用的 inline-template 属性（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-props-default-this | 禁止在 props 默认函数中使用已弃用的 this 访问（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-router-link-tag-prop | 禁止在 RouterLink 上使用已弃用的 tag 属性（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-scope-attribute | 禁止使用已弃用的 scope 属性（在 Vue.js 2.5.0+ 中） | 🔧 | 3️⃣🔨 |
| vue/no-deprecated-slot-attribute | 禁止使用已弃用的 slot 属性（在 Vue.js 2.6.0+ 中） | 🔧 | 3️⃣🔨 |
| vue/no-deprecated-slot-scope-attribute | 禁止使用已弃用的 slot-scope 属性（在 Vue.js 2.6.0+ 中） | 🔧 | 3️⃣🔨 |
| vue/no-deprecated-v-bind-sync | 禁止在 v-bind 指令上使用已弃用的 .sync 修饰符（在 Vue.js 3.0.0+ 中） | 🔧 | 3️⃣⚠️ |
| vue/no-deprecated-v-is | 禁止使用已弃用的 v-is 指令（在 Vue.js 3.1.0+ 中） | 3️⃣🔨 | |
| vue/no-deprecated-v-on-native-modifier | 禁止使用已弃用的 .native 修饰符（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-deprecated-v-on-number-modifiers | 禁止使用已弃用的数字（键码）修饰符（在 Vue.js 3.0.0+ 中） | 🔧 | 3️⃣⚠️ |
| vue/no-deprecated-vue-config-keycodes | 禁止使用已弃用的 Vue.config.keyCodes（在 Vue.js 3.0.0+ 中） | 3️⃣⚠️ | |
| vue/no-dupe-keys | 禁止字段名称重复 | 3️⃣2️⃣⚠️ | |
| vue/no-dupe-v-else-if | 禁止在 v-if / v-else-if 链中重复条件 | 3️⃣2️⃣⚠️ | |
| vue/no-duplicate-attributes | 禁止属性重复 | 3️⃣2️⃣⚠️ | |
| vue/no-export-in-script-setup | 禁止在 <script setup> 中使用 export | 3️⃣2️⃣⚠️ | |
| vue/no-expose-after-await | 禁止异步注册 expose | 3️⃣⚠️ | |
| vue/no-lifecycle-after-await | 禁止异步注册生命周期钩子 | 3️⃣🔨 | |
| vue/no-multiple-template-root | 禁止向模板添加多个根节点 | 2️⃣⚠️ | |
| vue/no-mutating-props | 禁止修改组件 props | 3️⃣2️⃣🔨 | |
| vue/no-parsing-error | 禁止在 <template> 中出现解析错误 | 3️⃣2️⃣⚠️ | |
| vue/no-ref-as-operand | 禁止将 ref()（组合式 API）包装的值用作操作数 | 🔧 | 3️⃣2️⃣🔨 |
| vue/no-reserved-component-names | 禁止在组件定义中使用保留名称 | 3️⃣2️⃣🔨 | |
| vue/no-reserved-keys | 禁止覆盖保留键 | 3️⃣2️⃣🔨 | |
| vue/no-reserved-props | 禁止在 props 中使用保留名称 | 3️⃣2️⃣⚠️ | |
| vue/no-shared-component-data | 强制组件的 data 属性为函数 | 🔧 | 3️⃣2️⃣⚠️ |
| vue/no-side-effects-in-computed-properties | 禁止在计算属性中产生副作用 | 3️⃣2️⃣⚠️ | |
| vue/no-template-key | 禁止在 <template> 上使用 key 属性 | 3️⃣2️⃣⚠️ | |
| vue/no-textarea-mustache | 禁止在 <textarea> 中使用插值表达式 | 3️⃣2️⃣⚠️ | |
| vue/no-unused-components | 禁止注册未在模板中使用的组件 | 3️⃣2️⃣🔨 | |
| vue/no-unused-vars | 禁止 v-for 指令或作用域属性的变量定义未使用 | 💡 | 3️⃣2️⃣🔨 |
| vue/no-use-computed-property-like-method | 禁止像方法一样使用计算属性 | 3️⃣2️⃣⚠️ | |
| vue/no-use-v-if-with-v-for | 禁止在与 v-for 相同的元素上使用 v-if | 3️⃣2️⃣🔨 | |
| vue/no-useless-template-attributes | 禁止在 <template> 上使用无用属性 | 3️⃣2️⃣⚠️ | |
| vue/no-v-for-template-key-on-child | 禁止将 <template v-for> 的 key 属性放置在子元素上 | 3️⃣⚠️ | |
| vue/no-v-for-template-key | 禁止在 <template v-for> 上使用 key 属性 | 2️⃣⚠️ | |
| vue/no-v-model-argument | 禁止向自定义组件中使用的 v-model 添加参数 | 2️⃣⚠️ | |
| vue/no-v-text-v-html-on-component | 禁止在组件上使用 v-text / v-html | 3️⃣2️⃣⚠️ | |
| vue/no-watch-after-await | 禁止异步注册 watch | 3️⃣🔨 | |
| vue/prefer-import-from-vue | 强制从 'vue' 导入而不是从 '@vue/*' 导入 | 🔧 | 3️⃣🔨 |
| vue/require-component-is | 要求 <component> 元素使用 v-bind:is | 3️⃣2️⃣⚠️ | |
| vue/require-prop-type-constructor | 要求 prop 类型为构造函数 | 🔧 | 3️⃣2️⃣🔨 |
| vue/require-render-return | 强制渲染函数始终返回值 | 3️⃣2️⃣⚠️ | |
| vue/require-slots-as-functions | 强制将 $slots 的属性用作函数 | 3️⃣⚠️ | |
| vue/require-toggle-inside-transition | 要求控制 <transition> 内的内容显示 | 3️⃣⚠️ | |
| vue/require-v-for-key | 要求在 v-for 指令中使用 v-bind:key | 3️⃣2️⃣⚠️ | |
| vue/require-valid-default-prop | 强制 props 默认值为有效值 | 3️⃣2️⃣🔨 | |
| vue/return-in-computed-property | 强制在计算属性中存在 return 语句 | 3️⃣2️⃣⚠️ | |
| vue/return-in-emits-validator | 强制在 emits 验证器中存在 return 语句 | 3️⃣2️⃣⚠️ | |
| vue/use-v-on-exact | 强制在 v-on 上使用 exact 修饰符 | 3️⃣2️⃣🔨 | |
| vue/valid-attribute-name | 要求有效的属性名称 | 3️⃣2️⃣⚠️ | |
| vue/valid-define-emits | 强制有效的 defineEmits 编译器宏 | 3️⃣2️⃣⚠️ | |
| vue/valid-define-props | 强制有效的 defineProps 编译器宏 | 3️⃣2️⃣⚠️ | |
| vue/valid-model-definition | 要求 model 选项中的键有效 | 2️⃣⚠️ | |
| vue/valid-next-tick | 强制有效的 nextTick 函数调用 | 🔧💡 | 3️⃣2️⃣⚠️ |
| vue/valid-template-root | 强制有效的模板根 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-bind-sync | 强制在 v-bind 指令上使用有效的 .sync 修饰符 | 2️⃣⚠️ | |
| vue/valid-v-bind | 强制有效的 v-bind 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-cloak | 强制有效的 v-cloak 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-else-if | 强制有效的 v-else-if 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-else | 强制有效的 v-else 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-for | 强制有效的 v-for 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-html | 强制有效的 v-html 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-if | 强制有效的 v-if 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-is | 强制有效的 v-is 指令 | 3️⃣⚠️ | |
| vue/valid-v-memo | 强制有效的 v-memo 指令 | 3️⃣⚠️ | |
| vue/valid-v-model | 强制有效的 v-model 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-on | 强制有效的 v-on 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-once | 强制有效的 v-once 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-pre | 强制有效的 v-pre 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-show | 强制有效的 v-show 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-slot | 强制有效的 v-slot 指令 | 3️⃣2️⃣⚠️ | |
| vue/valid-v-text | 强制有效的 v-text 指令 | 3️⃣2️⃣⚠️ |
优先级 B：强烈推荐（提高可读性）
- 3️⃣ 表示该规则适用于 Vue 3，并且包含在所有
"plugin:vue/vue3-strongly-recommended"、*.configs["flat/strongly-recommended"]、"plugin:vue/vue3-recommended"和*.configs["flat/recommended"]预设中。 - 2️⃣ 表示该规则适用于 Vue 2，并且包含在
"plugin:vue/strongly-recommended"、*.configs["flat/vue2-strongly-recommended"]和"plugin:vue/recommended"、*.configs["flat/vue2-recommended"]预设中。
优先级 C：推荐（潜在危险模式）
- 3️⃣ 表示该规则适用于 Vue 3，并且包含在
"plugin:vue/vue3-recommended"和*.configs["flat/recommended"]预设中。 - 2️⃣ 表示该规则适用于 Vue 2，并且包含在
"plugin:vue/recommended"、*.configs["flat/vue2-recommended"]预设中。
| 规则 ID | 描述 | ||
|---|---|---|---|
| vue/attributes-order | 强制属性顺序 | 🔧 | 3️⃣2️⃣🔨 |
| vue/component-tags-order | 强制组件顶级元素的顺序 | 🔧🚫 | 3️⃣2️⃣🔨 |
| vue/no-lone-template | 禁止不必要的 <template> | 3️⃣2️⃣⚠️ | |
| vue/no-multiple-slot-args | 禁止向作用域插槽传递多个参数 | 3️⃣2️⃣⚠️ | |
| vue/no-v-html | 禁止使用 v-html 以防止 XSS 攻击 | 3️⃣2️⃣🔨 | |
| vue/order-in-components | 强制组件中属性的顺序 | 🔧💡 | 3️⃣2️⃣🔨 |
| vue/this-in-template | 禁止在模板中使用 this | 🔧 | 3️⃣2️⃣🔨 |
未分类
没有预设启用此类别中的规则。如果需要，请启用每个规则。
例如
json
{
"rules": {
"vue/block-lang": "error"
}
}扩展规则
以下规则扩展了 ESLint 本身提供的规则，并将它们应用于 <template> 中的表达式。
| 规则 ID | 描述 | ||
|---|---|---|---|
| vue/array-bracket-newline | 强制在 <template> 中的数组括号后换行，并在闭合括号前换行 | 🔧 | 💄 |
| vue/array-bracket-spacing | 强制 <template> 中数组括号内的间距一致 | 🔧 | 💄 |
| vue/array-element-newline | 强制 <template> 中每个数组元素后换行 | 🔧 | 💄 |
| vue/arrow-spacing | 强制 <template> 中箭头函数的箭头前后间距一致 | 🔧 | 💄 |
| vue/block-spacing | 禁止或强制在 <template> 中的块内，在左大括号后和右大括号前添加空格 | 🔧 | 💄 |
| vue/brace-style | 强制 <template> 中块的大括号风格一致 | 🔧 | 💄 |
| vue/camelcase | 强制 <template> 中使用驼峰命名法 | 🔨 | |
| vue/comma-dangle | 要求或禁止在 <template> 中使用尾随逗号 | 🔧 | 💄 |
| vue/comma-spacing | 强制 <template> 中逗号前后间距一致 | 🔧 | 💄 |
| vue/comma-style | 强制 <template> 中的逗号风格一致 | 🔧 | 💄 |
| vue/dot-location | 强制 <template> 中点号前后换行一致 | 🔧 | 💄 |
| vue/dot-notation | 在 <template> 中尽可能强制使用点号 | 🔧 | 🔨 |
| vue/eqeqeq | 要求在 <template> 中使用 === 和 !== | 🔧 | 🔨 |
| vue/func-call-spacing | 要求或禁止在 <template> 中的函数标识符与其调用之间添加空格 | 🔧 | 💄 |
| vue/key-spacing | 强制 <template> 中对象字面量属性的键和值之间间距一致 | 🔧 | 💄 |
| vue/keyword-spacing | 强制 <template> 中关键字前后间距一致 | 🔧 | 💄 |
| vue/max-len | 强制 .vue 文件中的最大行长度 | 💄 | |
| vue/multiline-ternary | 强制 <template> 中三元表达式操作数之间换行 | 🔧 | 💄 |
| vue/no-console | 禁止在 <template> 中使用 console | 💡 | 🔨 |
| vue/no-constant-condition | 禁止在 <template> 中的条件语句中使用常量表达式 | ⚠️ | |
| vue/no-empty-pattern | 禁止在 <template> 中使用空解构模式 | ⚠️ | |
| vue/no-extra-parens | 禁止在 <template> 中使用不必要的圆括号 | 🔧 | 💄 |
| vue/no-irregular-whitespace | 禁止在 .vue 文件中使用不规则空格 | ⚠️ | |
| vue/no-loss-of-precision | 禁止在 <template> 中使用会丢失精度的字面量数字 | ⚠️ | |
| vue/no-restricted-syntax | 禁止在 <template> 中使用指定的语法 | 🔨 | |
| vue/no-sparse-arrays | 禁止在 <template> 中使用稀疏数组 | ⚠️ | |
| vue/no-useless-concat | 禁止在 <template> 中对字面量或模板字面量进行不必要的拼接 | 🔨 | |
| vue/object-curly-newline | 强制 <template> 中大括号后换行，并在闭合括号前换行 | 🔧 | 💄 |
| vue/object-curly-spacing | 强制 <template> 中大括号内的间距一致 | 🔧 | 💄 |
| vue/object-property-newline | 强制 <template> 中将对象属性放在不同的行上 | 🔧 | 💄 |
| vue/object-shorthand | 要求或禁止在 <template> 中的对象字面量中使用方法和属性的简写语法 | 🔧 | 🔨 |
| vue/operator-linebreak | 强制 <template> 中运算符的换行风格一致 | 🔧 | 💄 |
| vue/prefer-template | 要求在 <template> 中使用模板字面量而不是字符串拼接 | 🔧 | 🔨 |
| vue/quote-props | 要求 <template> 中的对象字面量属性名使用引号 | 🔧 | 💄 |
| vue/space-in-parens | 强制 <template> 中圆括号内的间距一致 | 🔧 | 💄 |
| vue/space-infix-ops | 要求 <template> 中的中缀运算符周围添加空格 | 🔧 | 💄 |
| vue/space-unary-ops | 强制 <template> 中的一元运算符前后间距一致 | 🔧 | 💄 |
| vue/template-curly-spacing | 要求或禁止在 <template> 中的模板字符串嵌入表达式周围添加空格 | 🔧 | 💄 |
已弃用
- 🚫 我们将在下一个主要版本中移除已弃用的规则。请迁移到后续/新规则。
- 😇 我们不会修复已弃用规则中的错误，因为我们没有足够的资源。
已移除
- ⛔ 这些规则在之前的某个主要版本中已被移除，此前它们已被弃用了一段时间。