eslint规则封装

从事前端开发两年,经手的项目越来越多,写的配置也越来越多。Eslint就是其中之一,每一个项目都需要配置相同的规则(繁琐)。

肯定有一个办法可以做到一次引入,无需再手动配置。

封装Eslint规则

翻了翻eslint官网,找到了符合条件的介绍页面Shareable Configs。规则整合过后通过发布npm组件的方式上传仓库供所有项目使用。

规则Demo

下面摘取了项目的部分eslint配置

index.js

基于eslint-config-airbnb-base

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
module.exports = {
extends: [
require.resolve('eslint-config-airbnb-base')
],
settings: {
'import/extensions': [
'.js',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue'
]
},
rules: {
'import/extensions': ['error', 'always', {
js: 'never',
mjs: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
vue: 'never'
}],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
'arrow-parens': ['error', 'as-needed'],
'no-param-reassign': 'off',
'max-len': ['error', 120, {
ignoreComments: true,
ignoreTrailingComments: true,
ignoreUrls: true,
ignoreStrings: true,
ignoreTemplateLiterals: true,
}],
}
}

package.json

对于组件名,必须以eslint-config-开头,比如eslint-config-suyi

对于域级组件(Scoped packages),需要在组件名前面加上域的名称,比如@suyi/eslint-config-suyi

组件使用方

1
2
3
{
"extends": "eslint-config-suyi"
}

可以省略eslint-config-

1
2
3
{
"extends": "suyi"
}

对于域级组件同样可以省略eslint-config-

1
2
3
{
"extends": "@suyi/eslint-config-suyi"
}

or

1
2
3
{
"extends": "@suyi/suyi"
}

Done

经过简单操作,大功告成