Using ESLint in Nx Workspaces

Rules requiring type information

ESLint is powerful linter by itself, able to work on the syntax of your source files and assert things about based on the rules you configure. It gets even more powerful, however, when TypeScript type-checker is layered on top of it when analyzing TypeScript files, which is something that @typescript-eslint allows us to do.

By default, Nx sets up your ESLint configs with performance in mind - we want your linting to run as fast as possible. Because creating the necessary so called TypeScript Programs required to create the type-checker behind the scenes is relatively expensive compared to pure syntax analysis, 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).

Let's take an example of an ESLint config that Nx might generate for you out of the box for a Next.js project called tuskdesk:

apps/tuskdesk/.eslintrc.json

1{
2  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
3  "ignorePatterns": ["!**/*"],
4  "overrides": [
5    {
6      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7      "rules": {}
8    },
9    {
10      "files": ["*.ts", "*.tsx"],
11      "rules": {}
12    },
13    {
14      "files": ["*.js", "*.jsx"],
15      "rules": {}
16    }
17  ]
18}

Here we do not have parserOptions.project, which is appropriate because we are not leveraging any rules which require type information.

If we now come in and add a rule which does require type information, for example @typescript-eslint/await-thenable, our config will look as follows:

apps/tuskdesk/.eslintrc.json

1{
2  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
3  "ignorePatterns": ["!**/*"],
4  "overrides": [
5    {
6      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7      "rules": {
8        // This rule requires the TypeScript type checker to be present when it runs
9        "@typescript-eslint/await-thenable": "error"
10      }
11    },
12    {
13      "files": ["*.ts", "*.tsx"],
14      "rules": {}
15    },
16    {
17      "files": ["*.js", "*.jsx"],
18      "rules": {}
19    }
20  ]
21}

Now if we try and run nx lint tuskdesk we will get an error

The solution is to update our config once more, this time to set parserOptions.project to appropriately point at our various tsconfig.json files which belong to our project:

apps/tuskdesk/.eslintrc.json

1{
2  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
3  "ignorePatterns": ["!**/*"],
4  "overrides": [
5    {
6      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7      // We set parserOptions.project for the project to allow TypeScript to create the type-checker behind the scenes when we run linting
8      "parserOptions": {
9        "project": ["apps/tuskdesk/tsconfig.*?.json"]
10      },
11      "rules": {
12        "@typescript-eslint/await-thenable": "error"
13      }
14    },
15    {
16      "files": ["*.ts", "*.tsx"],
17      "rules": {}
18    },
19    {
20      "files": ["*.js", "*.jsx"],
21      "rules": {}
22    }
23  ]
24}

And that's it! Now any rules requiring type information will run correctly when we run nx lint tuskdesk.

NOTE: As well as adapting the path to match your project's real path, please be aware that if you apply the above to a Next.js application, you should change the glob pattern at the end to be tsconfig(.*)?.json. E.g. if tuskdesk had been a Next.js app, we would have written: "project": ["apps/tuskdesk/tsconfig(.*)?.json"]