Parsing error: Cannot read file tsconfig.json, when it's in subfolders and not in root

[fcole90]

Hi, I have nested subprojects, with individual esling and tsconfig configurations, which get parsed correctly from command line, but not from the extension.

You can check the repo in its current state at: https://github.com/fcole90/fullstack_open_2020_part9/tree/f56f5c6c2df77b80c2f7e4df42c07fe6718ff53a

Details

I have a root folder fullstack_open_2020_part9, which contains some subfolders, each with a separate .eslintrc and an associate tsconfig.json. If I run eslint --ext .ts . within each of the subfolders I get the correct parsing. However, the extension doesn't read the right configuration file: e.g. in the file fullstack_open_2020_part9/patientor/backend/index.ts it reports Parsing error: Cannot read file '/home/fabio/Projects/aalto/fullstack_open_2020_part9/tsconfig.json' but I would be expecting it to check /home/fabio/Projects/aalto/fullstack_open_2020_part9/patientor/backend/tsconfig.json instead.

Note

I used this same dir structure for other projects (most of those "fullstack_open_2020_part*" you can find among my repos) which didn't use Typescript, and .js files were parsed correctly without any need to customise ESlint options.

I think this issue might be related to using this extension with an eslint file pointing to a parserOptions.project with a relative link like mine:

    "parserOptions": {
        "project": "./tsconfig.json"
    }

[dbaeumer]

@fcole90 the eslint.workingDirectories setting is your friend here since you need to do a cd when running in the terminal.

Please ping if this doesn't help.

[fcole90]

Thanks, for reference I add here a link to the documentation for eslint.workingDirectories

[fcole90]

Solved by adding .vscode/settings.json at the root of the project with the following content (as you suggested):

{
  "eslint.workingDirectories": [
    "./part_b",
    "./part_c_patientor/frontend",
    "./part_c_patientor/backend",
    "./part_d",
  ]
}

Link to repo with fix: https://github.com/fcole90/fullstack_open_2020_part9

[glen-84]

@dbaeumer,

I'm using npm workspaces, and I have the same issue. However, it works fine when running a command like npm run lint -w client (-w is used to specify the workspace).

It also seems to run without issue in PhpStorm.

Which project (this extension, eslint, ts-eslint, etc.) is responsible for resolving parserOptions.project? I get the feeling that it's being resolved incorrectly (not relative to the .eslintrc.js file). But why is it working fine in PhpStorm?

[dbaeumer]

@glen-84 resolving the files is nothing the extension does itself. They are resolved either by ESLint npm module or one of the plugins. From my experience this highly depends on the current working directory. This is why setting "eslint.workingDirectories" mostly resolve the issue.

Can you try to run eslint directly (not via npm run lint, but using something like ./node_modules/.bin/eslint ....) and see if you can reproduce this when running from the workspace folder?

[glen-84]

@dbaeumer,

I was able to fix or workaround the issue by using:

project: path.join(__dirname, "tsconfig.eslint.json")

... to force ESLint (or probably TS-ESlint) to use the file in the current directory. It's a bit strange that it doesn't do this by default though.

Perhaps PhpStorm changes into the configuration directory before running ESLint.

[juliaheller]

project: path.join(__dirname, "tsconfig.eslint.json")

Where did you put this? In which file?

[glen-84]

@juliaheller In the .eslintrc.js file for the workspace (i.e. client/.eslintrc.js).

[iiivanpopov]

should .vscode folder be on github?

[Christopher-Hayes]

should .vscode folder be on github?

Yes, you can use it to ensure your team is using the same settings (in vscode settings this is the "workspace" settings), you can also use it to "recommend" vscode extensions that are needed for the project. A general tip is to keep the .vscode/settings.json limited to only what must be in there, so don't copy-paste your full "user" settings.json into the "workspace" settings.json.

The only situation where this could be a problem is if you're copy-pasting your "user" settings.json into the "workspace" settings.json and one of your vscode extensions had a secret in your user settings. Extensions are not supposed to do that and it's rare, but beware of it.

[lawrencecchen]

This also works for me:

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

.vscode/settings.json

[samboylett]

No one has explicitly written it down, but this worked for me..

// .eslintrc.js
const path = require("path");

module.exports = {
  parserOptions: {
    project: path.join(__dirname, "tsconfig.json"),
  },
};

[azzazkhan]

In my case I was using turbo repo (the main project was nested under sub-directory) so the VS Code ESLint extension was using the project's root as the base path instead of the project directory, so I ended up manually appending the app directory (if it doesn't have one) to the cwd.

This is my .eslintrc.js implementation.

const { resolve } = require('node:path')

const dir = 'apps/dashboard'
const cwd = process.cwd()

// VS Code ESLint extension sets `cwd` as project root and running the `lint`
// or base `turbo lint` command will the `cwd` to app directory. We need to
// append the app directory for VS Code ESLint extension to detect and
// properly parse the Typescript configuration (`tsconfig.node.json`)
const project_dir = cwd.endsWith(dir) ? process.cwd() : `${cwd}/${dir}`
const project = resolve(project_dir, 'tsconfig.node.json')

/** @type {import("eslint").Linter.Config} */
module.exports = {
    parserOptions: {
        project
    }
}