Vue 规则

eslint-plugin-vue 是 Vue 官方推荐的规则集。它专注于 Vue 单文件组件（.vue文件）的特定规则，来确保Vue组件的正确性和最佳实践。

@vue/eslint-config-airbnb-with-typescript 是 Airbnb 风格指南的 Vue 和 TypeScript 版本。它将 Airbnb 久经考验的 JavaScript 和 TypeScript 最佳实践应用于 Vue 项目。

提示

参看 Vue Style Guide

// .eslintrc.js
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  extends: [
    'plugin:vue/recommended',
    '@vue/eslint-config-airbnb-with-typescript', 
    // '@vue/eslint-config-airbnb-with-typescript/allow-tsx-in-vue',
    'plugin:vue-scoped-css/vue3-recommended',
  ],
};

注意

• 由于上游依赖关系，@vue/eslint-config-airbnb-with-typescript 仍不支持 ESLint 9.x 版本，使用时请注意。使用时请使用 ESLint 8.x 版本，后续请及时关注版本变化。
• 根据项目实际情况，决定是否开启 tsx 支持。

基础规则 JavaScript

规则名称	错误级别	配置选项	描述
import/extensions	error	["ignorePackages", { js: "never", mjs: "never", jsx: "never", vue: "always" }]	强制文件扩展名规范
import/no-extraneous-dependencies	error	{ devDependencies: [...] }	禁止引入无关依赖
jsx-quotes	error	"prefer-double"	强制JSX属性使用双引号
react/jsx-boolean-value	error	["never", { always: [] }]	禁止布尔属性显式值
react/jsx-closing-bracket-location	error	"line-aligned"	闭合括号对齐规则
react/jsx-closing-tag-location	error	-	闭合标签位置校验
react/jsx-curly-spacing	error	["never", { allowMultiline: true }]	禁止大括号内空格
react/jsx-indent-props	error	2	JSX属性缩进2空格
react/jsx-max-props-per-line	error	{ maximum: 1, when: "multiline" }	每行最多1个属性（多行时）
react/jsx-no-bind	error	{ ignoreRefs: false, allowArrowFunctions: true }	禁止JSX中不必要的函数绑定
react/jsx-no-duplicate-props	error	{ ignoreCase: true }	禁止重复属性
react/jsx-pascal-case	error	{ allowAllCaps: true, ignore: [] }	强制组件帕斯卡命名
vue/jsx-uses-vars	error	-	防止JSX变量未使用
vue/comment-directive	error	-	强制Vue注释指令格式
vue/require-render-return	error	-	要求render函数返回内容
react/self-closing-comp	error	-	强制自闭合组件格式
react/jsx-wrap-multilines	error	{ declaration: "parens-new-line" }	多行JSX包裹格式
react/jsx-first-prop-new-line	error	"multiline-multiprop"	多属性换行格式
react/jsx-equals-spacing	error	"never"	禁止等号周围空格
react/jsx-indent	error	2	JSX缩进2空格
react/jsx-no-target-blank	error	{ allowReferrer: true }	安全空白target校验
react/jsx-filename-extension	error	{ extensions: [".jsx", ".vue"] }	限制JSX文件扩展名
react/jsx-no-comment-textnodes	error	-	禁止注释作为文本节点
react/style-prop-object	error	-	强制style属性为对象
react/no-unescaped-entities	error	-	禁止未转义HTML实体
react/no-children-prop	error	-	禁止直接传递children属性
react/jsx-tag-spacing	error	{ closingSlash: "never" }	标签空格规范
react/no-array-index-key	error	-	禁止数组索引作为key
react/void-dom-elements-no-children	error	-	禁止void元素包含子元素
react/jsx-curly-brace-presence	error	{ props: "never" }	禁止不必要的大括号
react/jsx-one-expression-per-line	error	{ allow: "single-child" }	每行单个表达式
react/button-has-type	error	{ reset: false }	强制按钮类型声明
react/jsx-props-no-multi-spaces	error	-	禁止属性多个空格
react/jsx-fragments	error	"syntax"	强制使用简写片段语法
react/jsx-curly-newline	error	{ multiline: "consistent" }	大括号换行一致性
react/jsx-props-no-spreading	error	{ html: "enforce" }	限制属性展开使用
react/jsx-no-script-url	error	-	禁止javascript: URL
react/jsx-no-useless-fragment	error	-	禁止不必要的片段
react/no-namespace	error	-	禁止命名空间组件
react/no-invalid-html-attribute	error	-	禁止无效HTML属性
jsx-a11y/accessible-emoji	off	-	禁用表情可访问性校验
jsx-a11y/alt-text	error	{ elements: [...] }	强制替代文本
jsx-a11y/anchor-has-content	error	{ components: [] }	锚点必须包含内容
jsx-a11y/anchor-is-valid	error	{ components: ["Link"] }	锚点有效性校验
jsx-a11y/aria-activedescendant-has-tabindex	error	-	activeDescendant需要tabindex
jsx-a11y/aria-props	error	-	校验合法ARIA属性
jsx-a11y/aria-proptypes	error	-	ARIA属性类型校验
jsx-a11y/aria-role	error	{ ignoreNonDOM: false }	校验合法ARIA角色
jsx-a11y/aria-unsupported-elements	error	-	禁止不支持ARIA的元素
jsx-a11y/autocomplete-valid	off	-	禁用自动完成校验
jsx-a11y/click-events-have-key-events	error	-	点击事件需对应键盘事件
jsx-a11y/control-has-associated-label	error	{ ignoreElements: [...] }	控件需关联标签
jsx-a11y/heading-has-content	error	{ components: [""] }	标题必须包含内容
jsx-a11y/iframe-has-title	error	-	iframe必须包含标题
jsx-a11y/interactive-supports-focus	error	-	交互元素需可聚焦
jsx-a11y/label-has-associated-control	off	-	禁用标签关联控件校验
jsx-a11y/media-has-caption	error	{ audio: [] }	媒体元素需包含字幕
jsx-a11y/mouse-events-have-key-events	error	-	鼠标事件需对应键盘事件
jsx-a11y/no-access-key	error	-	禁止使用accessKey
jsx-a11y/no-autofocus	error	{ ignoreNonDOM: true }	禁止自动聚焦
jsx-a11y/no-distracting-elements	error	{ elements: [...] }	禁止干扰性元素
jsx-a11y/no-interactive-element-to-noninteractive-role	error	{ tr: [...] }	交互元素角色限制
jsx-a11y/no-noninteractive-element-interactions	error	{ handlers: [...] }	非交互元素事件限制
jsx-a11y/no-noninteractive-element-to-interactive-role	error	{ ul: [...] }	角色转换限制
jsx-a11y/no-noninteractive-tabindex	error	{ roles: [...] }	非交互元素tabindex限制
jsx-a11y/no-onchange	off	-	禁用onChange校验
jsx-a11y/no-redundant-roles	error	-	禁止冗余ARIA角色
jsx-a11y/role-has-required-aria-props	error	-	角色需必要ARIA属性
jsx-a11y/role-supports-aria-props	error	-	ARIA属性与角色匹配
jsx-a11y/scope	error	-	scope属性限制
jsx-a11y/tabindex-no-positive	error	-	禁止正数tabindex
vue/max-len	error	[100, 2, { ignoreUrls: true }]	行最大长度限制
vue/html-indent	error	[2, { attribute: 1 }]	HTML缩进规则
vue/max-attributes-per-line	error	{ multiline: { max: 1 } }	每行最大属性数
vue/no-duplicate-attributes	error	{ allowCoexistClass: true }	禁止重复属性
vue/html-self-closing	error	{ html: { void: "any" } }	自闭合标签规则
vue/first-attribute-linebreak	error	{ multiline: "below" }	首属性换行规则
vue/no-spaces-around-equal-signs-in-attribute	error	-	属性等号无空格
vue/no-template-target-blank	error	{ allowReferrer: true }	安全target="_blank"校验
vue/no-child-content	error	-	禁止子内容
vue/html-closing-bracket-spacing	error	{ selfClosingTag: "always" }	闭合括号空格规则
vue/html-button-has-type	error	{ reset: false }	按钮类型声明
vue/no-multi-spaces	error	-	禁止多个空格
vuejs-accessibility/alt-text	error	{ elements: [...] }	可访问性替代文本
vuejs-accessibility/anchor-has-content	error	{ components: [] }	锚点内容校验
vuejs-accessibility/aria-props	error	-	ARIA属性校验
vuejs-accessibility/aria-role	error	{ ignoreNonDOM: false }	ARIA角色校验
vuejs-accessibility/aria-unsupported-elements	error	-	不支持ARIA的元素校验
vuejs-accessibility/click-events-have-key-events	error	-	点击事件键盘支持
vuejs-accessibility/form-control-has-label	error	-	表单控件标签关联
vuejs-accessibility/heading-has-content	error	-	标题内容校验
vuejs-accessibility/iframe-has-title	error	-	iframe标题校验
vuejs-accessibility/interactive-supports-focus	error	-	交互元素聚焦支持
vuejs-accessibility/label-has-for	error	{ required: { some: [...] } }	标签关联控件
vuejs-accessibility/media-has-caption	error	-	媒体字幕校验
vuejs-accessibility/mouse-events-have-key-events	error	-	鼠标事件键盘支持
vuejs-accessibility/no-access-key	error	-	禁止accessKey
vuejs-accessibility/no-autofocus	error	{ ignoreNonDOM: true }	禁止自动聚焦
vuejs-accessibility/no-distracting-elements	error	{ elements: [...] }	禁止干扰元素
vuejs-accessibility/no-onchange	off	-	禁用onChange校验
vuejs-accessibility/no-redundant-roles	error	-	禁止冗余角色
vuejs-accessibility/role-has-required-aria-props	error	-	角色必要属性校验
vuejs-accessibility/tabindex-no-positive	error	-	禁止正数tabindex
vue/require-default-prop	error	-	要求默认prop值
vue/no-potential-component-option-typo	error	-	组件选项拼写校验

基础规则 Vue

规则名称	错误级别	配置选项	描述
vue/comment-directive	error	-	强制 Vue 模板注释指令（如 <!-- eslint-disable -->）的正确使用，避免 ESLint 解析冲突。
vue/jsx-uses-vars	error	-	防止在 Vue JSX 中使用的变量被 ESLint 误判为未使用，需配合变量引用检测。

优先级 A：必要的

规则名称	错误级别	配置选项	描述
vue/multi-word-component-names	error	-	强制组件名使用多单词，避免与HTML元素冲突
vue/no-arrow-functions-in-watch	error	-	禁止在watch中使用箭头函数（避免this指向问题）
vue/no-async-in-computed-properties	error	-	禁止在计算属性中使用异步操作
vue/no-child-content	error	-	禁止子组件使用content属性（已废弃）
vue/no-computed-properties-in-data	error	-	禁止在data中引用计算属性
vue/no-deprecated-data-object-declaration	error	-	禁止使用已弃用的data对象声明方式
vue/no-deprecated-delete-set	error	-	禁止使用Vue.delete/Vue.set（Vue 3已内置）
vue/no-deprecated-destroyed-lifecycle	error	-	禁止使用已弃用的destroyed生命周期钩子（改用unmounted）
vue/no-deprecated-dollar-listeners-api	error	-	禁止使用已弃用的$listeners API
vue/no-deprecated-dollar-scopedslots-api	error	-	禁止使用已弃用的$scopedSlots API
vue/no-deprecated-events-api	error	-	禁止使用已弃用的events API（Vue 3已移除）
vue/no-deprecated-filter	error	-	禁止使用已弃用的过滤器（Vue 3移除）
vue/no-deprecated-functional-template	error	-	禁止使用已弃用的函数式模板语法
vue/no-deprecated-html-element-is	error	-	禁止使用已弃用的is属性语法（如<div is="...">）
vue/no-deprecated-inline-template	error	-	禁止使用已弃用的inline-template属性
vue/no-deprecated-model-definition	error	-	禁止使用Vue 2风格的model选项定义
vue/no-deprecated-props-default-this	error	-	禁止在props的default函数中使用this
vue/no-deprecated-router-link-tag-prop	error	-	禁止使用已弃用的<router-link>的tag属性
vue/no-deprecated-scope-attribute	error	-	禁止使用已弃用的scope属性（改用slot-scope）
vue/no-deprecated-slot-attribute	error	-	禁止使用已弃用的slot属性（改用v-slot）
vue/no-deprecated-slot-scope-attribute	error	-	禁止使用已弃用的slot-scope属性（改用v-slot）
vue/no-deprecated-v-bind-sync	error	-	禁止使用已弃用的.sync修饰符（Vue 3改用v-model参数）
vue/no-deprecated-v-is	error	-	禁止使用已弃用的v-is指令（改用is属性）
vue/no-deprecated-v-on-native-modifier	error	-	禁止使用已弃用的.native修饰符（Vue 3移除）
vue/no-deprecated-v-on-number-modifiers	error	-	禁止在v-on指令中使用数字修饰符（如v-on:keyup.13）
vue/no-deprecated-vue-config-keycodes	error	-	禁止使用已弃用的Vue.config.keyCodes
vue/no-dupe-keys	error	-	禁止在对象属性中重复键名
vue/no-dupe-v-else-if	error	-	禁止重复的v-else-if条件
vue/no-duplicate-attributes	error	-	禁止重复的属性声明
vue/no-export-in-script-setup	error	-	禁止在<script setup>中使用export
vue/no-expose-after-await	error	-	禁止在await后使用expose
vue/no-lifecycle-after-await	error	-	禁止在await后调用生命周期钩子
vue/no-mutating-props	error	-	禁止直接修改props
vue/no-parsing-error	error	-	禁止模板解析错误
vue/no-ref-as-operand	error	-	禁止将ref直接作为操作数（需用.value）
vue/no-reserved-component-names	error	-	禁止使用保留的组件名（如HTML/SVG标签名）
vue/no-reserved-keys	error	-	禁止使用保留的键名（如$el、$props等）
vue/no-reserved-props	error	-	禁止使用保留的props名称（如key、ref等）
vue/no-shared-component-data	error	-	禁止组件间共享数据对象（应使用函数返回）
vue/no-side-effects-in-computed-properties	error	-	禁止计算属性产生副作用
vue/no-template-key	error	-	禁止在<template>上使用key属性
vue/no-textarea-mustache	error	-	禁止在<textarea>中使用双花括号插值
vue/no-unused-components	error	-	禁止注册未使用的组件
vue/no-unused-vars	error	-	禁止声明未使用的变量
vue/no-use-computed-property-like-method	error	-	禁止像方法一样使用计算属性
vue/no-use-v-if-with-v-for	error	-	禁止在同一元素上同时使用v-if和v-for
vue/no-useless-template-attributes	error	-	禁止无效的模板属性（如非响应式属性）
vue/no-v-for-template-key-on-child	error	-	禁止在子组件上使用v-for的key
vue/no-v-text-v-html-on-component	error	-	禁止在组件上使用v-text/v-html
vue/no-watch-after-await	error	-	禁止在await后调用watch
vue/prefer-import-from-vue	error	-	强制从vue导入API（而非直接访问Vue）
vue/require-component-is	error	-	强制<component>元素使用is属性
vue/require-prop-type-constructor	error	-	强制props类型使用构造函数（如String而非'string'）
vue/require-render-return	error	-	强制render函数返回内容
vue/require-slots-as-functions	error	-	强制插槽以函数形式声明（兼容Vue 3）
vue/require-toggle-inside-transition	error	-	强制在<transition>内使用v-show/v-if
vue/require-v-for-key	error	-	强制v-for使用key属性
vue/require-valid-default-prop	error	-	强制props的default函数返回有效值
vue/return-in-computed-property	error	-	强制计算属性必须有return语句
vue/return-in-emits-validator	error	-	强制emits验证函数返回布尔值
vue/use-v-on-exact	error	-	强制使用.exact修饰符处理精确按键事件
vue/valid-attribute-name	error	-	强制属性名有效性（如不含空格）
vue/valid-define-emits	error	-	强制defineEmits宏的正确使用
vue/valid-define-options	error	-	强制defineOptions宏的正确使用
vue/valid-define-props	error	-	强制defineProps宏的正确使用
vue/valid-next-tick	error	-	强制nextTick的正确使用
vue/valid-template-root	error	-	强制模板根元素有效性（单元素/组件）
vue/valid-v-bind	error	-	强制v-bind指令语法正确性
vue/valid-v-cloak	error	-	强制v-cloak指令无参数/值
vue/valid-v-else-if	error	-	强制v-else-if必须跟在v-if后
vue/valid-v-else	error	-	强制v-else必须跟在v-if/v-else-if后
vue/valid-v-for	error	-	强制v-for指令语法正确性
vue/valid-v-html	error	-	强制v-html指令无参数
vue/valid-v-if	error	-	强制v-if指令语法正确性
vue/valid-v-is	error	-	强制v-is指令语法正确性
vue/valid-v-memo	error	-	强制v-memo指令语法正确性
vue/valid-v-model	error	-	强制v-model指令语法正确性
vue/valid-v-on	error	-	强制v-on指令语法正确性
vue/valid-v-once	error	-	强制v-once指令无参数/值
vue/valid-v-pre	error	-	强制v-pre指令无参数/值
vue/valid-v-show	error	-	强制v-show指令语法正确性
vue/valid-v-slot	error	-	强制v-slot指令语法正确性
vue/valid-v-text	error	-	强制v-text指令无参数

优先级 B：强烈推荐

规则名称	错误级别	配置选项	描述
vue/attribute-hyphenation	warn	-	强制组件属性名使用连字符格式（kebab-case）
vue/component-definition-name-casing	warn	-	强制组件定义名称的大小写（默认 PascalCase）
vue/first-attribute-linebreak	warn	-	控制第一个属性的换行位置
vue/html-closing-bracket-newline	warn	-	强制闭合标签的括号换行格式
vue/html-closing-bracket-spacing	warn	-	强制闭合标签括号内外的空格规则
vue/html-end-tags	warn	-	要求 HTML 标签必须有闭合标签
vue/html-indent	warn	-	统一 HTML 元素的缩进规则
vue/html-quotes	warn	-	强制 HTML 属性值使用双引号
vue/html-self-closing	warn	-	强制自闭合标签的格式（无内容时自动闭合）
vue/max-attributes-per-line	warn	-	限制每行允许的最大属性数量
vue/multiline-html-element-content-newline	warn	-	多行 HTML 元素内容前后需要换行
vue/mustache-interpolation-spacing	warn	-	强制 Mustache 插值内的空格规则
vue/no-multi-spaces	warn	-	禁止模板中出现连续多个空格
vue/no-spaces-around-equal-signs-in-attribute	warn	-	属性等号周围禁止空格
vue/no-template-shadow	warn	-	禁止模板内变量与父作用域变量同名（避免遮蔽）
vue/one-component-per-file	warn	-	每个文件只能包含一个组件
vue/prop-name-casing	warn	-	强制 Prop 名称的格式（默认 camelCase）
vue/require-default-prop	warn	-	要求 Prop 必须有默认值
vue/require-explicit-emits	warn	-	要求 emits 选项中明确声明触发的事件
vue/require-prop-types	warn	-	要求 Prop 必须定义类型
vue/singleline-html-element-content-newline	warn	-	单行 HTML 元素内容前后禁止换行
vue/v-bind-style	warn	-	强制 v-bind 指令的简写或完整格式
vue/v-on-event-hyphenation	warn	"always", { autofix: true }	强制事件名使用连字符格式（kebab-case）
vue/v-on-style	warn	-	强制 v-on 指令的简写或完整格式
vue/v-slot-style	warn	-	强制 v-slot 指令的格式（默认缩写为 #）

优先级 C：推荐

规则名称	错误级别	配置选项	描述
vue/attributes-order	warn	-	强制组件属性的顺序
vue/block-order	warn	-	强制模板中块级元素的顺序
vue/no-lone-template	warn	-	禁止没有内容的空模板标签
vue/no-multiple-slot-args	warn	-	禁止在作用域插槽中使用多个参数
vue/no-required-prop-with-default	warn	-	禁止在必需属性中设置默认值
vue/no-v-html	warn	-	禁止使用潜在危险的v-html指令
vue/order-in-components	warn	-	强制组件选项的顺序
vue/this-in-template	warn	-	禁止在模板中使用this上下文

Scoped CSS

eslint-plugin-vue-scoped-css 是一个用于检查和强制规范 Vue 单文件组件中作用域 CSS（<style scoped>）写法。

规则名称	错误级别	配置选项	描述
vue-scoped-css/enforce-style-type	warn	-	强制 <style> 标签的 scoped 属性使用特定类型（如 scoped 或 module）
vue-scoped-css/no-deprecated-deep-combinator	warn	-	禁止使用已弃用的深度选择器语法（如 >>> 或 /deep/），推荐使用 ::v-deep
vue-scoped-css/no-parent-of-v-global	warn	-	禁止在 ::v-global 伪类外再包裹其他选择器（因为 ::v-global 本身不应被限定在父选择器内）
vue-scoped-css/no-parsing-error	warn	-	禁止由 vue-scoped-css 插件无法解析的 CSS 语法错误
vue-scoped-css/no-unused-keyframes	warn	-	禁止定义未使用的 @keyframes 动画
vue-scoped-css/no-unused-selector	warn	-	禁止在 scoped 样式中定义未使用的选择器（这些选择器不会匹配任何元素）
vue-scoped-css/require-v-deep-argument	warn	-	要求 ::v-deep 必须带有参数（例如 ::v-deep(.child)），除非用作组合器
vue-scoped-css/require-v-global-argument	warn	-	要求 ::v-global 必须带有参数（例如 ::v-global(.global-class)）
vue-scoped-css/require-v-slotted-argument	warn	-	要求 ::v-slotted 必须带有参数（例如 ::v-slotted(.slot-class)）