推荐的 Vue 代码规范，以及 ESLlint 配置及其说明

#Vue 代码规范

---

必须遵守的规范

​

事件名必须以中划线命名

'vue/custom-event-name-casing': 'error'

示例

<template>
	<!-- ✓ GOOD -->
	<button @click="$emit('my-event')" />
	
	<!-- ✗ BAD -->
	<button @click="$emit('myEvent')" />
</template>

<script>
export default {
	methods: {
		onClick () {
	      	/* ✓ GOOD */
	      	this.$emit('my-event')
		      this.$emit('update:myProp', myProp)
	
	      	/* ✗ BAD */
		      this.$emit('myEvent')
		}
	}
}

不允许在 watch 中使用箭头函数

'vue/no-arrow-functions-in-watch': 'error'

不允许在计算属性中使用异步函数

'vue/no-async-in-computed-properties': 'error'

禁止重复声明属性

'vue/no-dupe-keys': 'error'

禁止 if-else-if 中出现相同的判断条件

'vue/no-dupe-v-else-if': 'error' 

不允许出现重复的属性绑定，比如组件已经声明了普通属性 class, 就不允许再声明 v-bind: class

'vue/no-duplicate-attributes': 'error'

应该是禁止修改 props 的值

'vue/no-mutating-props': 'error'

该规则尝试通过解析

'vue/no-parsing-error': 'error'

此规则报告 ref 被错误地用作操作数的情况。必须使用 .value 来访问 Ref 值

vue/no-ref-as-operand

禁止覆盖保留字（覆盖内置属性）

'vue/no-reserved-keys': 'error'

禁止组件的 data 属性直接声明为对象，必须声明为函数，返回一个新的对象

'vue/no-shared-component-data': 'error'

禁止在计算属性中对属性修改

'vue/no-side-effects-in-computed-properties': 'error'

标签中不允许包裹文本，必须使用 v-model 绑定 value

'vue/no-textarea-mustache': 'error'

示例

// ×
<textarea>{{ text }}</textarea>

// √
<textarea v-model="text"></textarea>

不允许注册多余的组件（注册但是又没有在 template 中使用）

vue/no-unused-components

不允许在 v-for 或其他作用域内声明一些不使用的变量

'vue/no-unused-vars': 'error'

不允许在同一个组件上同时使用 v-if 和 v-for 指令

'vue/no-use-v-if-with-v-for': 'error'

props 的数据类型取值必须是构造函数

'vue/require-prop-type-constructor': 'error'

render 函数必须有返回值

'vue/require-render-return': 'error'

v-for 指令的元素必须有 v-bind:key

'vue/require-v-for-key': 'error'

检测 props 默认值与值类型是否匹配

'vue/require-valid-default-prop': 'error'

计算属性必须有返回值

'vue/return-in-computed-property': 'error'

当一个节点上出现两个同类型事件绑定时（例如两个 v-on:click） 时，其中一个必须有 .exact 修饰

'vue/use-v-on-exact': 'error'

template 的根节点必须合法

'vue/valid-template-root': 'error'

下面所有的指令要求指令的值符合正常操作，即值应当是指令所要求的值类型，不能赋予奇奇怪怪的值类型，也不允许奇奇怪怪的指令修饰符，具体的有兴趣就看 eslint-plugin-vue 的文档

• 'vue/valid-v-bind
• 'vue/valid-v-cloak
• 'vue/valid-v-else-if
• vue/valid-v-else
• vue/valid-v-for
• vue/valid-v-html
• vue/valid-v-if
• vue/valid-v-is
• vue/valid-v-model
• vue/valid-v-on
• vue/valid-v-once
• vue/valid-v-pre
• vue/valid-v-show
• vue/valid-v-slot
• vue/valid-v-text

推荐的规范

规定组件上的自定义属性命名以中划线命名 ( 例如 data-name )

"vue/attribute-hyphenation": "warn"

元素的属性的等号前后不允许有空格，即不允许

"vue/no-spaces-around-equal-signs-in-attribute": "warn"

一个文件只允许包含一个组件

"vue/one-component-per-file": "error"

props 属性命名规范，此处选择驼峰命名法

"vue/prop-name-casing": ["warn", "camelCase"]

非必填的 props 属性也应该有默认值

"vue/require-default-prop": "warn"

props 属性必须声明数据类型

"vue/require-prop-types": "error"

v-bind 建议使用简写

"vue/v-bind-style": ["warn", "shorthand"]

v-on 建议使用简写

"vue/v-on-style": ["warn", "shorthand"]

---

下面是针对 vue 3.x 的规则

vue 组件的 data 属性只允许是一个函数，v2.x 中 data 可以是对象

'vue/no-deprecated-data-object-declaration': 'error'

示例

const app = new Vue({
	data () {
	    return {
		    apiKey: 'a1b2c3'
		}
	}
})

不允许使用 deprecated destroyed 和 beforeDestroy 生命周期钩子(在vue.js 3.0.0+中)

'vue/no-deprecated-destroyed-lifecycle': 'error'

不允许使用不赞成的 $listeners (在Vue.js 3.0.0+中)

'vue/no-deprecated-dollar-listeners-api': 'error'

不允许使用已弃用的 $scopedslot (在Vue.js 3.0.0+中)

'vue/no-deprecated-dollar-scopedslots-api': 'error'

不允许使用不支持的事件 api (在Vue.js 3.0.0+中)

'vue/no-deprecated-events-api': 'error'

不允许使用不赞成的过滤器语法 (在Vue.js 3.0.0+中)

'vue/no-deprecated-filter': 'error'

不允许使用已弃用的 functional 模板 (在Vue.js 3.0.0+中)

'vue/no-deprecated-functional-template': 'error'

不允许在HTML元素上使用已弃用的 is 属性(在Vue.js 3.0.0+中)

'vue/no-deprecated-html-element-is': 'error'

不允许使用不支持的 inline-template 属性(在Vue.js 3.0.0+中)

'vue/no-deprecated-inline-template': 'error'

禁止在 props 的默认值函数中访问 this

'vue/no-deprecated-props-default-this': 'error'

禁用已弃用的 scope 属性(在Vue.js 2.5.0+中)

'vue/no-deprecated-scope-attribute': 'error'

不允许使用已弃用的 slot 属性(在Vue.js 2.6.0+中)

'vue/no-deprecated-slot-attribute': 'error'

不允许使用已弃用的 slot-scope 属性(在Vue.js 2.6.0+中)

'vue/no-deprecated-slot-scope-attribute': 'error'

不允许在 v-bind 指令上使用已弃用的 .sync 修饰符(在vuei .js 3.0.0+中)

'vue/no-deprecated-v-bind-sync': 'error'

不允许使用不推荐的 .native 修饰符(在Vue.js 3.0.0+中)

'vue/no-deprecated-v-on-native-modifier': 'error'

不允许使用不赞成的数字 (keyCode) 修饰符(在Vue.js 3.0.0+中)

'vue/no-deprecated-v-on-number-modifiers': 'error'

不允许使用已弃用的 Vue.config.keyCodes (在vuei .js 3.0.0+中)

'vue/no-deprecated-vue-config-keycodes': 'error'

不允许修改 props 的值

'vue/no-setup-props-destructure': 'error'

强制 $slots 应该作为函数来调用，而不是作为一个值

'vue/require-slots-as-functions': 'error'

v-for 下的子元素必须有 key 属性

'vue/no-v-for-template-key-on-child': 'error'

应该是说 watch 函数应该是同步函数

'vue/no-watch-after-await': 'error'

禁止无意义的 包裹，即被包裹的元素并没有 display 切换

'vue/require-toggle-inside-transition': 'error'

$emit 函数必须要有返回？

'vue/return-in-emits-validator': 'error'