Skip to content

Path completions for Node.js subpath imports #52460

Closed
@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

    Domain: Completion ListsThe issue relates to showing completion lists in an editorHelp WantedYou can do thisSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions