CODEWITHSUNDEEP
typescriptvisual-studio-codeeslintmonorepolerna
Nicholas Haley
Nicholas Haley

Reputation: 4024

Typescript aliases not working with VSCode Eslint in monorepo

I am using Typescript, Lerna and monorepos for a project. I have the following project structure:

tsconfig.json
packages/
  project/
    tsconfig.json
    ...
...

My root tsconfig.json looks like this:

{
  "compilerOptions": {
    "baseUrl": ".",

    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,

    "skipLibCheck": true,

    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",

    "composite": true,

    "strictPropertyInitialization": false
  }
}

The nested project tsconfig.json looks like this:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "pages/*": ["./src/pages/*"],
      "hooks/*": ["./src/hooks/*"],
      "assets/*": ["./src/assets/*"],
      "styles/*": ["./src/styles/*"],
      "context/*": ["./src/context/*"],
      "components/*": ["./src/components/*"],
    }
  },
  "include": ["./src/**/*", "global.d.ts"],
  "exclude": ["node_modules", "dist"]
}

Everything works as expected, except that when I open the project from the root directory in VSCode, the ESLint extension complains about my aliases.

ex.

Unable to resolve path to module 'components/Button'

When running eslint from the command line every works as expect (ie. ./node_modules/.bin/eslint --ext .js,.jsx,.ts,.tsx .).

Additionally, if I open VSCode from the project directory everything runs fine as well. It looks as though the ESLint extension is unable to identify project as the root directory, even though a tsconfig.json file is defined there. This doesn't make sense to me as it goes against the VSCode docs

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project

Any ideas on how this can be resolved?

Upvotes: 7

Views: 2714

Answers (1)

Petr Dobry
Petr Dobry

Reputation: 241

This VS Code setting fixed it for me. Eslint plugin use each workspace folder as "root" by default.

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

Upvotes: 24

Related Questions