preface

Recently, I did a reconstruction for the CLI of the team project, which involved the part of ESLint. The previous way of this part was to call THE CLI of ESLint to check the project code during development and compilation. Although there was no problem, all kinds of IDE prompts were disabled, so I planned to change to a more general way.

Unified Configuration processing

In order to unify the configuration, the configuration of nature is not directly exposed to the developers, or it is easy to be a variety of magic changes on the waste, so you need to package the configuration.

ESLint extends

ESlint supports the extends property, which is used to extend some other common configuration over an existing configuration. The following values are supported:

  • Preset common configurations: ESLint :recommended, ESLint :all

    The actual configuration file can be found in esLint /conf

  • Address: configuration file. / path/to/Shared /. Eslintrc
  • Plugin: React /recommended

    The configuration details can be seen in eslint-plugin-react/index.js, where the prefix of eslint-plugin- can be omitted, and /recommended is a recommended property of the configs thrown in the package

  • Configuration module package: React-app

    The actual configuration can be found in eslint-config-react-app. The prefix of eslint-config- can be omitted

Extends makes it easy to place a uniform configuration file in a custom configuration package. Suppose we now define a generic module package name: @ucloud/eslint-config-console

Package eslintConfig

ESlint configuration In addition to using configuration files, you can also configure the eslintConfig field in package.json, which is slightly more concise than configuration files. Use the above module package directly as follows:

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

Depend on the package

You can install ESLint and related plug-ins, dependencies, and so on into the Config package to ensure package consistency.

reference

Finally @ucloud/eslint-config-console looks like this

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." "}}Copy the code

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'}}};Copy the code

Used in the project

{
  "name": "my-project"."eslintConfig": {
    "extends": "@ucloud/console"}}Copy the code

Ensure that the configuration is not tampered with

Extends makes unified configuration easy, but the configuration can still be tampered with across projects, so you need to take precautions.

CLI

If the CLI is used for development, you can perform verification on the CLI.

commit hook

A commit hook is used to verify that a project’s ESLint configuration has been tampered with at commit time, but it can still be bypassed.

CI/CD

Check can be done in CI/CD stage, and error will be reported directly after configuration tampering.

Verify system release

Do validation for final release.

Subsequent upgrade

The front-end technology is advancing rapidly, and there is a need to consider future upgrades.

  • Try to keep configuration consistency
  • Cuttable version, old projects do not upgrade, new projects directly use the new version
  • Through the AST, the rule differences are transformed

conclusion

ESLint extends is a great way to unify a team’s configuration without affecting IDE lint.

Using tools such as CI/CD to check the unified configuration can effectively prevent tampering.