VSCode not recognizing types in sub directories

Question

VSCode isn't recognizing Jest types. I'm getting the following error:

Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`  and then add `jest` or `mocha` to the types field in your tsconfig.

I have installed @types/jest and added jest to the types field in my tsconfig file but it's not working.

I notice, however, it only happens for subdirectories as I have a monorepo with the following file structure:

 - app1
 - app2
 - app3

If I open only the app1 folder, then I don't get any errors. How can I setup VSCode to work with a folder having multiple projects?

I know VSCode allow us to set up multiple workspaces but that's not what I'm looking for. Every folder has their own node_modules and a tsconfig file. I just want VSCode to recognize them for every folder rather than looking at the root level for node_modules.

I've also tried to create a tsconfig file at the root level adding this:

{
  "compilerOptions": {
    "typeRoots": ["app1/node_modules/@types", "app2/node_modules/@types"]
  }
}

But it didn't work.

Answer 1

I got a similar issue and my problem was that I was using "include"/"exclude" in my tsconfig.json, which messes with types if the file is not included or if it's excluded. Removed both options and now it works without further config.

If this is not your case, I suggest you to take a look at:

https://github.com/Microsoft/vscode/issues/50910#issuecomment-393719145

Answer 2

I'm not sure exactly why (presumably due to the way VSCode just does things), but with the following dir structure:

.
├── app1
│   ├── index.ts
│   ├── node_modules
│   └── package.json
└── app2
    ├── index.ts
    ├── node_modules
    └── package.json

... the following seems to be the case:

1. You can eliminate all "Module not found" complaints in app1/index.ts, app2/index.ts, etc. by adding a tsconfig.json (even if only containing empty brackets {}) in your root dir.

2. You can enable intellisense in app1/index.ts by adding a tsconfig.json file (even if only containing empty brackets {}) in app1, in app2/index.ts by adding a tsconfig.json file (even if only containing empty brackets {}) in app2, etc.

I don't like this "solution". I'd much prefer if I could get VSCode to find the right libraries by adding something in .vscode/settings for the workspace rather than src files, but I don't think that's possible at the moment. I plan to submit a request to that effect to TypeScript/issues.