Manual import path mapping for TypeScript projects

[alshdavid]

When using TypeScript with a monorepo containing multiple packages, there is no way to have effective source path mapping for intellisense purposes.

It would be very helpful to have the capacity to manually add path resolution configuration for VSCode in the workspace settings.json rather than relying on VSCode figuring out paths from the available configuration.

Problem Case:

Imagine I have two libraries a and b:

/packages
  /a
    /src
      index.ts
  /b
    /src
      index.ts

If inside b I import a using:

import a from '@org/a'

During compilation, the above path would be resolved by webpack (or yarn workspaces) to ../a, where the main key in the package.json will instruct node to find a/dist/index.js.

During development, I want to map @org/a to ../a/src/index.ts so intellisense will send me to the source folder rather than the build folder.

TypeScript has a paths option in the tsconfig.json which I can use inside b by mapping:

{
  "paths" {
    "@org/a": ["../a/src"]
  }
}

This works well in my IDE however, when using tsconfig paths, the typescript compiler for b emits a's types in it's build folder when compiled - like so:

/packages
  /a
    /build
      index.d.ts
      index.js
    /src
      index.ts
  /b
    /build
      /a
        index.d.ts
      /b
        index.d.ts
      index.js
    /src
      index.ts

For comparison, without including the tsconfig.json paths configuration inside b, this is what b's build folder looks like:

/b
  /build
    index.d.ts
    index.js
  /src
    index.ts

Using tsconfig.sjon paths results in the inclusion of files I don't want in my project and breaks the types key in b's package.json

Module mapping for development really isn't TypeScript's job, I feel it's important that we include the ability for VSCode to resolve module pathing via a manual configuration.

Suggestion:

Perhaps something like:

.vscode/settings.json

{
   "typescript": {
       "paths": {
          "@org/a": ["./packages/a"]
       }
   }
}

[mjbvz]

@alshdavid To workaround this, could you have two tsconfigs:

• tsconfig.json — One used by IntelliSense that specifies the path mapping
• tsconfig.build.json  — One used by compile that does not include the path mapping

That would accomplish the same thing as a setting

[alshdavid]

I suppose that is a solution.

I feel the inclusion of arbitrary (and ignored) compiler configuration to help IDEs interpret what will be resolved differently after compile time only adds confusion.

Is it possible to instruct vscode to look at a specific tsconfig? perhaps that way I could configure a tsconfig.ide.json

[mjbvz]

VS Code currently always looks for files called tsconfig.json. That's why I proposed having separate tsconfig.build.json. See #33094 for using other tsconfig names

A vscode setting would also be a separate configuration so I'm not convinced it would any better (and it would be vscode specific)

[shrinktofit]

+1 The key point is IDE intelligence.

[fbartho]

I'm also running into this issue. I'm finding it tricky to visualize how to model everything