Vue 代码风格指南

命名规范

统一使用短横线分隔的小写字母(kebab-case)命名规范

属于组件或类的,统一使用大驼峰(UpperCamelCase)命名规范

其他非组件或类的,统一使用小写字母开头的(kebab-case)命名规范

展开node_modules中的项目依赖,会发现几乎所有的项目文件夹命名都是 kebab-case命名的,使用kebab-case命名的文件

例：my-component.vue

vue/attributes-order

标签属性必须按规则排序

// bad

// good

vue/comment-directive

支持在模版中使用 eslint-disable-next-line 等注释

// bad

// good

vue/eqeqeq

必须使用 === 或 !==，禁止使用 == 或 !=

// bad
<template>
  <div :attr="foo == 1"/>
</template>

// good
<template>
  <div :attr="foo === 1"/>
</template>

vue/jsx-uses-vars

已定义的 jsx element 必须使用

// bad

// good

vue/no-async-in-computed-properties

计算属性禁止包含异步方法

// bad

// good

vue/no-duplicate-attributes

禁止出现重复的属性

// bad

// good

vue/no-parsing-error

禁止出现语法错误

// bad
<template>
  <div>{{ message. }}</div>
</template>

// good
<template>
  <div>{{ message }}</div>
</template>

vue/no-reserved-keys

禁止覆盖保留字

// bad

// good

vue/no-textarea-mustache

禁止在 <textarea> 中出现 Mustache 语法

// bad

// good

vue/no-unused-components

禁止定义在 components 中的组件未使用

// bad

// good

vue/no-unused-vars

模版中已定义的变量必须使用

// bad

// good

vue/no-use-v-if-with-v-for

禁止在同一个元素上使用 v-if 和 v-for 指令

// bad

// good

vue/order-in-components

组件的属性必须为一定的顺序

// bad

// good

vue/require-component-is

<component> 必须有 v-bind:is

// bad

// good

vue/require-default-prop

props 如果不是 required 的字段，必须有默认值

// bad

// good

vue/require-direct-export

禁止手动 export default

// bad

// good

vue/require-prop-type-constructor

props 的取值必须是构造函数

// bad

// good

vue/require-render-return

render 函数必须有返回值

// bad

// good

vue/require-v-for-key

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

// bad

// good

vue/return-in-computed-property

计算属性必须有返回值

// bad

// good

vue/this-in-template

禁止在模版中用 this

// bad

// good

vue/use-v-on-exact

当一个节点上出现两个 v-on:click 时，其中一个必须为 exact

// bad

// good

vue/v-on-function-call

禁止在 v-on 的值中调用函数

// bad

// good

vue/valid-template-root

template 的根节点必须合法

// bad

// good

vue/valid-v-bind

v-bind 指令必须合法

// bad
<template>
  <div>
    <div v-bind></div>
    <div :aaa></div>
    <div v-bind:aaa.bbb="foo"></div>
  </div>
</template>

// good
<template>
  <div>
    <div v-bind="foo"></div>
    <div v-bind:aaa="foo"></div>
    <div :aaa="foo"></div>
    <div :aaa.prop="foo"></div>
  </div>
</template>

vue/valid-v-cloak

v-cloak 指令必须合法

// bad

// good

vue/valid-v-else

v-else 指令必须合法

// bad

// good

vue/valid-v-else-if

v-else-if 指令必须合法

// bad

// good

vue/valid-v-for

v-for 指令必须合法

// bad

// good

vue/valid-v-html

v-html 指令必须合法

// bad

// good

vue/valid-v-if

v-if 指令必须合法

// bad

// good

vue/valid-v-model

v-model 指令必须合法

// bad

// good

vue/valid-v-on

v-on 指令必须合法

// bad

// good

vue/valid-v-once

v-once 指令必须合法

// bad

// good

vue/valid-v-pre

v-pre 指令必须合法

// bad

// good

vue/valid-v-show

v-show 指令必须合法

// bad

// good

vue/valid-v-text

v-text 指令必须合法

// bad

// good