eslint vue通用配置

官网文档
⚠️ 警告
❌ 错误
🔨 修复

vue api使用规范

vue/no-v-html⚠️

尽量避免使用v-html。

vue/no-restricted-v-bind❌

规则不允许在应用程序中使用的v-bind参数名称。

<template>
  <!-- ✗ BAD -->
  <MyInput :v-model="x" />
  <div :v-if="x" />
</template>

vue/no-useless-v-bind❌🔨

禁止使用无意义的v-bind。

<template>
  <!-- ✗ BAD -->
  <div v-bind:foo="'bar'"/>
  <div :foo="'bar'"/>
</template>

vue/prefer-separate-static-class❌🔨

禁止在:class中使用静态类。

<template>
  <!-- ✗ BAD -->
  <div :class="'static-class'" />
  <div :class="{'static-class': true, 'dynamic-class': foo}" />
  <div :class="['static-class', dynamicClass]" />

  <!-- ✓ GOOD -->
  <div class="static-class" />
  <div class="static-class" :class="{'dynamic-class': foo}" />
  <div class="static-class" :class="[dynamicClass]" />
</template>

vue 命名规范

vue/component-options-name-casing❌🔨

在components中注册组件时，使用PascalCase。

vue/component-name-in-template-casing❌🔨

template中的组件命名使用PascalCase。

vue/custom-event-name-casing❌

自定义事件使用kebab-case。

vue/multi-word-component-names❌

要求组件名称始终是多个单词，除了index。

/* ✓ GOOD */
emit('my-event')

vue 代码格式化

vue/block-tag-newline❌🔨

在块级标签打开和关闭之前强制换行，最大空行数量为1。

<!-- ✓ GOOD -->
<script>

export default {
}

</script>

vue/padding-line-between-blocks❌🔨

要求在给定的两个块之间使用空行。

<!-- ✓ GOOD -->
<template>
  <div></div>
</template>

<script>
export default {}
</script>

<style></style>

vue/define-macros-order❌🔨

规定defineProps和defineEmits排序。defineProps在前。

<!-- ✓ GOOD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
</script>

vue/html-comment-content-spacing❌🔨

在 HTML 注释中实施统一的间距。

vue/no-irregular-whitespace❌

禁止在.vue中使用不规则的空格。

template中的代码格式规范

vue/array-bracket-spacing❌🔨

在template中，禁止在数组括号存在间隙。

[['foo'], 'bar', 'baz'] ✅
[ ['foo'], 'bar']❌

vue/arrow-spacing❌🔨

在template中，箭头函数箭头的前后使用间隙。(a) => {}

vue/block-spacing❌🔨

在template中，在打开块之后和关闭块之前强制在块内部使用空格。

function foo() { return true; } ✅

vue/brace-style❌🔨

在template中，规定大括号样式：

if-else结构中的else语句以及catch和finally必须位于前面的结束大括号之后的行上。

并且允许单行。

function nop() { return; }

if (foo) { bar(); }

if (foo) { bar(); }
else { baz(); }

try { somethingRisky(); }
catch(e) { handleError(); }

class C
{
    static { foo(); }

    static
    { foo(); }
}

class D { static { foo(); } }

vue/comma-dangle❌🔨

在template中，规定尾随逗号的使用：

arrays中，不使用尾随逗号
objects中，不使用尾随逗号
imports中，不使用尾随逗号
exports中，不使用尾随逗号
functions中，不使用尾随逗号

vue/comma-spacing❌🔨

在template中，规定执行逗号的间隙：

前无
后有

var arr = [1, 2];
var arr = [1,, 3]
var obj = {"foo": "bar", "baz": "qur"};

vue/comma-style❌🔨

在template中，需要在数组元素、对象属性或变量声明的同一行后面和同一行上使用逗号。

vue/dot-location❌🔨

在template中，对象属性的.跟在属性同一行。

var foo = object
.property;
var bar = object.property;

vue/dot-notation❌🔨

在template中，对象尽量强制使用.。

foo["bar"];❌

vue/eqeqeq❌🔨

在template中，强制使用== !==，除了这些情况：

typeof foo == 'undefined'
'hello' != 'world'
0 == 0
true == true
foo == null

vue/func-call-spacing❌🔨

在template中，禁止函数名和开头括号之间有空格。

🚫fn ();

vue/key-spacing❌🔨

在template中，规定对象的:前后间隙：

前无
后有
{ "foo": 42 } ✅

vue/keyword-spacing❌🔨

在template中，在关键字之前和之后实施一致的间距。

vue/no-constant-condition⚠️

在template中，条件语句尽量不要使用常量表达式。

vue/no-empty-pattern❌

在template中，禁止空解构。

vue/no-extra-parens❌🔨

在template中，禁止在函数表达式周围使用不必要的括号

vue/no-loss-of-precision❌

在template中，禁止使用超过精度的文字数字

vue/no-restricted-syntax❌

在template中，禁止使用以下语句：

With
Debugger
Labeled

vue/no-sparse-arrays❌

在template中，禁止使用稀疏数组。

vue/object-curly-newline❌🔨

在template中，在打开和关闭大括号之前的换行：

如果属性内部或属性之间有换行符，则需要换行符。否则，不允许换行符。
要求两个花括号要么都有换行符，要么都没。

vue/object-curly-spacing❌🔨

在template中，强制大括号有一定间距。

vue/object-property-newline❌🔨

在template中，强制对象属性放置在单独的行上。

vue/object-shorthand❌🔨

vue/operator-linebreak❌🔨

在template中，运算符在前。

vue/prefer-template❌🔨

在template中，使用模板字符代替字符串串联。

vue/quote-props❌🔨

在template中，对象文字属性名称周围要么都加引号，要么都没引号。

vue/space-in-parens❌🔨

在template中，禁止括号内存在间距。

vue/space-infix-ops❌🔨

在template中，要求运算符周围存在空格。

vue/space-unary-ops❌🔨

在template中，在一元运算符之前或之后实施一致的间距。

vue/template-curly-spacing❌🔨

在template中，禁止在模板字符串的嵌入表达式周围使用空格。

@yomukizrj/eslint-config-vue