Improve inlining of string variables in template literals

src/services/refactors/inlineVariable.ts

@@ -23,6 +23,8 @@ import {
     isNumericLiteral,
     isObjectLiteralExpression,
     isPropertyAccessExpression,
+    isStringLiteral,
+    isTemplateSpan,
     isTypeQueryNode,
     isVariableDeclarationInVariableStatement,
     isVariableStatement,
@@ -32,7 +34,9 @@ import {
     refactor,
     some,
     SourceFile,
+    StringLiteral,
     SymbolFlags,
+    TemplateSpan,
     textChanges,
     textRangeContainsPositionInclusive,
     TypeChecker,
@@ -112,7 +116,12 @@ registerRefactor(refactorName, {
         const { references, declaration, replacement } = info;
         const edits = textChanges.ChangeTracker.with(context, tracker => {
             for (const node of references) {
-                tracker.replaceNode(file, node, getReplacementExpression(node, replacement));
+                if (isStringLiteral(replacement) && isIdentifier(node) && isTemplateSpan(node.parent)) {
+                    replaceTemplateStringVariableWithLiteral(tracker, file, node.parent, replacement);
+                }
+                else {
+                    tracker.replaceNode(file, node, getReplacementExpression(node, replacement));
+                }
             }
             tracker.delete(file, declaration);
         });
@@ -243,3 +252,17 @@ function getReplacementExpression(reference: Node, replacement: Expression): Exp
 
     return replacement;
 }
+
+function replaceTemplateStringVariableWithLiteral(tracker: textChanges.ChangeTracker, sourceFile: SourceFile, reference: TemplateSpan, replacement: StringLiteral) {
+    const templateExpression = reference.parent;
+    const index = templateExpression.templateSpans.indexOf(reference);
+    const prevNode = index === 0 ? templateExpression.head : templateExpression.templateSpans[index - 1];
+    tracker.replaceRangeWithText(
+        sourceFile,
+        {
+            pos: prevNode.getEnd() - 2,
+            end: reference.literal.getStart() + 1
+        },
+        replacement.text.replace(/\\/g, "\\\\").replace(/`/g, "\\`"),
+    );
+}

tests/cases/fourslash/inlineVariableTemplateString1.ts

@@ -0,0 +1,13 @@
+/// <reference path="fourslash.ts" />
+
+////const /*a*/pizza/*b*/ = "🍕";
+////export const prompt = `Hello, would you like some ${pizza}?`;
+
+goTo.select("a", "b");
+verify.refactorAvailable("Inline variable");
+edit.applyRefactor({
+    refactorName: "Inline variable",
+    actionName: "Inline variable",
+    actionDescription: "Inline variable",
+    newContent: "export const prompt = `Hello, would you like some 🍕?`;"
+});

tests/cases/fourslash/inlineVariableTemplateString2.ts

@@ -0,0 +1,13 @@
+/// <reference path="fourslash.ts" />
+
+////const /*a*/codeText/*b*/ = "Code-formatted text looks `like this` and requires surrounding by backticks (\\`).";
+////export const mdTutorial = `Let's talk about markdown.\n${codeText}?`;
+
+goTo.select("a", "b");
+verify.refactorAvailable("Inline variable");
+edit.applyRefactor({
+    refactorName: "Inline variable",
+    actionName: "Inline variable",
+    actionDescription: "Inline variable",
+    newContent: "export const mdTutorial = `Let's talk about markdown.\\nCode-formatted text looks \\`like this\\` and requires surrounding by backticks (\\\\\\\`).?`;"
+});

tests/cases/fourslash/inlineVariableTemplateString3.ts

@@ -0,0 +1,15 @@
+/// <reference path="fourslash.ts" />
+
+////const /*a*/pizza/*b*/ = "🍕";
+////export const prompt = `Hello, would you like some ${
+////  pizza
+////  }?`;
+
+goTo.select("a", "b");
+verify.refactorAvailable("Inline variable");
+edit.applyRefactor({
+    refactorName: "Inline variable",
+    actionName: "Inline variable",
+    actionDescription: "Inline variable",
+    newContent: "export const prompt = `Hello, would you like some 🍕?`;"
+});

tests/cases/fourslash/inlineVariableTemplateString4.ts

@@ -0,0 +1,13 @@
+/// <reference path="fourslash.ts" />
+
+////const /*a*/pizza/*b*/ = "🍕";
+////export const prompt = `Hello, would you like some ${pizza} or ${pizza}?`;
+
+goTo.select("a", "b");
+verify.refactorAvailable("Inline variable");
+edit.applyRefactor({
+    refactorName: "Inline variable",
+    actionName: "Inline variable",
+    actionDescription: "Inline variable",
+    newContent: "export const prompt = `Hello, would you like some 🍕 or 🍕?`;"
+});

tests/cases/fourslash/inlineVariableTemplateString5.ts

@@ -0,0 +1,13 @@
+/// <reference path="fourslash.ts" />
+
+////const /*a*/pizza/*b*/ = "🍕";
+////export const prompt = `Hello, would you like some ${pizza}`;
+
+goTo.select("a", "b");
+verify.refactorAvailable("Inline variable");
+edit.applyRefactor({
+    refactorName: "Inline variable",
+    actionName: "Inline variable",
+    actionDescription: "Inline variable",
+    newContent: "export const prompt = `Hello, would you like some 🍕`;"
+});

tests/cases/fourslash/inlineVariableTemplateString6.ts

@@ -0,0 +1,13 @@
+/// <reference path="fourslash.ts" />
+
+////const /*a*/x/*b*/ = "\\`";
+////export const y = `${x}`;
+
+goTo.select("a", "b");
+verify.refactorAvailable("Inline variable");
+edit.applyRefactor({
+    refactorName: "Inline variable",
+    actionName: "Inline variable",
+    actionDescription: "Inline variable",
+    newContent: "export const y = `\\\\\\``;"
+});

tests/cases/fourslash/inlineVariableTemplateString7.ts

@@ -0,0 +1,13 @@
+/// <reference path="fourslash.ts" />
+
+////const /*a*/x/*b*/ = "`";
+////export const y = `${x}`;
+
+goTo.select("a", "b");
+verify.refactorAvailable("Inline variable");
+edit.applyRefactor({
+    refactorName: "Inline variable",
+    actionName: "Inline variable",
+    actionDescription: "Inline variable",
+    newContent: "export const y = `\\``;"
+});