add support for jsExtension Preference on auto import

Author: Kingwl

src/compiler/moduleSpecifiers.ts

@@ -3,11 +3,12 @@
 namespace ts.moduleSpecifiers {
     export interface ModuleSpecifierPreferences {
         importModuleSpecifierPreference?: "relative" | "non-relative";
+        includingJsExtensionOnAutoImports?: boolean;
     }
 
     // Note: fromSourceFile is just for usesJsExtensionOnImports
     export function getModuleSpecifier(compilerOptions: CompilerOptions, fromSourceFile: SourceFile, fromSourceFileName: string, toFileName: string, host: ModuleSpecifierResolutionHost, preferences: ModuleSpecifierPreferences = {}) {
-        const info = getInfo(compilerOptions, fromSourceFile, fromSourceFileName, host);
+        const info = getInfo(compilerOptions, fromSourceFile, fromSourceFileName, host, preferences);
         return getGlobalModuleSpecifier(toFileName, info, host, compilerOptions) ||
             first(getLocalModuleSpecifiers(toFileName, info, compilerOptions, preferences));
     }
@@ -24,7 +25,7 @@ namespace ts.moduleSpecifiers {
         const ambient = tryGetModuleNameFromAmbientModule(moduleSymbol);
         if (ambient) return [[ambient]];
 
-        const info = getInfo(compilerOptions, importingSourceFile, importingSourceFile.path, host);
+        const info = getInfo(compilerOptions, importingSourceFile, importingSourceFile.path, host, preferences);
         if (!files) {
             return Debug.fail("Files list must be present to resolve symlinks in specifier resolution");
         }
@@ -42,9 +43,9 @@ namespace ts.moduleSpecifiers {
         readonly sourceDirectory: string;
     }
     // importingSourceFileName is separate because getEditsForFileRename may need to specify an updated path
-    function getInfo(compilerOptions: CompilerOptions, importingSourceFile: SourceFile, importingSourceFileName: string, host: ModuleSpecifierResolutionHost): Info {
+    function getInfo(compilerOptions: CompilerOptions, importingSourceFile: SourceFile, importingSourceFileName: string, host: ModuleSpecifierResolutionHost, preferences: ModuleSpecifierPreferences): Info {
         const moduleResolutionKind = getEmitModuleResolutionKind(compilerOptions);
-        const addJsExtension = usesJsExtensionOnImports(importingSourceFile);
+        const addJsExtension = usesJsExtensionOnImports(importingSourceFile, preferences);
         const getCanonicalFileName = createGetCanonicalFileName(host.useCaseSensitiveFileNames ? host.useCaseSensitiveFileNames() : true);
         const sourceDirectory = getDirectoryPath(importingSourceFileName);
         return { moduleResolutionKind, addJsExtension, getCanonicalFileName, sourceDirectory };
@@ -129,8 +130,8 @@ namespace ts.moduleSpecifiers {
         return relativeFirst ? [relativePath, importRelativeToBaseUrl] : [importRelativeToBaseUrl, relativePath];
     }
 
-    function usesJsExtensionOnImports({ imports }: SourceFile): boolean {
-        return firstDefined(imports, ({ text }) => pathIsRelative(text) ? fileExtensionIs(text, Extension.Js) : undefined) || false;
+    function usesJsExtensionOnImports({ imports }: SourceFile, preferences: ModuleSpecifierPreferences): boolean {
+        return firstDefined(imports, ({ text }) => pathIsRelative(text) ? fileExtensionIs(text, Extension.Js) : undefined) || !!preferences.includingJsExtensionOnAutoImports;
     }
 
     function discoverProbableSymlinks(files: ReadonlyArray<SourceFile>, getCanonicalFileName: (file: string) => string, host: ModuleSpecifierResolutionHost) {

src/harness/fourslash.ts

@@ -2649,7 +2649,7 @@ Actual: ${stringify(fullActual)}`);
             }
             const range = ts.firstOrUndefined(ranges);
 
-            const codeFixes = this.getCodeFixes(fileName, errorCode, preferences).filter(f => f.fixId === undefined); // TODO: GH#20315 filter out those that use the import fix ID;
+            const codeFixes = this.getCodeFixes(fileName, errorCode, preferences).filter(f => f.fixName === "import" && f.fixId === undefined); // TODO: GH#20315 filter out those that use the import fix ID;
 
             if (codeFixes.length === 0) {
                 if (expectedTextArray.length !== 0) {

src/server/protocol.ts

@@ -2733,6 +2733,7 @@ namespace ts.server.protocol {
         readonly includeCompletionsWithInsertText?: boolean;
         readonly importModuleSpecifierPreference?: "relative" | "non-relative";
         readonly allowTextChangesInNewFiles?: boolean;
+        readonly includingJsExtensionOnAutoImports?: boolean;
     }
 
     export interface CompilerOptions {

src/services/types.ts

@@ -240,6 +240,7 @@ namespace ts {
         readonly includeCompletionsWithInsertText?: boolean;
         readonly importModuleSpecifierPreference?: "relative" | "non-relative";
         readonly allowTextChangesInNewFiles?: boolean;
+        readonly includingJsExtensionOnAutoImports?: boolean;
     }
     /* @internal */
     export const defaultPreferences: UserPreferences = {};

tests/cases/fourslash/fourslash.ts

@@ -531,6 +531,7 @@ declare namespace FourSlashInterface {
         includeCompletionsForModuleExports?: boolean;
         includeInsertTextCompletions?: boolean;
         importModuleSpecifierPreference?: "relative" | "non-relative";
+        includingJsExtensionOnAutoImports?: boolean
     }
     interface CompletionsAtOptions extends UserPreferences {
         triggerCharacter?: string;

tests/cases/fourslash/importNameCodeFix_jsExtensionPreference.ts

@@ -0,0 +1,77 @@
+/// <reference path="fourslash.ts" />
+
+// @moduleResolution: node
+// @noLib: true
+// @allowJs: true
+// @checkJs: true
+
+// @Filename: /a.js
+////export function a() {}
+
+// @Filename: /b.js
+////a;
+
+// @Filename: /c.js
+////a;
+
+// @Filename: /d.ts
+////a;
+
+// @Filename: /e.ts
+////a;
+
+// @Filename: /f.ts
+////export function f() {}
+
+// @Filename: /g.ts
+////f;
+
+// @Filename: /h.ts
+////export default function h() {}
+
+// @Filename: /i.ts
+////h;
+
+goTo.file("/b.js");
+verify.importFixAtPosition([
+`import { a } from "./a";
+
+a;`]);
+
+goTo.file("/c.js");
+verify.importFixAtPosition([
+`import { a } from "./a.js";
+
+a;`], /* errorCode */ undefined, {
+    includingJsExtensionOnAutoImports: true
+});
+
+goTo.file("/d.ts");
+verify.importFixAtPosition([
+`import { a } from "./a";
+
+a;`]);
+
+goTo.file("/e.ts");
+verify.importFixAtPosition([
+`import { a } from "./a.js";
+
+a;`], /* errorCode */ undefined, {
+    includingJsExtensionOnAutoImports: true
+});
+
+goTo.file("/g.ts");
+verify.importFixAtPosition([
+`import { f } from "./f.js";
+
+f;`], /* errorCode */ undefined, {
+    includingJsExtensionOnAutoImports: true
+});
+
+goTo.file("/i.ts");
+verify.importFixAtPosition([
+`import h from "./h.js";
+
+h;`], /* errorCode */ undefined, {
+    includingJsExtensionOnAutoImports: true
+});