For path completions, include extension as a kindModifier

Author: Andy Hanson

src/harness/fourslash.ts

@@ -886,8 +886,8 @@ namespace FourSlash {
         }
 
         private verifyCompletionEntry(actual: ts.CompletionEntry, expected: FourSlashInterface.ExpectedCompletionEntry) {
-            const { insertText, replacementSpan, hasAction, isRecommended, kind, text, documentation, tags, source, sourceDisplay } = typeof expected === "string"
-                ? { insertText: undefined, replacementSpan: undefined, hasAction: undefined, isRecommended: undefined, kind: undefined, text: undefined, documentation: undefined, tags: undefined, source: undefined, sourceDisplay: undefined }
+            const { insertText, replacementSpan, hasAction, isRecommended, kind, kindModifiers, text, documentation, tags, source, sourceDisplay } = typeof expected === "string"
+                ? { insertText: undefined, replacementSpan: undefined, hasAction: undefined, isRecommended: undefined, kind: undefined, kindModifiers: undefined, text: undefined, documentation: undefined, tags: undefined, source: undefined, sourceDisplay: undefined }
                 : expected;
 
             if (actual.insertText !== insertText) {
@@ -901,7 +901,10 @@ namespace FourSlash {
                 this.raiseError(`Expected completion replacementSpan to be ${stringify(convertedReplacementSpan)}, got ${stringify(actual.replacementSpan)}`);
             }
 
-            if (kind !== undefined) assert.equal(actual.kind, kind);
+            if (kind !== undefined || kindModifiers !== undefined) {
+                assert.equal(actual.kind, kind);
+                assert.equal(actual.kindModifiers, kindModifiers || "");
+            }
 
             assert.equal(actual.hasAction, hasAction);
             assert.equal(actual.isRecommended, isRecommended);
@@ -4784,6 +4787,7 @@ namespace FourSlashInterface {
         readonly hasAction?: boolean, // If not specified, will assert that this is false.
         readonly isRecommended?: boolean; // If not specified, will assert that this is false.
         readonly kind?: string, // If not specified, won't assert about this
+        readonly kindModifiers?: string, // Must be paired with 'kind'
         readonly text: string;
         readonly documentation: string;
         readonly sourceDisplay?: string;

src/services/completions.ts

@@ -101,9 +101,23 @@ namespace ts.Completions {
     function convertPathCompletions(pathCompletions: ReadonlyArray<PathCompletions.PathCompletion>): CompletionInfo {
         const isGlobalCompletion = false; // We don't want the editor to offer any other completions, such as snippets, inside a comment.
         const isNewIdentifierLocation = true; // The user may type in a path that doesn't yet exist, creating a "new identifier" with respect to the collection of identifiers the server is aware of.
-        const entries = pathCompletions.map(({ name, kind, span }) => ({ name, kind, kindModifiers: ScriptElementKindModifier.none, sortText: "0", replacementSpan: span }));
+        const entries = pathCompletions.map(({ name, kind, span, extension }): CompletionEntry =>
+            ({ name, kind, kindModifiers: kindModifiersFromExtension(extension), sortText: "0", replacementSpan: span }));
         return { isGlobalCompletion, isMemberCompletion: false, isNewIdentifierLocation, entries };
     }
+    function kindModifiersFromExtension(extension: Extension | undefined): ScriptElementKindModifier {
+        switch (extension) {
+            case Extension.Dts: return ScriptElementKindModifier.dtsModifier;
+            case Extension.Js: return ScriptElementKindModifier.jsModifier;
+            case Extension.Json: return ScriptElementKindModifier.jsonModifier;
+            case Extension.Jsx: return ScriptElementKindModifier.jsxModifier;
+            case Extension.Ts: return ScriptElementKindModifier.tsModifier;
+            case Extension.Tsx: return ScriptElementKindModifier.tsxModifier;
+            case undefined: return ScriptElementKindModifier.none;
+            default:
+                return Debug.assertNever(extension);
+        }
+    }
 
     function jsdocCompletionInfo(entries: CompletionEntry[]): CompletionInfo {
         return { isGlobalCompletion: false, isMemberCompletion: false, isNewIdentifierLocation: false, entries };
@@ -638,7 +652,7 @@ namespace ts.Completions {
         switch (completion.kind) {
             case StringLiteralCompletionKind.Paths: {
                 const match = find(completion.paths, p => p.name === name);
-                return match && createCompletionDetails(name, ScriptElementKindModifier.none, match.kind, [textPart(name)]);
+                return match && createCompletionDetails(name, kindModifiersFromExtension(match.extension), match.kind, [textPart(name)]);
             }
             case StringLiteralCompletionKind.Properties: {
                 const match = find(completion.symbols, s => s.name === name);

src/services/pathCompletions.ts

@@ -3,17 +3,22 @@ namespace ts.Completions.PathCompletions {
     export interface NameAndKind {
         readonly name: string;
         readonly kind: ScriptElementKind.scriptElement | ScriptElementKind.directory | ScriptElementKind.externalModuleName;
+        readonly extension: Extension | undefined;
     }
     export interface PathCompletion extends NameAndKind {
         readonly span: TextSpan | undefined;
     }
 
-    function nameAndKind(name: string, kind: NameAndKind["kind"]): NameAndKind {
-        return { name, kind };
+    function nameAndKind(name: string, kind: NameAndKind["kind"], extension: Extension | undefined): NameAndKind {
+        return { name, kind, extension };
     }
+    function directoryResult(name: string): NameAndKind {
+        return nameAndKind(name, ScriptElementKind.directory, /*extension*/ undefined);
+    }
+
     function addReplacementSpans(text: string, textStart: number, names: ReadonlyArray<NameAndKind>): ReadonlyArray<PathCompletion> {
         const span = getDirectoryFragmentTextSpan(text, textStart);
-        return names.map(({ name, kind }): PathCompletion => ({ name, kind, span }));
+        return names.map(({ name, kind, extension }): PathCompletion => ({ name, kind, extension, span }));
     }
 
     export function getStringLiteralCompletionsFromModuleNames(sourceFile: SourceFile, node: LiteralExpression, compilerOptions: CompilerOptions, host: LanguageServiceHost, typeChecker: TypeChecker): ReadonlyArray<PathCompletion> {
@@ -129,22 +134,19 @@ namespace ts.Completions.PathCompletions {
              *
              * both foo.ts and foo.tsx become foo
              */
-            const foundFiles = createMap<true>();
+            const foundFiles = createMap<Extension | undefined>(); // maps file to its extension
             for (let filePath of files) {
                 filePath = normalizePath(filePath);
                 if (exclude && comparePaths(filePath, exclude, scriptPath, ignoreCase) === Comparison.EqualTo) {
                     continue;
                 }
 
                 const foundFileName = includeExtensions || fileExtensionIs(filePath, Extension.Json) ? getBaseFileName(filePath) : removeFileExtension(getBaseFileName(filePath));
-
-                if (!foundFiles.has(foundFileName)) {
-                    foundFiles.set(foundFileName, true);
-                }
+                foundFiles.set(foundFileName, tryGetExtensionFromPath(filePath));
             }
 
-            forEachKey(foundFiles, foundFile => {
-                result.push(nameAndKind(foundFile, ScriptElementKind.scriptElement));
+            foundFiles.forEach((ext, foundFile) => {
+                result.push(nameAndKind(foundFile, ScriptElementKind.scriptElement, ext));
             });
         }
 
@@ -155,7 +157,7 @@ namespace ts.Completions.PathCompletions {
             for (const directory of directories) {
                 const directoryName = getBaseFileName(normalizePath(directory));
                 if (directoryName !== "@types") {
-                    result.push(nameAndKind(directoryName, ScriptElementKind.directory));
+                    result.push(directoryResult(directoryName));
                 }
             }
         }
@@ -183,10 +185,10 @@ namespace ts.Completions.PathCompletions {
             if (!hasProperty(paths, path)) continue;
             const patterns = paths[path];
             if (patterns) {
-                for (const { name, kind } of getCompletionsForPathMapping(path, patterns, fragment, baseDirectory, fileExtensions, host)) {
+                for (const { name, kind, extension } of getCompletionsForPathMapping(path, patterns, fragment, baseDirectory, fileExtensions, host)) {
                     // Path mappings may provide a duplicate way to get to something we've already added, so don't add again.
                     if (!result.some(entry => entry.name === name)) {
-                        result.push(nameAndKind(name, kind));
+                        result.push(nameAndKind(name, kind, extension));
                     }
                 }
             }
@@ -200,7 +202,7 @@ namespace ts.Completions.PathCompletions {
      *      Modules from node_modules (i.e. those listed in package.json)
      *          This includes all files that are found in node_modules/moduleName/ with acceptable file extensions
      */
-    function getCompletionEntriesForNonRelativeModules(fragment: string, scriptPath: string, compilerOptions: CompilerOptions, host: LanguageServiceHost, typeChecker: TypeChecker): NameAndKind[] {
+    function getCompletionEntriesForNonRelativeModules(fragment: string, scriptPath: string, compilerOptions: CompilerOptions, host: LanguageServiceHost, typeChecker: TypeChecker): ReadonlyArray<NameAndKind> {
         const { baseUrl, paths } = compilerOptions;
 
         const result: NameAndKind[] = [];
@@ -217,7 +219,7 @@ namespace ts.Completions.PathCompletions {
 
         const fragmentDirectory = getFragmentDirectory(fragment);
         for (const ambientName of getAmbientModuleCompletions(fragment, fragmentDirectory, typeChecker)) {
-            result.push(nameAndKind(ambientName, ScriptElementKind.externalModuleName));
+            result.push(nameAndKind(ambientName, ScriptElementKind.externalModuleName, /*extension*/ undefined));
         }
 
         getCompletionEntriesFromTypings(host, compilerOptions, scriptPath, fragmentDirectory, extensionOptions, result);
@@ -230,7 +232,7 @@ namespace ts.Completions.PathCompletions {
                 for (const moduleName of enumerateNodeModulesVisibleToScript(host, scriptPath)) {
                     if (!result.some(entry => entry.name === moduleName)) {
                         foundGlobal = true;
-                        result.push(nameAndKind(moduleName, ScriptElementKind.externalModuleName));
+                        result.push(nameAndKind(moduleName, ScriptElementKind.externalModuleName, /*extension*/ undefined));
                     }
                 }
             }
@@ -265,7 +267,7 @@ namespace ts.Completions.PathCompletions {
             getModulesForPathsPattern(remainingFragment, baseUrl, pattern, fileExtensions, host));
 
         function justPathMappingName(name: string): ReadonlyArray<NameAndKind> {
-            return startsWith(name, fragment) ? [{ name, kind: ScriptElementKind.directory }] : emptyArray;
+            return startsWith(name, fragment) ? [directoryResult(name)] : emptyArray;
         }
     }
 
@@ -301,15 +303,21 @@ namespace ts.Completions.PathCompletions {
         // doesn't support. For now, this is safer but slower
         const includeGlob = normalizedSuffix ? "**/*" : "./*";
 
-        const matches = tryReadDirectory(host, baseDirectory, fileExtensions, /*exclude*/ undefined, [includeGlob]).map<NameAndKind>(name => ({ name, kind: ScriptElementKind.scriptElement }));
-        const directories = tryGetDirectories(host, baseDirectory).map(d => combinePaths(baseDirectory, d)).map<NameAndKind>(name => ({ name, kind: ScriptElementKind.directory }));
-
-        // Trim away prefix and suffix
-        return mapDefined<NameAndKind, NameAndKind>(concatenate(matches, directories), ({ name, kind }) => {
-            const normalizedMatch = normalizePath(name);
-            const inner = withoutStartAndEnd(normalizedMatch, completePrefix, normalizedSuffix);
-            return inner !== undefined ? { name: removeLeadingDirectorySeparator(removeFileExtension(inner)), kind } : undefined;
+        const matches = mapDefined(tryReadDirectory(host, baseDirectory, fileExtensions, /*exclude*/ undefined, [includeGlob]), match => {
+            const extension = tryGetExtensionFromPath(match);
+            const name = trimPrefixAndSuffix(match);
+            return name === undefined ? undefined : nameAndKind(removeFileExtension(name), ScriptElementKind.scriptElement, extension);
+        });
+        const directories = mapDefined(tryGetDirectories(host, baseDirectory).map(d => combinePaths(baseDirectory, d)), dir => {
+            const name = trimPrefixAndSuffix(dir);
+            return name === undefined ? undefined : directoryResult(name);
         });
+        return [...matches, ...directories];
+
+        function trimPrefixAndSuffix(path: string): string | undefined {
+            const inner = withoutStartAndEnd(normalizePath(path), completePrefix, normalizedSuffix);
+            return inner === undefined ? undefined : removeLeadingDirectorySeparator(inner);
+        }
     }
 
     function withoutStartAndEnd(s: string, start: string, end: string): string | undefined {
@@ -382,7 +390,10 @@ namespace ts.Completions.PathCompletions {
                 if (options.types && !contains(options.types, packageName)) continue;
 
                 if (fragmentDirectory === undefined) {
-                    pushResult(packageName);
+                    if (!seen.has(packageName)) {
+                        result.push(nameAndKind(packageName, ScriptElementKind.externalModuleName, /*extension*/ undefined));
+                        seen.set(packageName, true);
+                    }
                 }
                 else {
                     const baseDirectory = combinePaths(directory, typeDirectoryName);
@@ -393,13 +404,6 @@ namespace ts.Completions.PathCompletions {
                 }
             }
         }
-
-        function pushResult(moduleName: string) {
-            if (!seen.has(moduleName)) {
-                result.push(nameAndKind(moduleName, ScriptElementKind.externalModuleName));
-                seen.set(moduleName, true);
-            }
-        }
     }
 
     function findPackageJsons(directory: string, host: LanguageServiceHost): string[] {

src/services/types.ts

@@ -1126,7 +1126,14 @@ namespace ts {
         ambientModifier = "declare",
         staticModifier = "static",
         abstractModifier = "abstract",
-        optionalModifier = "optional"
+        optionalModifier = "optional",
+
+        dtsModifier = ".d.ts",
+        tsModifier = ".ts",
+        tsxModifier = ".tsx",
+        jsModifier = ".js",
+        jsxModifier = ".jsx",
+        jsonModifier = ".json",
     }
 
     export const enum ClassificationTypeNames {

tests/baselines/reference/api/tsserverlibrary.d.ts

@@ -5368,7 +5368,13 @@ declare namespace ts {
         ambientModifier = "declare",
         staticModifier = "static",
         abstractModifier = "abstract",
-        optionalModifier = "optional"
+        optionalModifier = "optional",
+        dtsModifier = ".d.ts",
+        tsModifier = ".ts",
+        tsxModifier = ".tsx",
+        jsModifier = ".js",
+        jsxModifier = ".jsx",
+        jsonModifier = ".json"
     }
     enum ClassificationTypeNames {
         comment = "comment",

tests/baselines/reference/api/typescript.d.ts

@@ -5368,7 +5368,13 @@ declare namespace ts {
         ambientModifier = "declare",
         staticModifier = "static",
         abstractModifier = "abstract",
-        optionalModifier = "optional"
+        optionalModifier = "optional",
+        dtsModifier = ".d.ts",
+        tsModifier = ".ts",
+        tsxModifier = ".tsx",
+        jsModifier = ".js",
+        jsxModifier = ".jsx",
+        jsonModifier = ".json"
     }
     enum ClassificationTypeNames {
         comment = "comment",

tests/cases/fourslash/completionsImport_compilerOptionsModule.ts

@@ -27,6 +27,6 @@
 verify.completions({ marker: ["b", "c", "d"], excludes: "foo", preferences: { includeCompletionsForModuleExports: true } });
 verify.completions({
     marker: ["c2", "d2"],
-    includes: [{ name: "foo", source: "/node_modules/a/index", text: "const foo: 0", kind: "const", hasAction: true, sourceDisplay: "a" }],
+    includes: [{ name: "foo", source: "/node_modules/a/index", text: "const foo: 0", kind: "const", kindModifiers: "export,declare", hasAction: true, sourceDisplay: "a" }],
     preferences: { includeCompletionsForModuleExports: true },
 });

tests/cases/fourslash/completionsImport_defaultFalsePositive.ts

@@ -14,9 +14,15 @@ goTo.file("/a.ts");
 
 verify.completions({
     marker: "",
-    includes: [
-        { name: "concat", source: "/node_modules/bar/concat", sourceDisplay: "bar/concat", text: "const concat: 0", kind: "const", hasAction: true },
-    ],
+    includes: {
+        name: "concat",
+        source: "/node_modules/bar/concat",
+        sourceDisplay: "bar/concat",
+        text: "const concat: 0",
+        kind: "const",
+        kindModifiers: "export,declare",
+        hasAction: true,
+    },
     preferences: { includeCompletionsForModuleExports: true },
 });
 

tests/cases/fourslash/completionsImport_default_anonymous.ts

@@ -14,7 +14,11 @@ goTo.marker("0");
 const preferences: FourSlashInterface.UserPreferences = { includeCompletionsForModuleExports: true };
 verify.completions(
     { marker: "0", excludes: { name: "default", source: "/src/foo-bar" }, preferences },
-    { marker: "1", includes: { name: "fooBar", source: "/src/foo-bar", sourceDisplay: "./foo-bar", text: "(property) default: 0", kind: "property", hasAction: true }, preferences }
+    {
+        marker: "1",
+        includes: { name: "fooBar", source: "/src/foo-bar", sourceDisplay: "./foo-bar", text: "(property) default: 0", kind: "property", hasAction: true },
+        preferences,
+    },
 );
 verify.applyCodeActionFromCompletion("1", {
     name: "fooBar",

tests/cases/fourslash/completionsImport_matching.ts

@@ -17,7 +17,7 @@
 verify.completions({
     marker: "",
     includes: ["bdf", "abcdef", "BDF"].map(name =>
-        ({ name, source: "/a", text: `function ${name}(): void`, hasAction: true, kind: "function", sourceDisplay: "./a" })),
+        ({ name, source: "/a", text: `function ${name}(): void`, hasAction: true, kind: "function", kindModifiers: "export", sourceDisplay: "./a" })),
     excludes: ["abcde", "dbf"],
     preferences: { includeCompletionsForModuleExports: true },
 })

tests/cases/fourslash/completionsImport_named_didNotExistBefore.ts

@@ -12,7 +12,7 @@
 verify.completions({
     marker: "",
     includes: [
-        { name: "Test1", source: "/a", sourceDisplay: "./a", text: "function Test1(): void", kind: "function", hasAction: true },
+        { name: "Test1", source: "/a", sourceDisplay: "./a", text: "function Test1(): void", kind: "function", kindModifiers: "export", hasAction: true },
         { name: "Test2", text: "(alias) function Test2(): void\nimport Test2", kind: "alias" },
     ],
     excludes: [{ name: "Test2", source: "/a" }],

tests/cases/fourslash/completionsImport_ofAlias_preferShortPath.ts

@@ -17,7 +17,7 @@
 
 verify.completions({
     marker: "",
-    includes: { name: "foo", source: "/foo/lib/foo", sourceDisplay: "./foo", text: "const foo: 0", kind: "const", hasAction: true },
+    includes: { name: "foo", source: "/foo/lib/foo", sourceDisplay: "./foo", text: "const foo: 0", kind: "const", kindModifiers: "export", hasAction: true },
     excludes: { name: "foo", source: "/foo/index" },
     preferences: { includeCompletionsForModuleExports: true },
 });

tests/cases/fourslash/completionsJsxAttribute.ts

@@ -17,8 +17,8 @@
 ////<div /**/></div>;
 
 const exact: ReadonlyArray<FourSlashInterface.ExpectedCompletionEntry> = [
-    { name: "foo", kind: "JSX attribute", text: "(JSX attribute) foo: boolean", documentation: "Doc" },
-    { name: "bar", kind: "JSX attribute", text: "(JSX attribute) bar: string" },
+    { name: "foo", kind: "JSX attribute", kindModifiers: "declare", text: "(JSX attribute) foo: boolean", documentation: "Doc" },
+    { name: "bar", kind: "JSX attribute", kindModifiers: "declare", text: "(JSX attribute) bar: string" },
 ];
 verify.completions({ marker: "", exact });
 edit.insert("f");