@yomukizrj/eslint-config-vue
v0.1.0
Published
vue2&vue3的通用配置
Downloads
3
Readme
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
中,禁止在模板字符串的嵌入表达式周围使用空格。