#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 版权协议,转载请附上原文出处链接和本声明。