Support projects with multiple tsconfig.json

[Pajn]

We have a project that consists of multiple typescript projects, as it's conceptually the same project for us we does not want to open only subsets of it. Atom supports this case, but it would be great if VS Code supported it too.

An example of the folder structure is:

client/
  lib/
    app.ts
  tsconfig.json
server/
  some-service
    lib/
      service.ts
    tsconfig.json

[Pajn]

I don't know if this should be in this request, or in an another but I'm placing it here for now.

It would also be great that when I have a npm linked module which are also in the opened project and use go to definition on something that comes from that module, I would end up at the actual location instead of inside node_modules. Or maybe easier, if I try to access a file over a symlink and that symlink resolves to a path inside the opened folder, VS Code would open the resolved file instead.

[egamma]

@Pajn the setup in your description is supported and is also a setup we use in the VS Code source code https://github.com/Microsoft/vscode. What makes you believe that this isn't supported?

[Pajn]

Before when I opened the complete project I got errors on for example async/await that I must target ES6 to use it, which we are. However those were gone when I opened sub-projects so the tsconfig.json i in the root.
However, when I open it now it seems to work so I can't really say what happened before :/

Feel free to ignore that, if I see it again I will try to track it down better. Should I close this and open a new issue for the feature request in the comment?

[egamma]

I'll close this one, pls reopen if you run into the behavour you described above again.

Please open a separate issue against microsoft/typescript about the go-to definition behaviour mentioned above. The TypeScript language server implements the go-to-definition behaviour.

[darkyen]

I have the same issue, however I am sharing a lot of my tsconfig.json in root. So my entire folder structure is

/
    /src
       /server
          tsconfig.json <- Adds things that make sense only on server (like target es6)
       /client
          tsconfig.json <- adds jsx: "preserve" 
    tsconfig.json

When I use the typescript compiler (which is running via webpack's ts-loader) everything works perfectly and I get no errors. However, in the editor I constantly get warnings regarding Cannot use max unless --jsx is provided.

[darkyen]

For anyone else having this issue where your compiler does not work alongside the editor please goto .vscode/settings.json and add "typescript.tsdk": "./node_modules/typescript/lib". It will bring parity between the different versions.

[nathanosdev]

I'm running into this issue now with multiple tsconfig files in the root directory which have different names.

My main configuration file: tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "target": "es6",
    "removeComments": true,
    "sourceRoot": "./src",
    "outDir": "./build",
    "noEmit": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": [
      "es6"
    ],
    "types": [
      "node",
      "mocha"
    ]
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    ".vscode",
    "build",
    "deploy",
    "node_modules"
  ]
}

My test configuration file: tsconfig.test.json

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "target": "es6",
    "noEmit": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": [
      "es6"
    ],
    "types": [
      "node",
      "mocha"
    ]
  },
  "include": [
    "src/**/*.ts",
    "test/**/*.ts"
  ],
  "exclude": [
    
  ]
}

Everything works when I compile using tsc and passing in the required configuration files as an argument, but in VSCode I get the Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. error in my *.spec.ts files since they are ignored by the main tsconfig file.

I tried @darkyen's suggestion but VSCode still ignores my test config file.

VSCode does however recognize that the test config is a tsconfig as I get the proper intellisense.

I realize I could fix this by making one tsconfig.json just for intellisense in the editor, and then another 2 separate config files for my build and test configurations, but it feels really hacky to me.

[vasanth-asokan]

I am running into this too, exactly as @AnimaMundi says. I have tried @darkyen's suggestion and that doesn't fix the issue. @egamma could we please reopen this or could you please describe settings if any to get this setup working?

[darkyen]

Have you tried turning it off and on again?

[nathanosdev]

@vasanth-asokan the work around that I've been using is a main tsconfig.json file which is configured purely to support intellisense in the editor, I don't use it in any compilation. Then I use a tsconfig.app.json for my main application's compilation and a tsconfig.test.json for test compilation. It's not ideal, but at least it works.

[egamma]

I'm running into this issue now with multiple tsconfig files in the root directory which have different names.

@AnimaMundi I assume when use these tsconfig files with different names from tsc, then you call tsc with tsc -p tsconfig.test.json? I don't think that the typescript server supports tsonfig files with different names. @mattbierner can you pls confirm.

[nathanosdev]

Yeah that's exactly what I do. I guess that restriction on TypeScript server would put the problem outside of VSCode's scope.

[borekb]

Some of our projects also use different versions of TypeScript in their respective node_modules folders. Is this supported by VSCode, currently? I only see a way to set a single workspace version of TS.

[jameshulse]

@AnimaMundi I ran in to what sounds like a similar issue but managed to solve it relatively elegantly.

Typescript walks up the directories from a .ts file until it finds a tsconfig.json so put your config as close to your code as possible if you have different requirements. So in your case, that is one in the test folder and one in your app folder. Typescript configuration has a concept of 'extending' other configuration so my final setup was this:

/app
    /client
        client.ts
        tsconfig.json <- Client specific Typescript configuration ("extends": "../tsconfig.base.json")
   server.ts
   tsconfig.json <- Server specific Typescript configuration ("extends": "./tsconfig.base.json")
   tsconfig.base.json <- Shared configuration

This solved my intellisense and compilation issues.

[abreu-dev]

Would be great if we can have all tsconfig files in the root folder, instead of having in multiple folders.