how to use multiple tsconfig files (with conflicting compiler options)?

Question

My codebase contains two typescript projects:

• for a react web app
• for web workers

The web worker codebase is part of my public/ folder. Which means that there are two typescript projects in the same workspace. How can I make this work with vs-code ?

So far my question is basically a duplicate of: How to use multiple tsconfig files in vs-code?

The accepted answer explains how to set up a basic configuration and then extend it:

//tsconfig.worker.json:

{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/app"
  ]
}

But this doesn't work in my case. For the worker.ts I need a different lib configuration than for the react app.
It is possible to override that configuration in my tsconfig.worker.json and to compile with the new settings. But for autocompletion and error highlighting, vs-code only uses the tsconfig.json, which is not compatible with the webworker source code.

Answer 1

give each project its own tsconfig.json in the same directory as the project, like so:

└── src
    ├── tsconfig.json
    ├── shared
    │   ├── index.ts
    │   └── tsconfig.json
    ├── backend
    │   ├── index.ts
    │   └── tsconfig.json
    └── frontend
        ├── index.ts
        └── tsconfig.json 

Put all the common settings in the root tsconfig.json, and the project specific ones in the its own tsconfig.json. DO NOT name them anything other than tsconfig.json.

Make sure each dependent config extends the root config and has the correct path to it, e.g.:

{
    "extends": "../tsconfig.json"
    .
    .
    .
}

The rootDir setting for each subprojects will by default be ./, which means they will be nicely self-contained / encapsulated. But if the root config changed that value, you will probably have to override it in each tsconfig.json.

You can enable and manage dependencies between subprojects using Project References, as described in this answer.