CODEWITHSUNDEEP
node.jstypescripteslinttypescript-eslint
Darren Zou
Darren Zou

Reputation: 3744

Parsing error: Cannot read file '.../tsconfig.json'.eslint

The error Parsing error: Cannot read file '.../tsconfig.json'.eslint shows in all .ts files in the src folder including index.ts.

I have no idea how to set up configs. The issue just shows a red line and makes the file red. However, everything compiles and run fine. The entire Node project was created using the firebase CLI.

tsconfig.json file:

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

.eslintrc.js file:

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "tsconfig.json",
    sourceType: "module",
  },
  plugins: [
    "@typescript-eslint",
    "import",
  ],
  rules: {
    "@typescript-eslint/adjacent-overload-signatures": "error",
    "@typescript-eslint/no-empty-function": "error",
    "@typescript-eslint/no-empty-interface": "warn",
    "@typescript-eslint/no-floating-promises": "error",
    "@typescript-eslint/no-namespace": "error",
    "@typescript-eslint/no-unnecessary-type-assertion": "error",
    "@typescript-eslint/prefer-for-of": "warn",
    "@typescript-eslint/triple-slash-reference": "error",
    "@typescript-eslint/unified-signatures": "warn",
    "comma-dangle": "warn",
    "constructor-super": "error",
    eqeqeq: ["warn", "always"],
    "import/no-deprecated": "warn",
    "import/no-extraneous-dependencies": "error",
    "import/no-unassigned-import": "warn",
    "no-cond-assign": "error",
    "no-duplicate-case": "error",
    "no-duplicate-imports": "error",
    "no-empty": [
      "error",
      {
        allowEmptyCatch: true,
      },
    ],
    "no-invalid-this": "error",
    "no-new-wrappers": "error",
    "no-param-reassign": "error",
    "no-redeclare": "error",
    "no-sequences": "error",
    "no-shadow": [
      "error",
      {
        hoist: "all",
      },
    ],
    "no-throw-literal": "error",
    "no-unsafe-finally": "error",
    "no-unused-labels": "error",
    "no-var": "warn",
    "no-void": "error",
    "prefer-const": "warn",
  },
  settings: {
    jsdoc: {
      tagNamePreference: {
        returns: "return",
      },
    },
  },
};

I had tried restarting VScode, clearing the cache, and all to no avail. I am guessing I need to change some of the paths but I am not very good at changing the config files so I don't want to accidentally break the entire project.

Upvotes: 286

Views: 222137

Answers (16)

wishmaster
wishmaster

Reputation: 1591

I had the same error in VS with TypeScript Analyzer (ESLint, Prettier) extension installed. Setting these values resolved the issue:

  • parserOptions.project = true
  • parserOptions.tsconfigRootDir = __dirname

Fixed Config

.eslintrc.js file (part with changed values):

  ...
  "parserOptions": {
    "sourceType": "module",
    "project": true,
    "tsconfigRootDir": "__dirname"
  },
  ...

Explanation

Even though main purpose of parserOptions.project = true is to resolve another problem ("improve the configuration and performance for typed linting") it also fixes issue from above.

Here are some details taken from article Relative TSConfig Projects with parserOptions.project = true about how it works:

As of typescript-eslint 5.52.0, we now support providing true for parserOptions.project:

module.exports = {
  // ...
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
  },
  // ...
};

Doing so indicates that each source file being linted should use type information based on the nearest tsconfig.json in its directory. For each file, @typescript-eslint/parser will check that file's directory, then the parent directory, and so on - until a tsconfig.json file is found.

💡 TIP

We recommend setting the tsconfigRootDir ESLint config to the project's root directory (most commonly, __dirname). That way, if you accidentally delete or rename the root tsconfig.json file, @typescript-eslint/parser won't search parent directories for higher tsconfig.json files.

Upvotes: 0

hossain45
hossain45

Reputation: 101

in my case, I have mono repo setup so eslint was pointing to root tsconfig which was causing the problem. Then I changed .eslintrc.json configuration in backend folder which solved my problem. Following is my configuration:

 {
  "extends": [
    "plugin:adonis/typescriptApp",
    "prettier",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["prettier", "@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./backend/tsconfig.json",
    "tsconfigRootDir": "__dirname",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "off",
    "no-console": "warn"
  },
  "env": {
    "node": true,
    "es6": true
  }
}

Upvotes: 0

Ian Vink
Ian Vink

Reputation: 68740

For those using Angular and eslintrc.json, add the 2 stars to the project node like this:

"overrides": [
  {
    "files": ["*.ts"],
    "parserOptions": {
      "project": ["**/tsconfig.json"]
    }
  }
]

Upvotes: 89

Mr_RB
Mr_RB

Reputation: 31

For those who have this problem with ionic framework do the Next: open .eslintrc.json and verify

“project”: [“tsconfig.json”, “the-parent-folder/tsconfig.json”],

Change the parent folder with the folder that contains your project and say Good bye to that annoying error♥

Upvotes: 3

chrs
chrs

Reputation: 6096

A VSCode specific approach that worked for me was adding the following to settings.json

"eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ]

Upvotes: 9

Lauren Yim
Lauren Yim

Reputation: 14078

By default, the projects (in parserOptions) are resolved relative to the current working directory. If you run eslint in a different working directory to the folder containing tsconfig.json, @typescript-eslint/parser will not be able to locate the file.

To fix this, you can set tsconfigRootDir to __dirname, which would make the parser resolve the project configuration relative to .eslintrc.js:

module.exports = {
  // ...
  parserOptions: {
    project: "tsconfig.json",
    tsconfigRootDir: __dirname,
    sourceType: "module",
  },
  // ...
}

If you’re having some trouble with

/path/to/.eslintrc.js
  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

see this question.

Upvotes: 489

IglesiasNoelia
IglesiasNoelia

Reputation: 19

It works for me

"parserOptions": {
  "project": ["<YourProjectName>/tsconfig.json"],
}

Upvotes: 1

Farhan Kassam
Farhan Kassam

Reputation: 141

What fixed this for me is to simply navigate into the project directory containing my tsconfig.json, and that it was able to locate the file.

Otherwise, I liked @dheeraj9499's answer that you can modify your .eslintrc.json "project" array within "parserOptions" and locate where your tsconfig.json is located from within the current directory. So something like the following was able to find tsconfig.json in the correct directory:

"parserOptions": {
  "project": [
    "code/eMOS/Scripts/tsconfig.json",
    "code/eMOS/Scripts/tsconfig.spec.json"
  ],
 }

Upvotes: 3

Pedro Manuel Salvador Ayala
Pedro Manuel Salvador Ayala

Reputation: 147

I solved it by adding @typescript-eslint/parser to the extends:

enter image description here

Upvotes: 13

wpwilson10
wpwilson10

Reputation: 11

I got this error in Visual Studio Code when working on a typescript project via WSL 2 on Windows 10.

It was fixed by installing the Remote - WSL extension in VS Code.

The files were hosted in my \wsl$\Ubuntu\home<user>\ location. The error message specified the correct file location, and VS Code could open the file.

The above fixes using the root directory and parser options did not help.

Upvotes: 1

tomyhomie
tomyhomie

Reputation: 372

I suddenly started seeing this error using vscode. Restarting vscode has resolved my issue

Upvotes: 8

dheeraj9499
dheeraj9499

Reputation: 827

Update your eslintrc.json file with the following line:

"project": "PROJECT_NAME/tsconfig.json"

with PROJECT_NAME being the name of your project (not a macro).

Upvotes: 77

S J BHAVANA
S J BHAVANA

Reputation: 1501

Parsing error: Cannot read file 'd:\test\testproject\tsconfig.app.eslint.json'.eslint One of the major issues I faced here because of the way the project folder is opened in vs code.

assume the folder structure is d:\test\testproject where 'testproject' is the angular project you are using.

if you are opening the test folder in vs code then navigating to testproject as below

D:\test>
D:\test>cd testproject
D:\test\testproject>

Doing this will create 2 settings.json files, one for the main opened folder and one for the child folder which in turn doesn't allow the settings to be applied properly.

So always opening the project folder directly in the vscode would help overcoming the issue, when all the dependencies are mentioned properly in eslintrc.json and tsconfig.json files would help in solving the issue.

Upvotes: 2

Voronin
Voronin

Reputation: 187

If you get the following error message in a multi-module project in IntelliJ (e.g. a folder containing several backend services as well as a frontend module), IntelliJ might not be able to tell what to do.

In my case I got the following error on top of a .ts-file: enter image description here

To fix this, I have clicked on "ESLint settings..." and picked "Manual ESLint configuration" enter image description here

Then I entered the path to the frontend module root folder in "Working directories:" and picked the correct path to eslint in "ESLint package" (which - in my case - was in <frontend-module-root>/node_modules/eslint).

This way I still get eslint to work and do not have to change any project-related configuration at all (it works from frontend module root folder in CLI already).

Upvotes: 2

CyberMessiah
CyberMessiah

Reputation: 1268

Another approach is if you happened to open the Workspace folder one level above the Project (as was in my case), just start a new Workspace with the ACTUAL project folder. That solved my Eslint error.

Upvotes: 12

Dimitar Spassov
Dimitar Spassov

Reputation: 2733

A VSCode-specific approach, that worked for me was to create a .vscode folder in the root project directory and add the following property to the settings.json file inside it:

{
  "eslint.workingDirectories": [
    "src"
  ]
}

The "src" could be any directory, which should be in eslint's scope.

Upvotes: 139

Related Questions