Error with my ".eslintrc.js" file - "Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser."

Issue

ESLint seems to be unable to parse a ".eslintrc.js" file.

Steps to reproduce: I set up a new "hello world" TypeScript project as follows:

# Make a new directory for our new project
mkdir test
# Go into the new directory
cd test
# Create a "package.json" file
npm init --yes
# Install TypeScript
npm install typescript --save-dev
# Install ESLint (the linter)
npm install eslint --save-dev
# Install the Airbnb ESLint config (the most popular linting config in the world)
npm install eslint-config-airbnb-typescript --save-dev
# The import plugin for ESLint is needed for the Airbnb config to work properly with TypeScript
npm install eslint-plugin-import@^2.22.0 --save-dev
# The TypeScript plugin for ESLint is needed for the Airbnb config to work properly with TypeScript
npm install @typescript-eslint/eslint-plugin@^4.2.0 --save-dev
# Create the config file for TypeScript
touch tsconfig.json
# Create the config file for ESLint
touch .eslintrc.js
# Create the entry point for our TypeScript application
touch main.ts

I fill the "tsconfig.json" file with the following (a blank/default config):

{}

I fill the ".eslintrc.js" file with the following, as specified in the Airbnb documentation:

module.exports = {
  extends: ['airbnb-typescript/base'],
  parserOptions: {
    project: './tsconfig.json',
  },
};

I fill the "main.ts" with the following:

const foo = 'bar';

Then, when I run npx eslint main.ts, it correctly generates the following error:

  1:7  error  'foo' is assigned a value but never used  @typescript-eslint/no-unused-vars

Thus, ESLint appears to be working correctly. However, when I run npx eslint .eslintrc.js, I get the following error:

  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided

This error also appears in VSCode whenever I open the ".eslintrc.js" file. The error needs to be solved so that ESLint can lint the rest of the file. (To clarify, I want the ".eslintrc.js" file to be linted in the same way that I want my TypeScript source code to be linted - e.g. have 2 space indentation and so forth.)

Additional info: I am on Windows 10 LTSC with Node v14.8.0 and npm version 6.14.7.

Solution

When you're using typescript-powered eslint rules (when your eslint config includes a "parserOptions.project" config), eslint throws an error if you attempt to lint a file that isn't one of the files that's included in the typescript project.

This is due to performance reasons - it used to be that eslint allowed this, but doing so would cause a a large performance hit, so they changed it to throw an error instead.

The solution to linting files that aren't part of your TS project is to create a tsconfig that extends your "real" tsconfig, but includes all the files you want to lint. This is usually called tsconfig.eslint.json and looks like this:

// Special typescript project file, used by eslint only.
{
    "extends": "./tsconfig.json",
    "include": [
        // repeated from base config's "include" setting
        "src",
        "tests",

        // these are the eslint-only inclusions
        ".eslintrc.js",
    ]
}

And in your .eslintrc.js you'll change project: './tsconfig.json' to project: './tsconfig.eslint.json'.

This should resolve the error and allow the .eslintrc.js file to be linted.

Answered By - Retsam