Parsing Error: Cannot read file 'tsconfig.json' [Solved]

# 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 as follows.

.eslintrc.js

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

The code for this article is available on GitHub

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

Copied!
// ⛔️ 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

# Creating a `tsconfig.eslint.json` file

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

Copied!
{
  "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"
  ]
}

The code for this article is available on GitHub

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

Copied!
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 aren't 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.

# Solve the error in Visual Studio Code

If the error persists 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

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

The code for this article is available on GitHub

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

Copied!
{
  "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.

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Parsing Error: Cannot read file 'tsconfig.json' [Solved]