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

[DanielRosenwasser]

I believe #55015 adds auto-imports, but not path completions within the string literals.

[tonivj5]

I can confirm in 5.6.1-rc helps with auto-imports when there's already an import.

1. With subpath import already in file:
   
2. Without any reference in file:
   

And, as @DanielRosenwasser has mentioned, there isn't any completions in import string path

[custardcream98]

For now, it seems that adding the following to your tsconfig.json file does the trick:

{
  "compilerOptions": {
    "paths": {
      "#*":["./src/*"],
    }
  }
}

[DanielRosenwasser]

@tonivj5 what compilerOptions do you have?

[tonivj5]

@DanielRosenwasser here it's

  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",

    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

    "target": "es2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "moduleDetection": "force",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "verbatimModuleSyntax": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "lib": ["es2022", "ESNext.Disposable", "dom", "es2023.array"],

    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "importHelpers": true,
    "pretty": true,

    "sourceMap": true,
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "incremental": true,

    "emitDeclarationOnly": false,
    "noEmit": false,
    "noEmitOnError": true,

    "tsBuildInfoFile": "./dist/tsconfig.app.tsbuildinfo"
  },

[anthonyma94]

Sorry to necro this, but I'm still having the issue with no completions in import string path. I'm running VSCode 1.98.0 and TS 5.7.3.

package.json

"imports": {
    "#ui/*": {
      "types": [
        "./src/*.tsx",
        "./src/*.ts",
        "./src/*"
      ],
      "default": [
        "./src/*"
      ]
    }
}

Autosuggest works for symbols

But not the path itself

[Andarist]

You could create a repro case and open a new issue about this. It's hard to investigate this given the incomplete provided information.

[mbrevda]

Please link to the issue from here so that we can follow along

[anthonyma94]

@Andarist @mbrevda sorry for the late response, created a new issue #61504.