Search code examples
javascripttypescriptautocompletevisual-studio-codetsconfig

Typescript include and file path VS Code recognition


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


Solution

  • 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.