I've incorporated Typescript, Lerna, and monorepos into my current project setup. Here's the structure I'm working with:
tsconfig.json
packages/
project/
tsconfig.json
...
...
The main tsconfig.json in the root directory 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
}
}
And the nested project tsconfig.json is structured as follows:
{
"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"]
}
Despite everything functioning as anticipated, there's a snag when opening the project from the root directory in VSCode—the ESLint extension gets tripped up by the aliases.
For instance:
Unable to resolve path to module 'components/Button'
Interestingly enough, running eslint from the command line goes off without a hitch (i.e.,
./node_modules/.bin/eslint --ext .js,.jsx,.ts,.tsx .Furthermore, if I launch VSCode from the project directory instead, all operations run smoothly. It seems that the ESLint extension struggles to recognize project as the root directory, despite the presence of a tsconfig.json file there. This deviation puzzles me since it contradicts the guidance outlined in the VSCode documentation.
The existence of a jsconfig.json file within a directory indicates that said directory serves as the foundation of a JavaScript Project
Is there any insight on resolving this issue?