Multiple tsconfig.json in vs-code for typescript project

Question

First of all, I know there are several similar questions, but couldn't find solution for this problem in any of them...

So, I have an ElectronJS project created with Nextron where the file structure is something like this:

├── main/
│   └──...
├── renderer/
│   ├── src/
│   │   └── index.ts
│   ├── td/
│   │   └── env.d.ts
│   ├── ...
│   └── tsconfig.json
├── tsconfig.json
└──...

The content of the tsconfig.json file in the root is the following

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["renderer/next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "renderer/next.config.js", "app", "dist"]
}

while the one in renderer/tsconfig.json is:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src": ["src"],
      "@src/*": ["src/*"]
    }
  },
  "include": ["./td/*.ts"]
}

Everything works fine when I run the project via

npm run dev

or

npm run build

but in vs-code I'm getting errors (in files inside the renderer folder) about constants and other declarations not found (which are defined in /renderer/td/env.d.ts)

Which means, I could keep working just seeing errors in the IDE and then the build process would work fine (i.e. I actually can get the values of the declared environment constants and access the defined paths aliases), but it's quite annoying...

Any idea on how to make vs-code properly detect the included files?

Just in case, the content of /renderer/ts/env/d/ts is something like:

/** Env constant set to (package.json).name */
declare const PACKAGE_NAME: string;
/** Env constant set to (package.json).version */
declare const PACKAGE_VERSION: string;
/** Env constant set to the build ID */
declare const BUILD_ID: string;
/** Env constant set to the git commit hash */
declare const COMMIT_HASH: string;
/** Env constant set to the 7 first characters of the git commit hash */
declare const COMMIT_HASH_SHORT: string;
/** Env constant set to `true` for the code to use in server side, `false` for the one delivered to the client */
declare const IS_SERVER: boolean;
/** Env constant set to `true` for the production build, `false` for development */
declare const IS_PRODUCTION: boolean;

which basically declares the environment variables defined in build time by webpack on NextJS

Edit: Uploaded a repository with the minimum configuration to reproduce this issue: https://github.com/danikaze/vscode-multi-tsconfig

Answer 1

I recently encountered a similar problem with my company's Vue JS project. Our project repository is structured as a mono-repo so there was a root level tsconfig.json as well as the children app level tsconfig.json.

But the VS Code extension for Vue JS files (Vetur) only took the project root level tsconfig.json for consideration. So my individual app level tsconfig were being ignored and hence I also had to suffer intellisense errors.

The workaround that worked for me is in the link at the bottom. You have to create a Multi-root workspace. Add both your root level directory, and the children renderer directory to the multi-root workspace. Make sure that the renderer directory is the first entry in your .code-workspace file's folders entry.

Your {name of your workspace}.code-workspace file should look something like the code below.

{
  "folders": [
     {
       "name": "your subdirectory app",
       "path": "./renderer"
     },
     {
       "name": "your root directory",
       "path": "."
     },
  ]
}

This should make VS Code account for your subdirectory's tsconfig file.

Github Issue