Skip to content

Manual import path mapping for TypeScript projects #36105

Closed
@alshdavid

Description

@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"]
       }
   }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions