构建自己常用的eslint风格

发表于

平时在日常开发的过程中，难免自己会找到自己之前项目的 eslint 配置，然后复制粘贴过来，为了解决这种问题，这里介绍如何构建一个自己习惯的eslint规则包到npm。

创建一个共享 eslint config

首先创建一个 npm package，package 名必须为 eslint-config-xxx，或者 scoped modules 以 @scope/eslint-config 前缀命名。

比如：eslint-config-myConfig、@lljj/eslint-config、@lljj/eslint-config-myConfig 都是可以的

然后创建你的规则文件，如 index.js，同时配置 package.json main 字段指向该文件。

index.js 需要导出一份eslint 配置即可， 如：

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
module.exports = {
    parser: 'babel-eslint',
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    plugins: [
        'babel',
    ],
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    rules: {
        'indent': [
            'error',
            4,
            {
                SwitchCase: 1,
            },
        ]
    },
};

这里和你项目配置一致，文件为 javasscript 你可以选择按照习惯来导出这些配置即可。

发布你的 eslint config

配置好你的规则之后，可以准备发布到 npm 来供自己或者其他人使用。

申明依赖

这里首先需要在 package.json 配置 peerDependencies 字段申明你的依赖，比如 ESLint 版本等

如下：几种依赖包和版本配置方法都是可以的

1
2
3
4
5
6
7
{
    "peerDependencies": {
        "babel-eslint": "10.x",
        "eslint": "6.x | 7.x",
        "eslint-plugin-vue": ">= 6"
    }
}

依赖配置

package.json 通过 peerDependenciesMeta 字段配置依赖是否可选

1
2
3
4
5
6
7
{
 "peerDependenciesMeta": {
    "eslint-plugin-vue": {
      "optional": true
    }
  }
}

peerDependenciesMeta npm v6.11.0版本后支持。

发布npm

配置好你的npm版本、name、main 等关键信息即可以发布，更多关键字信息查看这里：package.json配置

如果仅仅测试也可以使用 npm link 命令做本地测试，npm link文档

npm publish

然后登录npm后执行 npm publish 即可推送到npm，如果使用 scoped modules 记得使用 npm publish --access public

注：关于如何推送一个包到 npm 这里就不做详细说明了

使用共享的 eslint config

只用在项目中安装依赖，然后配置配置你的 .eslintrc 文件使用 extends 配置即可

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

可以忽略 eslint-config- 前缀

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

如果 scoped modules 不能省略 eslint-config-

  • @scope/eslint-config 如下两种格式都支持
1
2
3
4
{
    "extends": "@scope/eslint-config",
    "extends": "@scope"
}
  • @scope/eslint-config-myconfig 不能省略
1
2
3
{
    "extends": "@scope/eslint-config-myconfig"
}

导出多分配置

你可能想分享多个配置在同一个 npm 包中，你可以指定额外的配置通过在你的 npm 包中添加一个新文件并在你的 ESLint 配置中引用它。

比如 package/rule-vue.js：

1
2
3
{
    "extends": "@scope/eslint-config/rule-vue"
}

注：这里你也可以继续添加更多份配置

例子

一个构建共享 eslint的例子：@lljj/eslint-config