@chaos-kit/eslint-config-format-vue
v0.0.1
Published
> eslint config for personal project with vue3 + ts
Downloads
3
Maintainers
Readme
@chaos-kit/eslint-config-format-vue
eslint config for personal project with vue3 + ts
Usage
install:
yarn add -D @chaos-kit/eslint-config-formate-vue
usage:
// package.json
{
...
"eslintConfig": {
"root": true,
"extends": "@chaos-kit/format-vue"
},
}
Rules
all plugins:
- eslint:recommended
- vue/vue3-essential
- @typescript-eslint/recommended
- prettier/@typescript-eslint, prettier/vue, prettier
- prettier option
Custom Rule Explain
Error
no-async-promise-executor
: 禁止使用异步函数作为 Promise executorno-empty
: 禁止空块语句, 如果需要使用, 则应该添加注释no-debugger
: 禁止生产环境下的debugger
no-extra-boolean-cast
: 禁止不必要的布尔转换no-func-assign
: 禁止对function
声明的重新赋值no-inner-declarations
禁止在嵌套的语句块中出现变量或 function 声明, const/let 除外no-prototype-builtins
: 禁止直接使用 Object.prototypes 的内置属性no-extra-parens
: 禁止不必要的括号require-atomic-updates
: 禁止由于 await 或 yield的使用而可能导致出现竞态条件的赋值use-isnan
: 要求调用 isNaN()检查 NaNclass-methods-use-this
: 强制类方法使用 thisdefault-case
: 要求switch必须含有defaulteqeqeq
: 使用强等判断dot-location
: 要求点操作符和属性放在同一行guard-for-in
: 强制需要约束 for-inno-alert
: 禁止 alert、confirm 和 prompt
/*eslint guard-for-in: "error"*/
for (key in foo) {
if (Object.prototype.hasOwnProperty.call(foo, key)) {
doSomething(key);
}
}
for (key in foo) {
if ({}.hasOwnProperty.call(foo, key)) {
doSomething(key);
}
}
no-fallthrough
: 禁止 case 语句落空no-global-assign
: 禁止对原生对象或只读的全局对象进行赋值no-with
: 禁止使用with
no-delete-var
: 禁止删除变量no-undef
: 禁止使用未声明的变量block-scoped-var
: 禁止在作用域外调用变量no-var
: 禁止使用varprefer-const
: 能用const的地方必须使用const
Warn
no-console
: 生产环境下console
警告no-sparse-arrays
:稀疏数组警告no-unreachable
: return 后的不可达代码警告no-empty-function
: 空函数警告no-await-in-loop
: 不禁止循环异步prefer-rest-params
: 推荐使用剩余参数而不是argumentprefer-template
: 推荐使用模板字符串而不是字符串拼接no-extra-parens
: 禁止不必要的括号no-template-curly-in-string
: 模板字符串引用警告
vue3 rule
vue/no-deprecated-destroyed-lifecycle
: 不使用不推荐的生命周期
export default {
/* ✓ GOOD */
beforeMount () {},
mounted () {},
beforeUnmount () {},
unmounted () {},
/* ✗ BAD */
beforeDestroy () {},
destroyed () {}
}
- 不推荐使用
$listeners
,$scopedSlots
,$on
,$off
,$once
vue/no-deprecated-filter
: 不推荐使用filter语法
<template>
<!-- ✓ GOOD -->
{{ filter(msg) }}
{{ filter(msg, '€') }}
{{ filterB(filterA(msg)) }}
<div v-bind:id="filter(msg)"></div>
<div v-bind:id="filter(msg, '€')"></div>
<div v-bind:id="filterB(filterA(msg))"></div>
<!-- ✗ BAD -->
{{ msg | filter }}
{{ msg | filter('€') }}
{{ msg | filterA | filterB }}
<div v-bind:id="msg | filter"></div>
<div v-bind:id="msg | filter('€')"></div>
<div v-bind:id="msg | filterA | filterB"></div>
</template>
vue/no-deprecated-functional-template
: 不推荐使用functional template
vue/no-deprecated-props-default-this
: 不推荐在prop中使用this
<script>
export default {
props: {
a: String,
b: {
default () {
/* ✗ BAD */
return this.a
}
}
}
}
</script>
vue/no-deprecated-slot-attribute
: 使用推荐的slot语法
<template>
<ListComponent>
<!-- ✓ GOOD -->
<template v-slot:name>
{{ props.title }}
</template>
</ListComponent>
<ListComponent>
<!-- ✗ BAD -->
<template slot="name">
{{ props.title }}
</template>
</ListComponent>
</template>
vue/no-deprecated-v-bind-sync
: 禁用sync
绑定
<template>
<!-- ✓ GOOD -->
<MyComponent v-bind:propName="foo"/>
<MyComponent :propName="foo"/>
<!-- ✗ BAD -->
<MyComponent v-bind:propName.sync="foo"/>
<MyComponent v-bind:[dynamiArg].sync="foo"/>
<MyComponent v-bind.sync="foo"/>
<MyComponent :propName.sync="foo"/>
</template>
vue/no-deprecated-v-on-native-modifier
: 禁用native
vue/no-lifecycle-after-await
: 禁止在await
之后写生命周期
<script>
import { onMounted } from 'vue'
export default {
async setup() {
/* ✓ GOOD */
onMounted(() => { /* ... */ })
await doSomething()
/* ✗ BAD */
onMounted(() => { /* ... */ })
}
}
</script>
vue/no-ref-as-operand
: 禁止直接操作ref值
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
const ok = ref(true)
/* ✓ GOOD */
count.value++
count.value + 1
1 + count.value
var msg = ok.value ? 'yes' : 'no'
/* ✗ BAD */
count++
count + 1
1 + count
var msg = ok ? 'yes' : 'no'
return {
count
}
}
}
</script>
vue/no-setup-props-destructure
: 禁止解构prop
<script>
export default {
/* ✓ GOOD */
setup(props) {
watch(() => {
console.log(props.count)
})
return () => {
return h('div', props.count)
}
}
}
</script>
vue/no-watch-after-await
: 禁止在await
之后watch
vue/require-slots-as-functions
: 强制以function
方式调用$slots
<script>
export default {
render(h) {
/* ✓ GOOD */
var children = this.$slots.default()
var children = this.$slots.default && this.$slots.default()
/* ✗ BAD */
var children = [...this.$slots.default]
var children = this.$slots.default.filter(test)
}
}
</script>
Rule for Typescript
recommand read:
@typescript-eslint/adjacent-overload-signatures
/* ✗ BAD */
declare namespace Foo {
export function foo(s: string): void;
export function foo(n: number): void;
export function bar(): void;
export function foo(sn: string | number): void;
}
/* ✓ GOOD */
declare namespace Foo {
export function foo(s: string): void;
export function foo(n: number): void;
export function foo(sn: string | number): void;
export function bar(): void;
}
@typescript-eslint/await-thenable
: 必须await
一个thenable
@typescript-eslint/explicit-module-boundary-types
: 在导出函数和类的公共类方法上要求显式的返回值和参数类型@typescript-eslint/no-empty-interface
: 禁止空的接口声明@typescript-eslint/no-explicit-any
: 允许any, 但不推荐, 如何不使用any参考[译] 理解TypeScript 中 any 和 unknown@typescript-eslint/no-for-in-array
: 禁止使用for-in
遍历数组@typescript-eslint/no-this-alias
: 禁止重命名this