Can I set a typescript configuration `tsconfig.json` path on the VSCode IDE to use?

Question

I have a project structure like the following:

.
└── my-app/
    ├── .configs/
    │   ├── tsconfig.json
    │   ├── webpack.merge.ts
    │   ├── webpack.dev.config.ts
    │   └── webpack.prod.config.ts
    ├── node_modules
    ├── src/
    │   └── index.tsx
    └── package.json

Running TypeScript on the commandline tsc --project .configs/tsconfig.json compiles without issues. But VSCode IDE shows me errors/warnings in the .tsx. I don't want to disable TS Warnings so this won't work for me: How to disable TypeScript warnings in VSCode?, Why does VS Code throw "Cannot find module 'typescript'. ts(2307)" while the module is there?

Is there a setting in VSCode that I set a path so that VSCode IDE TypeScript can use for the current project. I understand that if I put the tsconfig.json in the root dir (my-app) VSCode IDE works as expected. But I would like to keep all configuration scripts in a single folder instead of the root dir. Does VSCode allow for this?

Rai

tsconfig.json normally stays in the root directory of your project. It applies to all source files in the same directory and in the subdirectories. – Zayin

Answer 1

As far as I know, VS Code (or more precisely, the built-in TS extension) doesn't support having your config any other place.

What you could do is placing a tsconfig.json in your root that extends your .config/tsconfig.json. It's not the prettiest, but you can make it pretty seamless by 1) adding it to your .git/info/exclude to make git ignore it (without having to modify .gitignore) and 2) adding it to your Files: Exclude VS Code option to hide it from your explorer in VS Code.

Dobla

Answer 2

As mentioned in this answer https://mcmap.net/q/342441/-visual-studio-code-can-39-t-resolve-angular-39-s-tsconfig-paths to enable IntelliSense for a particular folder in your project you can have a tsconfig.json in that folder and open it as a part of your workspace via File -> Add Folder to Workspace…. So in your case you can create tsconfig.base.json or just tsconfig.json in your project root and then create a tsconfig.json in src/ folder which extends your root tsconfig.json. So VSCode will run IntelliSense for src/ with tsconfig.json inside it. In result errors and warnings will disappear.

Prittleprattle

This does work, but keep in mind that you cannot add files individually to VSCode workspaces. So if you want to track a readme.md on your project root, workspaces are a non-starter. – Borneo

Answer 3

Go to settings in vscode and search to TypeScript › Preferences: Import Module Specifier then choose the non-relative option.

Diode