Fixed string completions that require escaping (#55118)

src/services/stringCompletions.ts

@@ -32,6 +32,7 @@ import {
     endsWith,
     ensureTrailingDirectorySeparator,
     equateStringsCaseSensitive,
+    escapeString,
     Extension,
     fileExtensionIsOneOf,
     filter,
@@ -63,6 +64,7 @@ import {
     getSupportedExtensions,
     getSupportedExtensionsWithJsonIfResolveJsonModule,
     getTextOfJsxAttributeName,
+    getTextOfNode,
     getTokenAtPosition,
     hasIndexSignature,
     hasProperty,
@@ -262,8 +264,13 @@ function convertStringLiteralCompletions(
             return { isGlobalCompletion: false, isMemberCompletion: true, isNewIdentifierLocation: completion.hasIndexSignature, optionalReplacementSpan, entries };
         }
         case StringLiteralCompletionKind.Types: {
+            const quoteChar = contextToken.kind === SyntaxKind.NoSubstitutionTemplateLiteral
+                ? CharacterCodes.backtick
+                : startsWith(getTextOfNode(contextToken), "'")
+                ? CharacterCodes.singleQuote
+                : CharacterCodes.doubleQuote;
             const entries = completion.types.map(type => ({
-                name: type.value,
+                name: escapeString(type.value, quoteChar),
                 kindModifiers: ScriptElementKindModifier.none,
                 kind: ScriptElementKind.string,
                 sortText: SortText.LocationPriority,

tests/cases/fourslash/stringCompletionsVsEscaping.ts

@@ -0,0 +1,24 @@
+/// <reference path="fourslash.ts" />
+
+//// type Value<P extends string> = `var(--\\\\, ${P})`
+//// export const value: Value<'one' | 'two'> = "/*1*/"
+////
+//// export const test: `\ntest\n` = '/*2*/'
+////
+//// export const doubleQuoted1: `"double-quoted"` = '/*3*/'
+//// export const doubleQuoted2: `"double-quoted"` = "/*4*/"
+////
+//// export const singleQuoted2: `'single-quoted'` = "/*5*/"
+//// export const singleQuoted2: `'single-quoted'` = '/*6*/'
+////
+//// export const backtickQuoted1: '`backtick-quoted`' = "/*7*/"
+//// export const backtickQuoted2: '`backtick-quoted`' = `/*8*/`
+
+verify.completions({ marker: "1", exact: ["var(--\\\\\\\\, one)", "var(--\\\\\\\\, two)"] });
+verify.completions({ marker: "2", exact: ["\\ntest\\n"] });
+verify.completions({ marker: "3", exact: ['"double-quoted"'] });
+verify.completions({ marker: "4", exact: ['\\\"double-quoted\\\"'] });
+verify.completions({ marker: "5", exact: ["'single-quoted'"] });
+verify.completions({ marker: "6", exact: ["\\'single-quoted\\'"] });
+verify.completions({ marker: "7", exact: ["`backtick-quoted`"] });
+verify.completions({ marker: "8", exact: ["\\`backtick-quoted\\`"] });