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

Question

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 - eg 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.

Answer 1

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 - eg 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.

Answer 2

Retsam's answer works perfectly well. However, you could also only use @typescript-eslint/parser for TypeScript files by using ESLint's overrides . This avoids having to create a new tsconfig.json just for ESLint.

module.exports = {
  // Common configuration for .eslintrc.js and TypeScript files
  rules: {
    eqeqeq: "error",
    "no-var": "error",
    // ...
  },
  overrides: [{
    files: "**/*.ts"
    // TypeScript-only configuration
    parser: "@typescript-eslint/parser",
    parserOptions: {
      project: "tsconfig.json",
      tsconfigRootDir: __dirname,
      sourceType: "module",
    },
    plugins: ["@typescript-eslint"],
    rules: {
      "@typescript-eslint/no-floating-promises": "error",
      // ...
    }
  ]},
}