Debugging ESLint

If your linting is running slow, here are some steps you can check to get your debugging going.

1. When your app depends on a parserOptions.project field in the .eslintrc.json, make sure it points to the apps own tsconfig.json and not the one on root level.

// apps/pm-netbank/cards/.eslintrc.json

"overrides": [
  {
    "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
    "parserOptions": {
      "project": "apps/pm-netbank/cards/tsconfig.json"
  }
  ...
]

From the NX documentation: you should only configure the parserOptions.project option in your project's .eslintrc.json when you need to use rules requiring type information (and you should not configure parserOptions.project in your workspace's root .eslintrc.json)

1 a) Alternatively create a tsconfig.eslint.json for eslint project

Specifying which files are part of the project speeds up the ts parser

// tsconfig.eslint.json

{
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}

2. Be aware of which rules your app needs, some of them use a lot of resources.

Rule	Time (ms)	Relative
deprecation/deprecation	699.709	76.0%
@typescript-eslint/no-unused-vars	74.372	8.1%
react/no-direct-mutation-state	29.824	3.2%

Rule	Time (ms)	Relative
prettier/prettier	9453.936	76.1%
@typescript-eslint/no-unused-vars	749.244	6.0%
react/no-direct-mutation-state	473.759	3.8%

3. If you suspect there is something slowing down your linting you try these steps

3 a) GNU-Time

gnu-time gives you a detailed output of your system during the command, more details here https://man7.org/linux/man-pages/man1/time.1.html

$ gtime -v yarn nx lint ${PROJECT_NAME} --skip-nx-cache

gtime requires that you install https://formulae.brew.sh/formula/gnu-time and make sure you have the right version with

$ type gtime
gtime is /usr/local/bin/gtime

3 b) TIMING=1

TIMING=1 yarn nx lint ${PROJECT_NAME} --skip-nx-cache

which gives you a table of the linting rules that is eating the most time, ex:

Rule	Time (ms)	Relative
@typescript-eslint/no-unused-vars	53.491	29.2%
no-redeclare	29.702	16.2%
no-unused-vars	26.910	14.7%
react/no-direct-mutation-state	11.541	6.3%
react/require-render-return	11.153	6.1%
react/no-typos	4.436	2.4%
no-restricted-globals	3.859	2.1%
no-native-reassign	3.171	1.7%
no-global-assign	2.680	1.5%
@typescript-eslint/no-empty-function	2.423	1.3%

3 c) DEBUG:eslint:cli-engine

Debug the cli-engine, gives you an overview of how much time is spent in each file

DEBUG=eslint:cli-engine yarn nx lint pm-netbank/cards --skip-nx-cache

Linting "pm-netbank/cards"...
eslint:cli-engine Lint /Users/thomasnielsen/DNB/dnb-web/apps/pm-netbank/cards/gatsby-browser.js +0ms
eslint:cli-engine Lint /Users/thomasnielsen/DNB/dnb-web/apps/pm-netbank/cards/gatsby-config.js +4s
eslint:cli-engine Lint /Users/thomasnielsen/DNB/dnb-web/apps/pm-netbank/cards/gatsby-node.js +47ms
eslint:cli-engine Lint /Users/thomasnielsen/DNB/dnb-web/apps/pm-netbank/cards/gatsby-ssr.js +24ms
eslint:cli-engine Lint /Users/thomasnielsen/DNB/dnb-web/apps/pm-netbank/cards/index.js +94ms
eslint:cli-engine Lint /Users/thomasnielsen/DNB/dnb-web/apps/pm-netbank/cards/jest.config.js +11ms
eslint:cli-engine Lint /Users/thomasnielsen/DNB/dnb-web/apps/pm-netbank/cards/src/@dnb/app/EufemiaStyleImporter.ts +26ms

3 d) Eslint --debug

eslint has a --debug option, that gives you a whole lot of information on what is going on. Easiest way to read it is to write it to a file like this:

yarn eslint apps/pm-netbank/cards --debug &> debug.txt