Vue.md

Vue Style

该配置使用 recommend 规则，然后定制了部分规则。

目录

• 模板
• 脚本

说明：

• 语气：强制 > 要求 == !禁止 > 尽量 > 推荐 == !不推荐；
• 🔧表示ESLint可以自动修复。

模板

空白

要求模板使用4个空格缩进 🔧

html-indent

禁止模板中出现多个空格 🔧

no-multi-spaces

强制 mustache 使用左右始终有一个空格 🔧

mustache-interpolation-spacing

要求标签边缘不能有空格，自闭合斜杠前要有空格 🔧

html-closing-bracket-spacing

HTML格式

要求标签结尾括号始终不换行 🔧

vue/html-closing-bracket-newline

要求有正确的标签结尾，只有 svg 和 math 标签使用自闭合 🔧

html-end-tags, html-self-closing

要求 HTML 属性统一使用双引号

html-quotes

要求模板中的属性使用连字符 🔧

attribute-hyphenation

// ✗ bad
<foo myProp="prop"></foo>

// ✓ good
<foo my-prop="prop"></foo>

禁止出现重复的属性。

no-duplicate-attributes

允许class与:class共存，style与:style共存。

// ✗ bad
<div foo="abc" :foo="def"></div>

// ✓ good
<div foo="abc"></div>
<div :foo="def"></div>

指令

要求v-bind统一使用: 🔧

v-bind-style

要求v-on统一使用@ 🔧

v-on-style

不推荐在同一个元素上使用v-for和v-if

no-use-v-if-with-v-for

在v-for元素上使用v-if指令时，没有使用v-for中使用的变量，会发生警告。

// ✗ bad
<ol>
    <li v-if="shown" v-for="item in items">{{item.message}}</li>
</ol>

// ✓ good
<ol>
    <li v-for="item in items" v-if="item.shown">{{item.message}}</li>
</ol>
<ol v-if="shown">
    <li v-for="item in items">{{item.message}}</li>
</ol>

要求v-bind、v-if、v-else-if、v-for、v-model等指令必须书写正确

valid-v-bind, valid-v-cloak, valid-v-if, valid-v-else-if, valid-v-else, valid-v-for, valid-v-html, valid-v-model, valid-v-on, valid-v-once, valid-v-pre, valid-v-show, valid-v-text

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

// ✓ good
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<div v-bind:text-content.prop="text"></div>
<my-component :prop="someThing"></my-component>

模板中的脚本

要求模板不能解析出错

no-parsing-error

<template>中不能出现以下错误：

• 指令中的语法错误
• Mustache的语法错误
• HTML语法错误

// ✗ bad
<div>{{ foo. }}</div>

// ✓ good
<div>{{ foo.bar }}</div>

禁止在模板中使用this

this-in-template

其它

要求<template>必须有正确的根元素

valid-template-root

// ✗ bad
<template>
    <div>hello</div>
    <div>hello</div>
</template>

// ✓ good
<template>
    <div>
        <div>hello</div>
        <div>hello</div>
    </div>
</template>

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

no-textarea-mustache

// ✗ bad
<textarea>{{ message }}</textarea>

// ✓ good
<textarea v-model="message"></textarea>

尽量不要在v-for中出现没用过的变量

no-unused-vars

要求v-for必须绑定key

require-v-for-key

// ✗ bad
<div v-for="x in list"></div>

// ✓ good
<div v-for="x in list" :key="x.id"></div>

禁止在<template>上出现key

no-template-key

要求<component>的is必须用v-bind

require-component-is

// ✗ bad
<component></component>

// ✓ good
<component :is="type"></component>

脚本

整体

要求组件名始终用连字符 🔧

name-property-casing

禁止出现重复的字段

no-dupe-keys

// ✗ bad
export default {
    props: {
        foo: String,
    },
    computed: {
        foo: {
            get () {},
        },
    },
    data: {
        foo: null,
    },
    methods: {
        foo () {},
    },
};

// ✓ good
export default {
    props: ['foo'],
    computed: {
        bar () {},
    },
    data () {
        return {
            baz: null,
        };
    },
    methods: {
        boo () {},
    },
};

推荐使用一致的组件对象顺序

order-in-components

属性

要求属性必须要有类型

require-prop-types

不要求属性必须有默认值

vue/require-default-prop

要求属性的默认值必须正确

require-valid-default-prop

计算属性

要求计算属性必须有 return

return-in-computed-property

// ✗ bad
export default {
    computed: {
        foo () {
        },
        bar: function () {
        }
    }
}

// ✓ good
export default {
    computed: {
        foo () {
            return true
        },
        bar: function () {
            return;
        }
    }
}

禁止计算属性中出现副作用

no-side-effects-in-computed-properties

// ✗ bad
computed: {
    fullName () {
        this.firstName = 'lorem'; // <- side effect
        return `${this.firstName} ${this.lastName}`;
    },
    reversedArray () {
        return this.array.reverse(); // <- side effect
    },
},

// ✓ good
computed: {
    fullName () {
        return `${this.firstName} ${this.lastName}`
    },
    reversedArray () {
        return this.array.slice(0).reverse()
    },
}

禁止在计算属性中使用异步方法

no-async-in-computed-properties

其它

禁止出现 Vue 的保留字

no-reserved-keys

// ✗ bad
export default {
    props: {
        $el: String,
    },
    computed: {
        $on: {
            get () {},
        },
    },
    data: {
        _foo: null,
    },
    methods: {
        $nextTick () {},
    },
};

强制组件的 data 为一个函数

no-shared-component-data

// ✗ bad
export default {
    data: {
        foo: 'bar',
    },
};

// ✓ good
export default {
    data () {
        return {
            foo: 'bar'
        };
    },
};

要求 render 函数必须要有返回值

require-render-return

参考

• eslint-plugin-vue