Path completions for Node.js subpath imports

[thetutlage]

Suggestion

Node.js for a while has a way to define import aliases (known as subpath imports) in package.json file. The subpath imports also work fine when I compile my code using tsc and inside my code editor (VSCode).

However, as I type the import path in my code editor, no suggestions related to subpath imports are shown.

Given, I have the following subpath import alias inside package.json.

{
  "imports": {
    "#controllers/*": "./app/controllers/*.js"
  }
}

I should be able to type #controllers and get suggestions. Infact, using an export symbol from one of the controller files should write the auto-import using the alias.

tsconfig.json

Following is a trimmed down version of my tsconfig.json file.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "lib": ["ESNext"],
    "rootDir": "./",
    "outDir": "./build",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "types": ["@types/node"]
  },
  "include": ["./**/*"],
  "exclude": ["./node_modules", "./build"]
}

🔍 Search Terms

• Node subpath imports
• Auto complete subpath imports
• Redirected by Adding intellisense support for node import mapping and subpath imports vscode#128064

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

Since, TypeScript can understand and compile subpath imports, it will be great, if they are also suggested during import autocomplete

📃 Motivating Example

Have nice experience of auto-importing files with aliases.

💻 Use Cases

Right now, I have to either manually type the complete import statement by hand. Or type the export symbol name and update the import path to use the subpath alias.

Attaching a small screen recording of the same

subpath-imports.mov

[xobotyi]

Same here, except the IDE used.

Problem is somehow fixable with paths cofiguration wthin tsconfig.json, but it becomes a problem for cases when some of used packages uses same import alias.

[mbrevda]

Looks like this was fixed in #55015

[RomainLanz]

Is there a version we can try to ensure it works as expected?

In the meantime, we are duplicating it inside the paths key of our tsconfig.

[mbrevda]

npm i typescript@next