Vscode TS language features unavailable when tests/** are not included in the tsconfig

Question

I would like my typescript tests to receive linting, code completion, vscode intellisense (ts language features) when the test folder is adjacent to the src. I do NOT want the tests to transpile when I build my typescript project.

My typescript node project is structured like this:

.    
├── server
│   │ 
│   │    
│   ├── src
│   │   │
│   │   └── app.ts
│   ├── test
│   │   │
│   │   └── app.test.ts
│   ├── node_modules/
│   ├── package-lock.json
│   ├── package.json
│   ├── tslint.json
│   └── tsconfig.json
├── front_end/
└── README.md

With my tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "ESNext",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

When I navigate to my test files in vscode, the vscode language feature wont recognize types and packages installed in node_modules. SURPRISINGLY, if I open vscode only in the server folder (as you can see from my folder structure server is not the root), the language features work 🧐.

The tests use ts-jest to run so the tsc is not needed here. Would it be better practice to extend a tsconfig.json for tests 🤔?

Is this something that can be fixed in the settings or should I submit a bug to https://github.com/microsoft/vscode/issues/new/choose.

Answer 1

Vscode has a problem with a one root tsconfig file. An adjacent test folder to src will use the tsconfig (added in this pull request) however it won't work if the folder you open is one directory above it (for example if you have a server & client folder). A solution is being tracked in this issue: https://github.com/Microsoft/vscode/issues/12463.

In addition, if you want to upgrade to eslint (tslint is deprecated), the typescript parser will also force you to add a tsconfig file to the test folder if you wish to keep the test folder excluded in the main tsconfig. Link to eslint multi tsconfig docs.

The easy solution is to use two extra tsconfigs. One for the linter tsconfig.eslint.json and one for tests inside the test folder: test/tsconfig.json with the following content:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": true
  },
  "include": ["./**/*"]
}

Not elegant but a better solution does not exist at this moment.