CODEWITHSUNDEEP
typescriptvisual-studio-code
danikaze
danikaze

Reputation: 1654

Multiple tsconfig.json in vs-code for typescript project

First of all, I know there are several similar questions, but couldn't find solution for this problem in any of them...

So, I have an ElectronJS project created with Nextron where the file structure is something like this:

├── main/
│   └──...
├── renderer/
│   ├── src/
│   │   └── index.ts
│   ├── td/
│   │   └── env.d.ts
│   ├── ...
│   └── tsconfig.json
├── tsconfig.json
└──...

The content of the tsconfig.json file in the root is the following

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["renderer/next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "renderer/next.config.js", "app", "dist"]
}

while the one in renderer/tsconfig.json is:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src": ["src"],
      "@src/*": ["src/*"]
    }
  },
  "include": ["./td/*.ts"]
}

Everything works fine when I run the project via 

npm run dev

or 

npm run build

but in vs-code I'm getting errors (in files inside the renderer folder) about constants and other declarations not found (which are defined in /renderer/td/env.d.ts)

Which means, I could keep working just seeing errors in the IDE and then the build process would work fine (i.e. I actually can get the values of the declared environment constants and access the defined paths aliases), but it's quite annoying...

Any idea on how to make vs-code properly detect the included files?

Just in case, the content of /renderer/ts/env/d/ts is something like:

/** Env constant set to (package.json).name */
declare const PACKAGE_NAME: string;
/** Env constant set to (package.json).version */
declare const PACKAGE_VERSION: string;
/** Env constant set to the build ID */
declare const BUILD_ID: string;
/** Env constant set to the git commit hash */
declare const COMMIT_HASH: string;
/** Env constant set to the 7 first characters of the git commit hash */
declare const COMMIT_HASH_SHORT: string;
/** Env constant set to `true` for the code to use in server side, `false` for the one delivered to the client */
declare const IS_SERVER: boolean;
/** Env constant set to `true` for the production build, `false` for development */
declare const IS_PRODUCTION: boolean;

which basically declares the environment variables defined in build time by webpack on NextJS

Edit: Uploaded a repository with the minimum configuration to reproduce this issue: https://github.com/danikaze/vscode-multi-tsconfig

Upvotes: 6

Views: 6619

Answers (3)

Alexandre Pelagaggi
Alexandre Pelagaggi

Reputation: 421

For me adding a multi-root directive on .vscode/settings.json solved this issue.

I.E.

{
  "eslint.workingDirectories": [
    "repo1",
    "repo2",
    "repo3",
  ]
}

Upvotes: 6

danikaze
danikaze

Reputation: 1654

So... I opened an issue in github and after several investigation and opening a 2nd issue, looks like in the end the problem was different.

Basically, the source of the problem was importing external data from the included file, and that, is not supported by specs.

Because env.d.ts contains an import statement, the file is considered a module (module variables are not part of the global scope and instead must be explicitly imported)

You can workaround this by explicitly declaring PACKAGE_NAME in the global scope:

The solution/official thread

Upvotes: 1

Aningaaq
Aningaaq

Reputation: 184

I recently encountered a similar problem with my company's Vue JS project. Our project repository is structured as a mono-repo so there was a root level tsconfig.json as well as the children app level tsconfig.json.

But the VS Code extension for Vue JS files (Vetur) only took the project root level tsconfig.json for consideration. So my individual app level tsconfig were being ignored and hence I also had to suffer intellisense errors.

The workaround that worked for me is in the link at the bottom. You have to create a Multi-root workspace. Add both your root level directory, and the children renderer directory to the multi-root workspace. Make sure that the renderer directory is the first entry in your .code-workspace file's folders entry.

Your {name of your workspace}.code-workspace file should look something like the code below.

{
  "folders": [
     {
       "name": "your subdirectory app",
       "path": "./renderer"
     },
     {
       "name": "your root directory",
       "path": "."
     },
  ]
}

This should make VS Code account for your subdirectory's tsconfig file.

Github Issue

Upvotes: 5

Related Questions