TypeScript: tsserver (vscode) does not recognize multiple tsconfig.json in the same directory

This is an incredibly annoying problem.

I understand the argument that tsc shouldn’t be used as a build tool, and tsconfig.json shouldn’t be used as build configuration. But it is because MS is using tsc as a linter that this issue is a problem for us.

Real-world example:

• compiler options in /tsconfig.json
• source code in /src/**/*.ts
• tests in /src/**/*.spec.ts
• /tsconfig.json obviously excludes *.spec.ts so they aren’t compiled into /lib and distributed to npm.
• something.spec.ts uses decorators (mocha-typescript) - VSCode gives many “Experimental support for decorators is a feature that is subject…”

We will not put our tests in a separate /tests folder because they are not visible. When specs are beside the files they’re testing, it is easy to see when tests are missing or haven’t been updated. So with the spec files in the same folder as the source code, how exactly would one go about telling tsc/VSCode that there are different requirements for spec files?

I have tried putting a spec-specific tsconfig.json in the /src/ folder and leaving the main tsconfig.json in the root. That didn’t work.

I can see that this isn’t necessarily a typescript issue - for me it’s more of a VS Code configuration issue - I should be able to specify which tsconfig matches which files - but I think the request here is that it “just work” because the files themselves already have the matchers needed to decide which config to use. There would just need to be some way to register all the config files or some naming convention, etc.

I’m more in favor of a VSCode config file that would register my two tsconfig.json files and based on the include/exclude settings in the file choose the proper config to pass to tsc for the file I’m looking at.

I don’t have the perfect solution, but I know that putting things like this at the top of all my spec files:

// - tests require packages from devDependencies
// - mocha has side-effects
// - chai has odd syntax
/* tslint:disable no-implicit-dependencies no-import-side-effect no-unused-expression function-name max-classes-per-file no-any */

shouldn’t be necessary. And looking at this makes the problems panel in VS Code useless.

extends works for maintaining multiple build files, but there’s still an editor issue. Jetbrains (IntelliJ / WebStorm) recently implemented IDE support for selecting the appropriate tsconfig file by exclude / include / files: see the blog post and bug

A rough description, they have configurable file name patterns for config files, expanding the lookup for tsconfig.json (say, to tsconfig.*.json - it seems they reverted the default pattern list since the post to just tsconfig.json again), and for each edited file select the first found config where the paths match.

Therefore, you could have, for example:

• tsconfig-base.json with common settings (not directly used)
• tsconfig.web.json with lib: ['dom'], types: [] and include: ['src'], exclude: ['*.test.ts', '**/__mocks__']
• tsconfig.test.json with types: ['node', 'jest'] and include: ['src/**/*.test.ts', 'src/**/__mocks__']
• tsconfig.scripts.json with types: ['node'] and exclude: ['node_modules', 'src']

And have the editor know that, e.g. describe() is invalid in scripts/start.ts, and window.location is invalid in src/App.test.ts

Is there any option of rethinking this?