如何方便的为团队所有项目统一 ESLint 配置 #

前言 #

近期给团队项目 CLI 做重构，其中涉及到 ESLint 的部分，这部分之前的方式是通过开发和编译时调用 ESLint 的 CLI 去检查项目代码，虽然不会出什么问题，但是各种 IDE 的提示就废掉了，所以打算换一种比较通用的方式。

统一配置处理 #

为了统一配置，配置自然是不能直接暴露给开发者的，不然很容易被各种魔改就废了，所以需要将配置包装起来。

ESLint extends #

ESlint 中支持 extends 属性，用于在现有配置中扩展上一些其它的通用的配置。主要支持以下几种传值：

• 预置的通用配置：eslint:recommended、eslint:all

  实际配置文件在 eslint/conf 中可以找到

• 配置文件地址：./path/to/shared/.eslintrc
• 插件中提供的配置：plugin:react/recommended

  可以在 eslint-plugin-react/index.js 中看到的配置详情，eslint-plugin- 的前缀可省略，/recommended 为包中抛出的 configs 的 recommended 属性

• 配置模块包：react-app

  实际配置在 eslint-config-react-app 中可以找到，eslint-config- 的前缀为可省略

通过 extends，可以方便的将统一的配置文件放置在自定义配置包中。假设我们现在定义一个通用的模块包名：@ucloud/eslint-config-console

Package eslintConfig #

ESlint 配置除了可以使用配置文件，也可以在 package.json 中配置 eslintConfig 字段，较配置文件稍微简洁一点。直接如下使用上述模块包：

// package.json
{
    "name": "my-package",
    "eslintConfig": {
        "extends": "@ucloud/console"
    }
}

依赖包 #

可以将 ESLint 以及相关的插件、依赖包等安装到 config 包中，保证包的统一性。

参考 #

最终 @ucloud/eslint-config-console 如下

package.json

{
    "name": "@ucloud/eslint-config-console",
    "version": "0.0.3",
    "description": "eslint config for console develop",
    "main": "index.js",
    "author": "[email protected]",
    "dependencies": {
        "@typescript-eslint/eslint-plugin": "^2.6.1",
        "@typescript-eslint/parser": "^2.6.1",
        "babel-eslint": "^10.0.3",
        "eslint": "^6.6.0",
        "eslint-plugin-flowtype": "^4.3.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.16.0",
        "eslint-plugin-react-hooks": "^2.2.0"
    }
}

indexjs

module.exports = {
    root: true,
    parser: 'babel-eslint',
    plugins: ['import', 'flowtype', 'jsx-a11y', 'react', 'react-hooks'],
    env: {
        browser: true,
        commonjs: true,
        es6: true,
        jest: true,
        node: true
    },
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    extends: ['eslint:recommended', 'plugin:react/recommended'],
    overrides: [
        {
            files: ['**/*.ts?(x)'],
            parser: '@typescript-eslint/parser',
            parserOptions: {
                ecmaVersion: 2018,
                sourceType: 'module',
                ecmaFeatures: {
                    jsx: true
                },
                warnOnUnsupportedTypeScriptVersion: true
            },
            plugins: ['@typescript-eslint'],
            extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended']
        }
    ],
    settings: {
        react: {
            version: 'detect'
        }
    }
};

项目中使用

{
    "name": "my-project",
    "eslintConfig": {
        "extends": "@ucloud/console"
    }
}

保证配置不被篡改 #

通过 extends 可以方便统一配置，但是配置在各项目中依旧容易被篡改，这个时候需要做一些防范措施。

CLI #

如果有统一的开发用 CLI，可以在 CLI 中做好校验。

commit hook #

通过 commit hook 在项目 commit 时校验项目的 eslint 配置是否被篡改，不过依然可以绕过。

CI/CD #

可在 CI/CD 阶段做校验，配置篡改后直接报错。

发布系统发布时做校验 #

在最终发布时做好校验。

后续升级 #

前端技术发展迅猛，也需要考虑到后续升级的问题。

• 尽量保持配置一致性
• 可切割版本，老项目不做升级，新项目直接使用新版
• 通过 AST，将规则差异处做转换

总结 #

通过 ESLint extends 可以很好的统一团队的配置，并且不会影响 IDE 的 lint 提示。

借助 CI/CD 等工具做好检验工作，可以有效防止统一配置被篡改。