eslint-config-blockabc

A All-in-One eslint config project based on Standard Style

Usage no npm install needed!

<script type="module">
  import eslintConfigBlockabc from 'https://cdn.skypack.dev/eslint-config-blockabc';
</script>

README

eslint-config-blockabc

npm js-standard-style

An All-in-One ESLint Shareable Config project, based on Standard Style.

This project including ESLint Config for JavaScript, TypeScript, Vue, Nuxt.

Usage

JavaScript

  1. install
npm install eslint-config-blockabc eslint @babel/eslint-parser eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -D
  1. Add this to your .eslintrc file
{
  "extends": ["blockabc"]
}

Typescript

Build on JavaScript:

npm install typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

{
  "extends": ["blockabc/typescript"]
}

Vue

Build on JavaScript:

npm install vue-eslint-parser eslint-plugin-vue eslint-config-standard-jsx eslint-plugin-react -D

{
  "extends": ["blockabc/vue"]
}

Nuxt

Build on Vue:

npm install eslint-plugin-nuxt -D

{
  "extends": ["blockabc/nuxt"]
}

Vue-TypeScript

Build on Vue & TypeScript

{
  "extends": ["blockabc/vue-ts"]
}

Nuxt-TypeScript

Build on Nuxt & TypeScript

{
  "extends": ["blockabc/nuxt-ts"]
}

FAQ

  1. Sequence in eslintrc's extends field is important. Your config should always be the last one in extends array. https://github.com/eslint/eslint/issues/9191
  2. You can run eslint --print-config [file] to see active eslint rules for specific file.

Notable

Vue

  1. props 要有默认值

JavaScript

  1. 函数定义的括号之前要有空格。

除了社区规范和风格倾向，该规则可以方便代码搜索：搜 func( 可以搜到所有函数调用，搜 func ( 可以搜到函数定义。

Todo

  1. vue/require-default-prop

按理说 String 类型的 props 应该也可以没有默认值。可以给 eslint-plugin-vue 提一个 PR。

  1. vue/mustache-interpolation-spacing

该规则要求插值的花括号两边有空格，但是是否是必须的呢？这样风格上的好处和坏处分别是什么？

  1. vue slots/event

可以增加一个规则，使得所有的 slots 和 events 都必须显式地在 vue 配置上写出，方便后续维护者知道该组件的 "API"。

export default {
    events: ['input', 'change'],
    slots: ['default', 'title'],
    mounted() {
        this.$emit('input', 0)
    }
}
  1. vue/attributes-order

该规则有点奇怪，没有按照 order 的意图去排序，代码应该是有问题的，有时间可以去看一下，提个 PR。 attributes-order.js