Typescript include and file path VS Code recognition

Question

I have been struggling for a while now with the inclusion of my tsconfig files into VS Code. Whereas my code compiles just fine, I often have errors reported by VS Code, because VS Code did not associate the tsconfig file to the current ts file.

I check if my main.ts file is associated to any tsconfig in VS Code by executing the following:

TypeScript: Go to Project Configuration

I received an error (see link below) telling my that no tsconfig is found. You can also see the folder strucutre in the linked image.

To give a short overview the structure looks like this:

root
`-- development
    `--client
       |
       |--code
       |    |--.. various
       |    `-- main.ts
       |
       `--config
            |--.. various
            `--tsconfig.json

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es2017",
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "jsx": "react"
  },
  "include": [
    "./../code/**/*"
  ],
  "files": [
    "./../code/main.ts"
  ]
}

VS Code Screenshot

Answer 1

Move the tsconfig.json to the root of your project, and change the paths accordingly:

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es2017",
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "jsx": "react"
  },
  "include": [
    "development/client/code/**/*"
  ],
  "files": [
    "development/client/code/main.ts"
  ]
}

Answer 2

It appears that VSCode looks up from the ts file to find a tsconfig ( https://github.com/Microsoft/vscode/issues/3772#issuecomment-329126952 )

If you move the client tsconfig up a directory it should work.

root
`-- development
    `--client
       |--tsconfig.json
       |
       |--code
       |    |--.. various
       |    `-- main.ts
       |
       `--config
            `--.. various

As the comment suggests you might want to add a tsconfig.base.json to the root folder and include it in each tsconfig.json so that you can have some common/default settings.