"parserOptions.project" has been set for @typescript-eslint/parser
TypescriptEslintTypescript EslintTypescript Problem Overview
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
Typescript Solutions
Solution 1 - Typescript
Different lint rules for JavaScript and TypeScript files
The problem happens for one of the reasons below:
- You're using a rule which require type information and didn't specify
a
parserOptions.project
; - You specified
parserOptions.project
, didn't specifycreateDefaultProgram
(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 use TypeScript rules only on TypeScript files:
{
// ...
parser: '@typescript-eslint/parser',
plugins: ["@typescript-eslint"],
overrides: [
{
files: ['*.ts', '*.tsx'], // Your TypeScript files extension
// As mentioned in the comments, you should extend TypeScript plugins here,
// instead of extending them outside the `overrides`.
// If you don't want to extend any rules, you don't need an `extends` attribute.
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
parserOptions: {
project: ['./tsconfig.json'], // Specify it only for TypeScript files
},
},
],
// ...
}
You can read more about the overrides
config on the official docs: How do overrides work?
Don't lint a specific file
If you don't want to lint the file that is mentioned in the error (e.g. babel.config.js
), you can ignore it adding its name to the .eslintignore
file:
babel.config.js
Anyway, the step above (about overriding the config for TypeScript files) is important in case your project contains both JavaScript and TypeScript files that you want to lint.
You can also create other overrides for different situations, e.g. a different config for test files, since it can use developer dependencies and run on node
environment, instead of browser
.
Solution 2 - Typescript
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
Solution 3 - Typescript
Add one line in ".eslintignore":
.eslintrc.js
Solution 4 - Typescript
You need to add that file to your tsconfig include
array.
See typescript-eslint/typescript-eslint#967 for more details.
Solution 5 - Typescript
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.
Solution 6 - Typescript
-
Run
npm i -D @types/node
-
Include typescript support for
*.config.js
files:
tsconfig.json
:
{
"include": [
"**/*.config.js" // for *.config.js files
]
}
And then reload your IDE!
Solution 7 - Typescript
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.
Solution 8 - Typescript
The error means there is a file which can be compiled but doesnt belong to currently defined project structure. there are several solutions:
If you dont care if the file is compliled (ie. config files and such)
- add the filename to
.eslintignore
or
- add the file or file pattern to
.eslintrc.js
file
ignorePatterns: ["babel.config.js"]
// or
ignorePatterns: ["**/*.config.js"]
You want the file to compiled
add the file, folder or pattern to tsconfig.json
file
include": [ "src", "other_src",]
NOTE some changes needs IDE restart to take effect
Solution 9 - Typescript
For me the problem originates in some files ignored in tsconfig
using the exclude
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.
Solution 10 - Typescript
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.
Solution 11 - Typescript
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',
},
},
],
}
Solution 12 - Typescript
Does this Error come from the VSCode Extension? Does the Error have a relative Path that goes to the top level even though its in the same folder (or subfolder) (as shown in the error message below)?
Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: ../../../../../home/<ommitted>/projects/floor-planner/app/src/App.vue.
The file must be included in at least one of the projects provided.
If so, check if it also persists when using the CLI.
From your project root you could run eslint .
.
If those errors are not found, you very likely have the project opened through a symlink.
As of Aug 2021, the Eslint Extension does not work with Symlinks.
From your project directory, run pwd -P
to get the absolute Path.
In my instance this results in
~/projects/floor-planner/app: pwd -P
/media/projects/2021-Q3/floor-planner/app
Open the Project through this Path.
Eslint should no longer show the Error.
Solution 13 - Typescript
Simply add below code inside the .eslintrc.js file.
ignorePatterns: ['.eslintrc.js']
Solution 14 - Typescript
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.
Solution 15 - Typescript
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.
Solution 16 - Typescript
I needed just to add the path to the new tsconfig.json
in the project
array and eslint script and the issue went away.
tsconfig.json
:
project: ["./newfolder/tsconfig.json"]
package.json
:
"eslint": "eslint -c ./.eslintrc.js './newfolder/**/*.ts'"
Solution 17 - Typescript
I spent a lot of time on a problem like this one.
I had created a jest.config.ts
instead of jest.config.js
so it was throwing this exact eslint error臘
Solution 18 - Typescript
I ran into this issue today, and none of the above solutions helped. The issue I had was that I had two files in the same directory that shared the same file name (sans extension). E.g., src/foo.ts
and src/Foo.tsx
. Renaming one of the files fixed the linter error. See @typescript-eslint/parser#955.
Solution 19 - Typescript
My issue was in PHPStorm is that I was having the working director set:
I cleared that and everything worked :\
Solution 20 - Typescript
Set parserOptions
in .eslintrc as below
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2019,
"sourceType": "module"
},