Solve - Parsing Error: Cannot read file 'tsconfig.json'

avatar

Borislav Hadzhiev

Fri Mar 25 20223 min read

banner

Photo by Clay Banks

Solve - Parsing Error: Cannot read file 'tsconfig.json' #

To solve the error "Parsing Error: Cannot read file 'tsconfig.json'", update your .eslintrc.js file to set the tsconfigRootDir option to __dirname to force eslint to resolve your project configuration relative to the folder where .eslintrc.js is located.

Open your .eslintrc.js file and add or update your parserOptions object to look like:

.eslintrc.js
module.exports = { parserOptions: { project: 'tsconfig.json', tsconfigRootDir: __dirname, sourceType: 'module', }, // ... rest };

By setting the parserOptions object we tell ESLint which JavaScript language options we want to support.

The sourceType option is set to module to indicate that we want to support ES6 Modules.

The tsconfigRootDir option is set to __dirname, so ESLint resolves our project config relative to the .eslintrc.js file.

Once you've updated your parserOptions object, you might get an error:

.eslintrc.js
// ⛔️ 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.eslint

If you got the "parserOptions.project" has been set for @typescript-eslint/parser error, create a tsconfig.eslint.json file in your root directory, right next to your tsconfig.json file.

tsconfig.eslint.json
{ "extends": "./tsconfig.json", "include": [ // 👇️ add all the directories and files // that you want to lint here "src", "tests", // add all files in which you see // the "parserOptions.project" error ".eslintrc.js" ] }

Make sure to add all of the directories you want to lint in the include array.

Now open your .eslintrc.js file and update the project property to point to the eslint-specific tsconfig file.

.eslintrc.js
module.exports = { parserOptions: { project: 'tsconfig.eslint.json', tsconfigRootDir: __dirname, sourceType: 'module', }, // ... rest };

Your error should be resolved, if it isn't try restarting your IDE.

This is needed, because adding the parserOptions.project option to a TypeScript project causes ESLint to throw an error if we try to lint files that aren't included in our TypeScript project.

To get around this we have to specify all of the files that we want to lint in the include array in the tsconfig.eslint.json file.

In short, add all the files that you want to lint, but are not included in your tsconfig.json file to the include array in your tsconfig.eslint.json file. These will most likely be config files that are located in your root directory.

Alternatively, you can add any of the files in which you see the error to your .eslintignore file if you don't want to lint them.

If the error "Parsing Error: Cannot read file 'tsconfig.json'" is still not resolved and you use the VSCode IDE, create a .vscode folder in the root directory of your project.

Add a settings.json file in the .vscode directory and paste the following contents.

.vscode/settings.json
{ "eslint.workingDirectories": [ "src" ] }

This file assumes that you want to lint an src directory.

If your project has 2 directories that you want to lint, e.g. frontend and backend, update the workingDirectories array to look like this:

.vscode/settings.json
{ "eslint.workingDirectories": [ "frontend", "backend" ] }

The setting instructs ESLint how to resolve config files (.eslintrc.js and .eslintignore) relative to our working directory.

Another cause of the "Parsing Error: Cannot read file 'tsconfig.json'" is when we open our code editor in a different directory than the one that contains our ESLint config.

For example, if your project is in a user/typescript/ directory and you open your code editor in the user/ directory, you might get the error.

Instead, try to navigate to the user/typescript/ directory first and then open your code editor.

Use the search field on my Home Page to filter through my more than 1,000 articles.