CODEWITHSUNDEEP
javascriptreactjstypescripteslint
Yoskutik
Yoskutik

Reputation: 2089

Airbnb Eslint config is too slow on >12 versions

I have a configuration of ESLint

{
    "env": {
        "browser": true,
        "node": true,
        "es2020": true
    },
    "extends": [
        "airbnb-typescript/base",
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "arrowFunctions": true,
            "classes": true
        },
        "ecmaVersion": 11,
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "react",
        "react-hooks",
        "@typescript-eslint",
        "testing-library",
        "jest-dom"
    ],
    "settings": {
        "import/resolver": {
            "typescript": {}
        },
        "react": {
            "version": "detect"
        }
    },
    "rules": {
        "class-methods-use-this": "off",
        "no-restricted-syntax": "off",
        "no-underscore-dangle": "off",
        "no-return-assign": "off",
        "linebreak-style": "off",
        "no-continue": "off",
        "no-plusplus": "off",
        "func-names": "off",
        "no-param-reassign": ["error", { "props": false }],
        "no-empty": ["error", { "allowEmptyCatch": true }],
        "object-curly-newline": ["error", {
            "ImportDeclaration": { "minProperties": 5 }
        }],
        "arrow-parens": ["error", "as-needed"],
        "quote-props": ["error", "as-needed"],
        "max-len": ["error", {"code":  110}],
        "indent": ["error", 4, {
            "ignoredNodes": ["JSXElement *"]
        }],
        "prefer-destructuring": ["error", {
            "array": false,
            "object": true
        }],
        "no-console": "error",
        "jsx-quotes": "error",
        "max-lines": "error",

        "import/prefer-default-export": "off",
        "import/extensions": "off",
        "import/no-cycle": "error",

        "jsx-a11y/mouse-events-have-key-events": "off",
        "jsx-a11y/control-has-associated-label": "off",
        "jsx-a11y/click-events-have-key-events": "off",
        "jsx-a11y/anchor-is-valid": "off",

        "react/destructuring-assignment": "off",
        "react/jsx-first-prop-new-line": "off",
        "react/jsx-props-no-spreading": "off",
        "react/jsx-max-props-per-line": "off",
        "react/display-name": "off",
        "react/prop-types": "off",
        "react/jsx-closing-bracket-location": ["error", "after-props"],
        "react/function-component-definition": ["error", {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
        }],
        "react/jsx-child-element-spacing": "error",
        "react/jsx-no-useless-fragment": "error",
        "react/jsx-indent-props": ["error", 4],
        "react/jsx-indent": ["error", 4],
        "react/require-default-props": "off",

        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-unnecessary-type-constraint": "off",
        "@typescript-eslint/no-unused-expressions": "off",
        "@typescript-eslint/no-throw-literal": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/no-namespace": "off",
        "@typescript-eslint/no-unused-vars": ["error", {
            "args": "after-used"
        }],
        "@typescript-eslint/indent": ["error", 4, {
            "ignoredNodes": ["JSXElement *"]
        }]
    }
}

And it does work well. But only for eslint-config-airbnb-typescript@12. If I update this packet to a later version, ESLint becomes 4 times slower - from 15s to 60s for checking a single file.

That's a package.json

    "@typescript-eslint/eslint-plugin": "5.33.1",
    "@typescript-eslint/parser": "5.33.1",
    "eslint": "7.32.0",
    "eslint-config-airbnb-typescript": "12.3.1",
    "eslint-import-resolver-typescript": "3.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jest-dom": "4.0.2",
    "eslint-plugin-jsx-a11y": "6.4.1",

I can't understand the reason of this slowing down. Could you please tell me, what can be wrong?

Upvotes: 0

Views: 1654

Answers (3)

tomfa
tomfa

Reputation: 275

In case it might be helpful for the next person, I found a large performance gain by removing my parserOptions.project value. It required disabled these rules though:

rules: {
  "@typescript-eslint/no-implied-eval": "off",
  "@typescript-eslint/no-throw-literal": "off",
  "@typescript-eslint/return-await": "off",
  "@typescript-eslint/dot-notation": "off",
}

Related github issue

Upvotes: 0

Yoskutik
Yoskutik

Reputation: 2089

Well. I found a few problems here.

  1. Thanks to Matthieu Reigler I found out that import/no-cycle is way too longer than other rules. So, for debugging purposes I turned it off. Also, I added maxDepth flag to decrease linting time;
  2. Rules @typescript-eslint/indent and indent should not be applied together, so I delete indent from my configuration;
  3. I'm not pretty sure why I used "ignoredNodes": ["JSXElement *"], because I added this line years ago. For now this line does not anything good, so I delete it.
  4. From version 13 airbnb-typescript need to be declared with airbnb. Also, there's no need to use eslint:recommended and plugin:react/recommended
  5. Also, there're a few rules that are odd. For example, quote-props, @typescript-eslint/no-unused-vars, etc. - they already written in the updated versions, so I delete these rules from my config

And now linting time is pretty close to the time at old versions.

Upvotes: 1

Matthieu Riegler
Matthieu Riegler

Reputation: 55669

You can use TIMING=1 when running on the command line to debug which rule is slow !

$ TIMING=1 eslint lib


Rule                    | Time (ms) | Relative
:-----------------------|----------:|--------:
no-multi-spaces         |    52.472 |     6.1%
camelcase               |    48.684 |     5.7%
no-irregular-whitespace |    43.847 |     5.1%
valid-jsdoc             |    40.346 |     4.7%
handle-callback-err     |    39.153 |     4.6%
space-infix-ops         |    35.444 |     4.1%
no-undefined            |    25.693 |     3.0%
no-shadow               |    22.759 |     2.7%
no-empty-class          |    21.976 |     2.6%
semi                    |    19.359 |     2.3%

https://eslint.org/docs/latest/developer-guide/working-with-rules#performance-testing

Upvotes: 9

Related Questions