Maximizing ESLint Performance in TypeScript Projects

Configuring ESLint for TypeScript can be tricky, leading to slow performance. Learn how to avoid common mistakes and optimize your setup for smooth running in this article.

How ESLint Parses Typescript?

ESLint doesn’t natively support TypeScript, that’s why you need to install the typescript-eslint parser. In your .eslintrc.js file, you specify one or more tsconfig.json files so that the TypeScript parser can correctly parse your code for ESLint parser.

// .eslintrc.js

module.exports = {
  parserOptions: {
    project: ["tsconfig.json"],
    tsconfigRootDir: __dirname,
  },
};

In your tsconfig.json file, there are file and/or includes which will specify the files of this TS project. If you have multiple projects (a monorepo) then you’ll have multiple tsconfig files. So you should add them in your eslintrc file:

// .eslintrc.js

module.exports = {
  parserOptions: {
    project: [
      "projects/foo-project/tsconfig.json",
      "projects/bar-project/tsconfig.json",
    ],
    tsconfigRootDir: __dirname,
  },
};

Or you might have multiple eslintrc files. One for each project, each extending a base eslintrc file.

Caveats: Configure Project in ESLint for TypeScript Projects

Your ESLint command should only lint `.ts` files included in the tsconfig.json files. If you lint files that aren’t included, typescript-eslint (used to) create a TS project for each file to lint it! That’ll take a lot of time!! Thankfully, this feature has been deprecated, but it’s worth checking if you’re using older versions.

Fix the Performance Issue of typescript-eslint

In order to fix this problem, you have to make sure all your files are included in the tsconfig file. One way is to create another tsconfig file (ex. `tsconfig.eslint.json`) and include all files there.

// tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": ["**/*.ts"]
}

Now use this file in your eslintrc. Also make sure createDefaultProgram isn’t true in your eslintrc under parserOptions