“parserOptions.project” has been set for @typescript-eslint/parser

Question

I created a new React Native project with --template typescript

I deleted the template directory which came as part of the boilerplate.

I then proceeded to add ESLint:

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: ["airbnb-typescript-prettier"]
};

However, when I open babel.config.js, I get this error

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.

The file does not match your project config: /Users/Dan/site/babel.config.js.

The file must be included in at least one of the projects provided.eslint

Answer 1

The problem happens for one of the reasons below:

1. You're using a rule which require type information and didn't specify a parserOptions.project;
2. You specified parserOptions.project, didn't specify createDefaultProgram (it will be removed in a future version), and you're linting files not included in the project (e.g. babel.config.js, metro.config.js)

As from the TypeScript ESLint Parser docs:

parserOptions.project

This option allows you to provide a path to your project's tsconfig.json. This setting is required if you want to use rules which require type information.

(...)

Note that if this setting is specified and createDefaultProgram is not, you must only lint files that are included in the projects as defined by the provided tsconfig.json files. If your existing configuration does not include all of the files you would like to lint, you can create a separate tsconfig.eslint.json.

To solve it, update your ESLint config to the following:

{
  // ...
  overrides: [
    {
      files: ['*.ts', '*.tsx'], // Your TypeScript files extension
      parserOptions: {
        project: ['./tsconfig.json'], // Specify it only for TypeScript files
      },
    }
  ],
  parser: '@typescript-eslint/parser',
  // ...
}

Answer 2

You can create a separate TypeScript config file (tsconfig.eslint.json) intended for eslint configuration. That file extends tsconfig configuration and setups include key for files that have to be linted.

.eslint.js:

// ...
parserOptions: {
  // ...
  project: "./tsconfig.eslint.json",
  // ...
},
// ...

tsconfig.eslint.json:

{
  "extends": "./tsconfig.json",
  "include": [
    // ...
    "babel.config.js"
  ]
}

Or if you want to ignore it, you can put it into .eslintignore.

.eslintignore:

// ...
babel.config.js

Answer 3

You need to add that file to your tsconfig include array. See typescript-eslint/typescript-eslint#967 for more details.

Answer 4

In my ESLint config I have the following configuration:

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  globals: {
    Promise: "readonly"
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"],
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "prettier/@typescript-eslint",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
  ],
}

Update The key part of the fix is this:

parser: "@typescript-eslint/parser"

and this:

parserOptions: {
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"], // could be tsconfig.json too
}

Don't forget to include that file or file's directory in the include array of tsconfig.json.

Answer 5

1. Run npm i -D @types/node

2. Include typescript support for *.config.js files:

tsconfig.json:

{
  "include": [
    "**/*.config.js" // for *.config.js files
  ]
}

And then reload your IDE!

Answer 6

Add one line in ".eslintignore":

.eslintrc.js

Answer 7

I use a symlink from my project folder point to my home folder:

/opt/project/workspace => ~/worspace

Opening the VSCode using the symlink path ~/workspace the error always persists.

Opening VSCode using the original path: /opt/project/workspace solves the problem.

This shouldn't be a problem, but for now it is.

Answer 8

For me the problem originates in some files ignored in tsconfig using the exlucde property, yet eslint does not ignore them.

Usually if one wants that TSC will ignore files, then the same will be applied to eslint. so just copy paste the value of exclude in .tsconfig configuration into the ignorePatterns property in .eslintrc configuration.

Answer 9

Simply instruct eslint to ignore them by adding the ignorePatterns option to your .eslintrc.js:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  ignorePatterns: ["babel.config.js"],
  ...

As there is not much value in linting your project config files, you can safely ignore them.

Also, I would not make them part of your tsconfig.json or create a special tsconfig.eslint.json file, just for linting purpose.

Answer 10

I had this issue in VsCode when I was opening my Project too high up in the Folder Structure. A weird solution but it worked.

In my example, Firestore functions project for express in .ts, I had to open it from the functions folder it created.

I should have noticed it was this sort of problem since 'npm run-script lint' never returned an error itself.

Answer 11

In our case we have multiple .eslintrc and multiple tsconfig.json in our directory tree. (One each for the server at ., and one each for the React client at ./client.)

This worked fine with the CLI but not with VS Code's plug-in.

The fix was to set the ./client/.eslintrc project value to be relative to the root - not to the .eslintrc file. After changing it from "./tsconfig.json" to "./client/tsconfig.json" the IDE linting works as expected.

Answer 12

I was having the same issue when adding '@typescript-eslint/prefer-nullish-coalescing': 'error' to .eslintrc.js.

After a lot of trial and error, I came up with this solution, which works well in my case:

module.exports = {
  ...
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      parserOptions: {
        // this setting is required to use rules that require type information
        project: './tsconfig.json',
      },
      rules: {
        '@typescript-eslint/prefer-nullish-coalescing': 'error',
      },
    },
  ],
}