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

  • Post author:
  • Post category:vue


#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'



版权声明:本文为zhu562002124原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。