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

eslinttypescripttypescript-eslint

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

Best Answer

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',
  // ...
}
Related Topic