How fix 'Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.' inside gatsby-config and Gatsby-node.js

Question

In my eslintrc.js I have a.o:

extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb/hooks',
    'plugin:jsx-a11y/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  globals: {
    __PATH_PREFIX__: true,
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    project: './tsconfig.json',
    ecmaFeatures: {
      jsx: true,
      typescript: true,
      tsx: true,
    },
  },

In the root of my Gatsby project I have gatsby-config.js and gatsby-config.js. In the beginning of the file I get a ESLint linting error:

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

How do I solve this?

Answer 1

You need to update the include array in your .tsconfig to include all files you want to lint, as you can see from the docs:

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 as follows:

{
  // extend your base config so you don't have to redefine your compilerOptions
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    "test/**/*.ts",
    "typings/**/*.ts",
    // etc

    // if you have a mixed JS/TS codebase, don't forget to include your JS files
    "src/**/*.js"
  ]
}

In your case, you can either create a custom (tsconfig.eslint.json) file or adding the include rule in the existing one to match all the needed files.