51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落
当前位置：工具盒子 > 经验分享 > 正文

Eslint-Plugin-Vue

2024-10-29 分类：经验分享 阅读(21) 评论(0)

# Eslint-Plugin-Vue {#eslint-plugin-vue}

# ESLint Vue 插件 - 规则总览 {#eslint-vue-插件-规则总览}

# 图例 {#图例}

  • ℹ️ ------ 点击此图标可以访问每条规则对应的 ESLint Vue 插件官方文档。
  • 🔯 ------ 表示当前规则与同名的 ESLint 规则功能相当，不过其作用范围是 Vue 组件的 <template> 内的表达式。点击此图标可以访问同名的 ESLint 规则的文档。
  • 🛠️️ ------ 表示此规则可自动修复。

# 基础规则 {#基础规则}

点击查看 rule--base-rules.js 代码

module.exports = {
	'vue/comment-directive': [2],
	'vue/jsx-uses-vars': [2],
}

令 ESLint 正确解析 Vue 组件。（这些规则的作用不是检查代码，而是为插件做准备工作。）

# 'vue/comment-directive': [2] ^ℹ️ (opens new window)^ {#vue-comment-directive-2-i️}

[模板] 令 <template> 内也支持 ESLint 的注释指令。

# 'vue/jsx-uses-vars': [2] ^ℹ️ (opens new window)^ {#vue-jsx-uses-vars-2-i️}

[脚本] 令 JSX 中用到的变量不会被标记为未使用。

# 优先级 A {#优先级-a}

点击查看 rule--priority-a.js 代码

module.exports = {
	'vue/no-async-in-computed-properties': [2],
	'vue/no-dupe-keys': [2],
	'vue/no-duplicate-attributes': [2, { allowCoexistClass: true, allowCoexistStyle: true }],
	'vue/no-parsing-error': [2],
	'vue/no-reserved-keys': [2],
	'vue/no-shared-component-data': [2],
	'vue/no-side-effects-in-computed-properties': [2],
	'vue/no-template-key': [2],
	'vue/no-textarea-mustache': [2],
	'vue/no-unused-components': [2],
	'vue/no-unused-vars': [2],
	'vue/no-use-v-if-with-v-for': [2],
	'vue/require-component-is': [2],
	'vue/require-prop-type-constructor': [2],
	'vue/require-render-return': [2],
	'vue/require-v-for-key': [2],
	'vue/require-valid-default-prop': [2],
	'vue/return-in-computed-property': [2],
	'vue/use-v-on-exact': [2],
	'vue/valid-template-root': [2],
	'vue/valid-v-bind': [2],
	'vue/valid-v-cloak': [2],
	'vue/valid-v-else-if': [2],
	'vue/valid-v-else': [2],
	'vue/valid-v-for': [2],
	'vue/valid-v-html': [2],
	'vue/valid-v-if': [2],
	'vue/valid-v-model': [2],
	'vue/valid-v-on': [2],
	'vue/valid-v-once': [2],
	'vue/valid-v-pre': [2],
	'vue/valid-v-show': [2],
	'vue/valid-v-text': [2],
}

极为重要（预防错误）

# 'vue/no-async-in-computed-properties': [2] ^ℹ️ (opens new window)^ {#vue-no-async-in-computed-properties-2-i️}

[脚本] 禁止计算属性返回一个异步值。

# 'vue/no-dupe-keys': [2] ^ℹ️ (opens new window)^ {#vue-no-dupe-keys-2-i️}

[脚本] 禁止字段发生重名。

# 'vue/no-duplicate-attributes': [2, { allowCoexistClass: true, allowCoexistStyle: true }] ^ℹ️ (opens new window)^ {#vue-no-duplicate-attributes-2-allowcoexistclass-true-allowcoexiststyle-true-i️}

[模板] 禁止模板中的组件标签内出现同名的普通属性（attr="..."）和绑定属性（:attr="..."）。不过 class 和 style 属性是允许这种重名的。

# 'vue/no-parsing-error': [2] ^ℹ️ (opens new window)^ {#vue-no-parsing-error-2-i️}

[模板] 禁止模板中出现语法错误。

# 'vue/no-reserved-keys': [2] ^ℹ️ (opens new window)^ {#vue-no-reserved-keys-2-i️}

[脚本] 禁止覆盖保留字段。

# 'vue/no-shared-component-data': [2] ^ℹ️ (opens new window) 🔧^ {#vue-no-shared-component-data-2-i️-🔧}

[脚本] 要求组件的 data 字段必须是一个函数，以避免组件共享数据发生干扰。

# 'vue/no-side-effects-in-computed-properties': [2] ^ℹ️ (opens new window)^ {#vue-no-side-effects-in-computed-properties-2-i️}

[脚本] 禁止计算属性产生副作用。

# 'vue/no-template-key': [2] ^ℹ️ (opens new window)^ {#vue-no-template-key-2-i️}

[模板] 禁止 <template> 标签出现 key 属性。

# 'vue/no-textarea-mustache': [2] ^ℹ️ (opens new window)^ {#vue-no-textarea-mustache-2-i️}

[模板] 禁止 <textarea> 内部出现插值语法。因为这个标签内部的插值不会生效，请用 v-model 来实现插值。

# 'vue/no-unused-components': [2] ^ℹ️ (opens new window)^ {#vue-no-unused-components-2-i️}

[脚本] 禁止组件已注册但未使用的情况。

# 'vue/no-unused-vars': [2] ^ℹ️ (opens new window)^ {#vue-no-unused-vars-2-i️}

[模板] 禁止 v-for 指令（或 scope attributes）中定义变量但未使用的情况。

# 'vue/no-use-v-if-with-v-for': [2] ^ℹ️ (opens new window)^ {#vue-no-use-v-if-with-v-for-2-i️}

[模板] 禁止同一元素上同时出现 v-for 和 v-if 指令。

# 'vue/require-component-is': [2] ^ℹ️ (opens new window)^ {#vue-require-component-is-2-i️}

[模板] 要求 <component> 元素必须提供 :is 属性。

# 'vue/require-prop-type-constructor': [2] ^ℹ️ (opens new window) 🔧^ {#vue-require-prop-type-constructor-2-i️-🔧}

[脚本] 要求 prop 的类型必须是构造器。

# 'vue/require-render-return': [2] ^ℹ️ (opens new window)^ {#vue-require-render-return-2-i️}

[脚本] 要求渲染函数必须有返回值。

# 'vue/require-v-for-key': [2] ^ℹ️ (opens new window)^ {#vue-require-v-for-key-2-i️}

[模板] 要求在使用 v-for 指令必须同时指定 :key。

# 'vue/require-valid-default-prop': [2] ^ℹ️ (opens new window)^ {#vue-require-valid-default-prop-2-i️}

[脚本] 要求 prop 的默认值必须符合 prop 的类型。如果 prop 类型为对象或数组，则默认值必需是一个返回对应类型值的函数。

# 'vue/return-in-computed-property': [2] ^ℹ️ (opens new window)^ {#vue-return-in-computed-property-2-i️}

[脚本] 要求计算属性必须要有显式的返回值。即使返回 undefined，也需要显式地写为 return undefined。

# 'vue/use-v-on-exact': [2] ^ℹ️ (opens new window)^ {#vue-use-v-on-exact-2-i️}

[模板] 如果元素已经有了一个加了事件修饰符的 v-on 指令，再增加 v-on 指令时，需要使用 exact 修饰符。

# 'vue/valid-template-root': [2] ^ℹ️ (opens new window)^ {#vue-valid-template-root-2-i️}

[模板] 要求模板包含一个合法的根元素。

# 'vue/valid-v-bind': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-bind-2-i️}

[模板] 要求 v-bind 指令的使用是合法的：必须提供属性值，事件修饰符必须是有效的。

# 'vue/valid-v-cloak': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-cloak-2-i️}

[模板] 要求 v-cloak 指令的使用是合法的。

# 'vue/valid-v-else-if': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-else-if-2-i️}

[模板] 要求 v-else-if 指令的使用是合法的。

# 'vue/valid-v-else': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-else-2-i️}

[模板] 要求 v-else 指令的使用是合法的。

# 'vue/valid-v-for': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-for-2-i️}

[模板] 要求 v-for 指令的使用是合法的。

# 'vue/valid-v-html': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-html-2-i️}

[模板] 要求 v-html 指令的使用是合法的。

# 'vue/valid-v-if': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-if-2-i️}

[模板] 要求 v-if 指令的使用是合法的。

# 'vue/valid-v-model': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-model-2-i️}

[模板] 要求 v-model 指令的使用是合法的。

# 'vue/valid-v-on': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-on-2-i️}

[模板] 要求 v-on 指令的使用是合法的。

# 'vue/valid-v-once': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-once-2-i️}

[模板] 要求 v-once 指令的使用是合法的。

# 'vue/valid-v-pre': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-pre-2-i️}

[模板] 要求 v-pre 指令的使用是合法的。

# 'vue/valid-v-show': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-show-2-i️}

[模板] 要求 v-show 指令的使用是合法的。

# 'vue/valid-v-text': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-text-2-i️}

[模板] 要求 v-text 指令的使用是合法的。

# 优先级 B {#优先级-b}

点击查看 rule--priority-b.js 代码

module.exports = {
	// 'vue/attribute-hyphenation': [0],
	// 'vue/html-closing-bracket-newline': [0],	// included in preset "stylistic"
	// 'vue/html-closing-bracket-spacing': [0],	// included in preset "stylistic"
	'vue/html-end-tags': [2],	// syntax rule, not a stylistic rule
	// 'vue/html-indent': [0],	// included in preset "stylistic"
	// 'vue/html-quotes': [0],	// included in preset "stylistic"
	// 'vue/html-self-closing': [0],	// included in preset "stylistic"
	// 'vue/max-attributes-per-line': [0],	// included in preset "stylistic"
	// 'vue/multiline-html-element-content-newline': [0],
	// 'vue/mustache-interpolation-spacing': [0],	// included in preset "stylistic"
	// 'vue/name-property-casing': [0],	// included in preset "stylistic"
	// 'vue/no-multi-spaces': [0],
	// 'vue/no-spaces-around-equal-signs-in-attribute': [0],	// included in preset "stylistic"
	'vue/no-template-shadow': [2],
	// 'vue/prop-name-casing': [0],	// included in preset "stylistic"
	'vue/require-default-prop': [2],
	'vue/require-prop-types': [2],
	// 'vue/singleline-html-element-content-newline': [0],
	'vue/v-bind-style': [2],
	'vue/v-on-style': [2],
}

强烈推荐（改善可读性）

# 'vue/attribute-hyphenation': [0] ^ℹ️ (opens new window) 🔧^ {#vue-attribute-hyphenation-0-i️-🔧}

[模板] [不限] 标签属性是否采用 "全小写 + 连字符" 的拼写形式。

# 'vue/html-closing-bracket-newline': [2] ^ℹ️ (opens new window) 🔧^ {#vue-html-closing-bracket-newline-2-i️-🔧}

[模板] HTML 标签的结束尖括号之前是否需要换行。

此规则的选项取官方默认值。

<!-- ✅ 单行情况下 -->
<div id="foo" class="bar">
	...
</div>

<!-- ✅ 多行情况下 -->
<div
	id="foo"
	class="bar"
>
	...
</div>

# 'vue/html-closing-bracket-spacing': [2] ^ℹ️ (opens new window) 🔧^ {#vue-html-closing-bracket-spacing-2-i️-🔧}

[模板] HTML 标签的结束尖括号之前是否需要加空格。

此规则的选项取官方默认值。

<!-- ✅ -->
<div></div>
<div foo></div>
<div foo="bar"></div>
<div />
<div foo />
<div foo="bar" />

# 'vue/html-end-tags': [2] ^ℹ️ (opens new window) 🔧^ {#vue-html-end-tags-2-i️-🔧}

[模板] 非 "空标签" 必须要有关闭标签，或自关闭。

<!-- ✅ -->
<img>
<br>
<div></div>
<MyComponent foo="bar" />

# 'vue/html-indent': [2, 'tab', { alignAttributesVertically: false }] ^ℹ️ (opens new window) 🔧^ {#vue-html-indent-2-tab-alignattributesvertically-false-i️-🔧}

[模板] HTML 代码的缩进采用 1 个 tab；标签属性不做垂直对齐；其它选项取官方默认值。

<!-- ✅ -->
<template>
	<div class="foo">
		...
	</div>

	<div id="a"
		class="foo"
	   :foo="bar"
	>
		...
	</div>

	<div
		id="b"
		class="c"
		:attr="..."
	>
		{{
			foo ? bar : baz
		}}
	</div>
</template>

# 'vue/html-quotes': [2] ^ℹ️ (opens new window) 🔧^ {#vue-html-quotes-2-i️-🔧}

[模板] HTML 标签属性需要加双引号。

# 'vue/html-self-closing': [2, { ... }] ^ℹ️ (opens new window) 🔧^ {#vue-html-self-closing-2-i️-🔧}

[模板] HTML 标签是否可使用自关闭写法：

  • HTML "空标签" 不用自关闭写法，比如 <br>。
  • 普通标签不用自关闭写法，比如 <div></div>。
  • 组件标签需要使用自关闭写法，比如 <MyComponent />。
  • SVG 标签和 MathML 标签不作要求。

# 'vue/max-attributes-per-line': [2, { ... }] ^ℹ️ (opens new window) 🔧^ {#vue-max-attributes-per-line-2-i️-🔧}

[模板] HTML 标签内最多可以把多少属性写在同一行：

  • 当标签写成一行时，最多可以写 3 个属性。

  • 当标签写成多行时，每行只能写 1 个属性。

在起始标签的同一行，可以写一个属性（比如下面这段代码的 id="foo" 属性）：

<!-- 🆗  -->
<div id="foo"
	class="bar"
	@click="onClick"
	foobar="1"
></div>

# 'vue/multiline-html-element-content-newline': [0] ^ℹ️ (opens new window) 🔧^ {#vue-multiline-html-element-content-newline-0-i️-🔧}

[模板] [不限] 标签书写为多行时，是否需要在内容的头尾换行。

# 'vue/mustache-interpolation-spacing': [2] ^ℹ️ (opens new window) 🔧^ {#vue-mustache-interpolation-spacing-2-i️-🔧}

[模板] 插值语法的双花括号内侧是否需要加空格。

此规则的选项取官方默认值（要加空格）。

# 'vue/name-property-casing': [2] ^ℹ️ (opens new window) 🔧^ {#vue-name-property-casing-2-i️-🔧}

[脚本] 指定组件名的拼写形式。

此规则的选项取官方默认值（PascalCase）。

# 'vue/no-multi-spaces': [0] ^ℹ️ (opens new window) 🔧^ {#vue-no-multi-spaces-0-i️-🔧}

[模板] [不限] 是否禁止出现连续的多个空格，此规则也影响模板内的 JS 表达式。

# 'vue/no-spaces-around-equal-signs-in-attribute': [2] ^ℹ️ (opens new window) 🔧^ {#vue-no-spaces-around-equal-signs-in-attribute-2-i️-🔧}

[模板] 标签属性的等号前后是否加空格。

此规则的选项取官方默认值（不加空格）。

# 'vue/no-template-shadow': [2] ^ℹ️ (opens new window)^ {#vue-no-template-shadow-2-i️}

[模板] 禁止变量遮蔽（即内层作用域变量与外层作用域变量重名）。

# 'vue/prop-name-casing': [2] ^ℹ️ (opens new window)^ {#vue-prop-name-casing-2-i️}

[脚本] 指定 Vue 组件 prop 的大小写拼写形式。

此规则的选项取官方默认值（camelCase）。

# 'vue/require-default-prop': [2] ^ℹ️ (opens new window)^ {#vue-require-default-prop-2-i️}

[脚本] 要求 Vue 组件 prop 必须提供默认值（布尔型 prop 除外）。

# 'vue/require-prop-types': [2] ^ℹ️ (opens new window)^ {#vue-require-prop-types-2-i️}

[脚本] 要求 Vue 组件 prop 必须声明类型。

# 'vue/singleline-html-element-content-newline': [0] ^ℹ️ (opens new window) 🔧^ {#vue-singleline-html-element-content-newline-0-i️-🔧}

[模板] [不限] 标签书写为单行时，是否需要在内容的头尾换行。

# 'vue/v-bind-style': [2] ^ℹ️ (opens new window) 🔧^ {#vue-v-bind-style-2-i️-🔧}

[模板] 指定 v-bind 指令是否采用简写。

此规则的选项取官方默认值（简写）。

# 'vue/v-on-style': [2] ^ℹ️ (opens new window) 🔧^ {#vue-v-on-style-2-i️-🔧}

[模板] 指定 v-on 指令是否采用简写。

此规则的选项取官方默认值（简写）。

# 优先级 C {#优先级-c}

点击查看 rule--priority-c.js 代码

module.exports = {
	// 'vue/attributes-order': [0],	// included in preset "recommended"
	'vue/no-v-html': [2],
	// 'vue/order-in-components': [0],	// included in preset "recommended"
	'vue/this-in-template': [2],
}

推荐（减少主观选择和认知负担）

# 'vue/attributes-order': [2] ^ℹ️ (opens new window) 🔧^ {#vue-attributes-order-2-i️-🔧}

[模板] 指定组件标签属性的书写顺序。

此规则的选项取官方默认值（遵循 官方风格指南 (opens new window)）。

# 'vue/no-v-html': [2] ^ℹ️ (opens new window)^ {#vue-no-v-html-2-i️}

[模板] 禁用 v-html 指令，避免 XSS 隐患。

# 'vue/order-in-components': [2] ^ℹ️ (opens new window) 🔧^ {#vue-order-in-components-2-i️-🔧}

[脚本] 指定 Vue 组件各属性的书写顺序。

此规则的选项取官方默认值（遵循 官方风格指南 (opens new window)）。

# 'vue/this-in-template': [2] ^ℹ️ (opens new window)^ {#vue-this-in-template-2-i️}

[模板] 是否在模板中禁用 this。

此规则的选项取官方默认值（禁用）。

# 未分类规则 {#未分类规则}

点击查看 rule--_stylistic.js 代码

module.exports = {
	// priority-b
	'vue/html-closing-bracket-newline': [2],
	'vue/html-closing-bracket-spacing': [2],
	'vue/html-indent': [2, 'tab', { alignAttributesVertically: false }],
	'vue/html-quotes': [2],
	'vue/html-self-closing': [2, {
		html: {
			void: 'never',
			normal: 'never',
			component: 'always',
		},
		svg: 'any',
		math: 'any',
	}],
	'vue/max-attributes-per-line': [2, {
		singleline: 3,
		multiline: {
			max: 1,
			allowFirstLine: true,
		},
	}],
	'vue/mustache-interpolation-spacing': [2],
	'vue/name-property-casing': [2],
	'vue/no-spaces-around-equal-signs-in-attribute': [2],
	'vue/prop-name-casing': [2],

	// uncategorized
	'vue/array-bracket-spacing': [2],
	'vue/arrow-spacing': [2],
	'vue/block-spacing': [2],
	'vue/brace-style': [2, '1tbs', { allowSingleLine: true }],
	'vue/camelcase': [2, {
		properties: 'never',
		ignoreDestructuring: true,
		allow: ['^\\$_[a-z]+([A-Z][a-z]*)*'],
	}],
	// 'vue/comma-dangle': [2, 'always-multiline'],	// disabled due to its auto-fix bug
	'vue/dot-location': [2, 'property'],
	'vue/key-spacing': [2, {
		singleLine: {},
		multiLine: { mode: 'minimum' }
	}],
	'vue/keyword-spacing': [2],
	'vue/match-component-file-name': [2, { extensions: ['vue'], shouldMatchCase: true }],
	'vue/object-curly-spacing': [2, 'always'],
	'vue/script-indent': [2, 'tab', { baseIndent: 0, switchCase: 1 }],
	'vue/space-infix-ops': [2],
	'vue/space-unary-ops': [2, { words: true, nonwords: false }],
}

# 'vue/array-bracket-spacing': [2] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-array-bracket-spacing-2-i️-🔯-🔧}

[模板] 数组中括号的内侧不加空格。

# 'vue/arrow-spacing': [2] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-arrow-spacing-2-i️-🔯-🔧}

[模板] 箭头函数的箭头前后需要加空格。

# 'vue/block-spacing': [2] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-block-spacing-2-i️-🔯-🔧}

[模板] 代码块的花括号内侧需要加空格。

# 'vue/brace-style': [2, '1tbs', { allowSingleLine: true }] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-brace-style-2-1tbs-allowsingleline-true-i️-🔯-🔧}

[模板] 指定花括号的书写风格。

# 'vue/camelcase': [2, { ... }] ^ℹ️ (opens new window) 🔯 (opens new window)^ {#vue-camelcase-2-i️-🔯}

[模板] 要求变量名必须采用驼峰拼写，不得采用 snake_case。不过，解构语法中的属性名是允许 snake_case 的；对象的属性名是允许 snake_case 的；Vue 插件在 Vue 原型上绑定的方法名可以使用 $_camelCase。

# 'vue/comma-dangle': [2, 'always-multiline'] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-comma-dangle-2-always-multiline-i️-🔯-🔧}

[模板] 在由逗号分隔的列表（数组字面量、对象字面量、函数参数列表、模块导入导出清单等）中，结尾是否写逗号。

由于此条规则的 auto fix 实现存在明显 bug，民愤极大，暂时关闭。

# 'vue/component-name-in-template-casing': [0] ^ℹ️ (opens new window) 🔧^ {#vue-component-name-in-template-casing-0-i️-🔧}

[模板] [不限] 指定组件名在书写为标签时采用何种大小写形式。

# 'vue/dot-location': [2, 'property'] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-dot-location-2-property-i️-🔯-🔧}

[模板] 当点操作符反生换行时，跟着属性（出现在行首），而不是跟着对象（出现在行尾）。

# 'vue/eqeqeq': [2, 'always'] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-eqeqeq-2-always-i️-🔯-🔧}

[模板] 禁用 "非严格比较"（== 和 !=）。

# 'vue/key-spacing': [2] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-key-spacing-2-i️-🔯-🔧}

[模板] 指定对象字面量中属性名和属性值之间是否加空格：冒号前不加空格，冒号后加空格。

当对象字面量写成多行时，允许在冒号后使用连续多个空格来纵向对齐属性值。

# 'vue/keyword-spacing': [2] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-keyword-spacing-2-i️-🔯-🔧}

[模板] 指定关键字前后是否加空格。

此规则的选项取 ESLint 默认值（前后都加）。

# 'vue/match-component-file-name': [2, { extensions: ['vue'], shouldMatchCase: true }] ^ℹ️ (opens new window)^ {#vue-match-component-file-name-2-extensions-vue-shouldmatchcase-true-i️}

[组件] 检查脚本声明的组件名是否与文件名匹配；大小写也需要完全匹配。

# 'vue/no-boolean-default': [2] ^ℹ️ (opens new window) 🔧^ {#vue-no-boolean-default-2-i️-🔧}

[脚本] 禁止布尔型的 prop 提供默认值。

# 'vue/no-deprecated-scope-attribute': [2] ^ℹ️ (opens new window) 🔧^ {#vue-no-deprecated-scope-attribute-2-i️-🔧}

[模板] 禁用已经被弃用的 scope 属性。需要替换为 slot-scope（适用于 Vue.js v2.5）或 v-slot（适用于 Vue.js v2.6+）。

# 'vue/no-empty-pattern': [2] ^ℹ️ (opens new window) 🔯 (opens new window)^ {#vue-no-empty-pattern-2-i️-🔯}

[模板] 禁止在解构中出现无意义的解构模式。

# 'vue/no-restricted-syntax': [0] ^ℹ️ (opens new window) 🔯 (opens new window)^ {#vue-no-restricted-syntax-0-i️-🔯}

[模板] [不限] 禁止使用某些指定的语法。

# 'vue/object-curly-spacing': [2, 'always'] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-object-curly-spacing-2-always-i️-🔯-🔧}

[模板] 对象的花括号内侧需要加空格。不过空对象字面量（{}）除外。

# 'vue/require-direct-export': [2] ^ℹ️ (opens new window)^ {#vue-require-direct-export-2-i️}

[脚本] 脚本代码必须是直接的模块导出。

# 'vue/script-indent': [2, 'tab', { baseIndent: 0, switchCase: 1 }] ^ℹ️ (opens new window) 🔧^ {#vue-script-indent-2-tab-baseindent-0-switchcase-1-i️-🔧}

[组件] 指定 <script> 标签内的缩进风格：

  • 采用一个 tab 作为缩进。
  • switch 内的 case 子句缩进一级。
  • <script> 标签内的 JS 代码与 <script> 标签平齐，不需要缩进一级。（与 ESLint 的 "indent" 规则 (opens new window) 相比，增加了这个功能。）

# 'vue/space-infix-ops': [2] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-space-infix-ops-2-i️-🔯-🔧}

[模板] 中缀运算符前后加空格。

# 'vue/space-unary-ops': [2, {words: true, nonwords: false }] ^ℹ️ (opens new window) 🔯 (opens new window) 🔧^ {#vue-space-unary-ops-2-words-true-nonwords-false-i️-🔯-🔧}

[模板] 指定一元操作符与操作数之间是否加空格。

# 'vue/v-on-function-call': [0] ^ℹ️ (opens new window) 🔧^ {#vue-v-on-function-call-0-i️-🔧}

[模板] [不限] 在 v-on 指令中，是否允许出现无参数的方法调用。

我们希望这条规则可以达到如下约束效果：

<!-- ⛔ -->
<button @click="onClick()">...</button>

<!-- ✅ -->
<button @click="onClick">...</button>
<!-- ✅ -->
<button @click="onClick(foo, bar)">...</button>

然而可惜的是，目前这条规则无法区分方法名和表达式，一律要求末尾不加括号，这是不符合预期的。只能暂时关掉。

# 'vue/v-slot-style': [0] ^ℹ️ (opens new window) 🔧^ {#vue-v-slot-style-0-i️-🔧}

[模板] [不限] 指定 v-slot 指令的风格。此规则暂不启用。

# 'vue/valid-v-slot': [2] ^ℹ️ (opens new window)^ {#vue-valid-v-slot-2-i️}

[模板] 检查 v-slot 指令是否合法。

赞(4)
未经允许不得转载：工具盒子 » Eslint-Plugin-Vue
标签：

厉飞雨

众生皆苦，唯有自渡！

相关推荐

最新文章

猜你喜欢

快捷分类

云服务器 日常运维 在线免费 开源工具 科学上网 开发笔记 区块链 白嫖帮 新视野 人工智能 网赚思路 Python笔记 Php笔记 Java笔记 链知识 币知识 IOS笔记 Android笔记 Mysql C语言笔记 前端开发 R笔记 Go笔记 mybatis笔记 Golang笔记 数据库 市场营销 软件教程 vps Rust笔记 软件使用 经验分享 Stable Diffusion chatgpt Midjourney 操作系统 Photoscape 加密货币 挖矿 Coze Meta 网络安全 网络运营 开源软件 Github ComfyUI 数字人 Docker笔记 Claude Oracle web3 linux windows mac redis git笔记 nginx kafka maven spring RocketMQ Zabbix ubuntu centos kubesphere ffmpeg jenkins hbase JavaScript笔记 WordPress nginx Hadoop vuejs mongo SQL Server PostgreSQL SQLite ElasticSearch Spark netty zookeeper RabbitMQ ClickHoust cocos2d gradle tomcat Markdown MinIO react Hexo git intellij idea android studio svn C++ spdlog nodejs C WordPress 宝塔面板 vim shell logstash 软件渗透 NeoDB CSS3 HTML Lua笔记 数据算法 嵌入式 debian 红帽RHEL Neo4j