importModuleSpecifierEnding does not apply for module specifier completions (manual imports)

[wsmd]

• VSCode Version: 1.44.2
• OS Version: macOS 10.14.6

A while back, the importModuleSpecifierEnding preference was added to specify the preferred path ending for auto imports (see microsoft/vscode#90405).

{
  "javascript.preferences.importModuleSpecifierEnding": "js",
}

While this seems to work with auto imports (i.e. referencing an export of another file and letting the editor perform module importing automatically), it does not work with path completions when typing the import statement manually.

import { someFunction } from '../|';
                                 ^ when picking a file from path suggestions here,
                                   the file extension seems to always be omitted

Actual Behavior:

import { someFunction } from '../someModule';

Expected Behavior:

import { someFunction } from '../someModule.js';

Steps to Reproduce:

1. Set javascript.preferences.importModuleSpecifierEnding to "js"
2. Start typing an import statement of a relative js module
3. When specifying the import source, choose a relative file path from the completions list
4. The ".js" extension appears to be omitted

Expected Behavior:

The file chosen from the suggestions list should have the ".js" extension.

---

Does this issue occur when all extensions are disabled?: Yes

[andrewbranch]

This should be transferred to the TypeScript repo when someone gets to it.

[andrewbranch]

See #42157 for a description of how to fix this

[Simar-B]

@andrewbranch Hi there, you said that in #42157 that

This seems reasonable to me, looks like we’d want to pass the preferences in stringCompletions.ts all the way down into getCompletionEntriesForRelativeModules and use that preference in the getExtensionOptions() call.

I'm wondering if you could elaborate more on what I'm supposed to do with preference in the getExtenionOptions() call.

Sorry if this is a dumb question, it's my first time doing open source.

[andrewbranch]

getExtensionOptions() doesn’t need to change at all—it already accepts a second parameter includeExtensions, but we aren’t currently passing that parameter to it in getCompletionEntriesForRelativeModules. I believe all we have to do is thread preferences through from getStringLiteralCompletions and then use it like

- const extensions = getExtensionOptions(compilerOptions);
+ const extensions = getExtensionOptions(compilerOptions, preferences.importModuleSpecifierEnding === "js");

[Simar-B]

@andrewbranch I was doing some debugging thanks to your article and I found that the preferences.importModuleSpecifierEnding corresponds to the user's typescript.preferences.importModuleSpecifierEnding and not javascript.preferences.importModuleSpecifierEnding. So I'm wondering if this is as intended or if I'm missing something since I thought that the preferences.importModuleSpecifierEndingwould have corresponded to typescript.preferences.importModuleSpecifierEnding

[andrewbranch]

I believe VS Code passes along whichever one is relevant based on what kind of file you're currently editing.

[vdegenne]

I am still having this problem.

[ivanhofer]

Me too. Whenever I move a file, I have to update all imports because VS Code rewrites the imports to the new path. During that process the .js extension gets removed from the import.

[andrewbranch]

That’s #50710, fixed by #51702

[ivanhofer]

@andrewbranch Thanks! Can't wait until this is released.
But I'm assuming the auto import, described by the original issue, is not affected by this fix, right?

[andrewbranch]

This issue was about path completions (you are typing in the module specifier of an import declaration). #50710 is about the Move To New File functionality, which adds and updates imports as part of moving the declaration. What we usually call “auto imports” is yet another thing.

[ivanhofer]

Right! Sorry it was a long day 😅
Now I get it. The path completion works fine for me.

The issue I encounter is:
when opening the "Quick Fix..." dialog in VS Code, it shows 'Add import from "./myFile"' instead of 'Add import from "./myFile.js"'.

And I just found out why this happens only in certain parts of my application. I have set rootDirs inside my tsconfig.json. Whenever I bring up this dialog in a file within those directories, the auto-import suggestion is missing the .js. As soon as I delete rootDirs from my tsconfig, it works.

[andrewbranch]

I’m not familiar with the root cause of that one, but it sounds like it could be related to #50725, which is also handled in #51702.

[ivanhofer]

Could be it. Thanks for your help!