Skip to content

Path completions for Node.js subpath imports #52460

@thetutlage

Description

@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

✅ 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions