Fixed string completions that require escaping (microsoft#55118)

Author: Andarist

src/services/stringCompletions.ts

@@ -33,6 +33,7 @@ import {
     endsWith,
     ensureTrailingDirectorySeparator,
     equateStringsCaseSensitive,
+    escapeString,
     Extension,
     fileExtensionIsOneOf,
     filter,
@@ -64,6 +65,7 @@ import {
     getSupportedExtensions,
     getSupportedExtensionsWithJsonIfResolveJsonModule,
     getTextOfJsxAttributeName,
+    getTextOfNode,
     getTokenAtPosition,
     hasIndexSignature,
     hasProperty,
@@ -263,8 +265,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\\`"] });