80
votes

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.

6

6 Answers

152
votes

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:

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

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.

7
votes

update your eslintrc.json file by the following line:

"project": "PROJECT_NAME/tsconfig.json"

1
votes

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.

1
votes

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.

0
votes

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).