Refine extends-to-implements code fix

 1. Retain surrounding trivia when swapping the keyword.
 2. Insert commas at the full-starts, rather than starts, of existing
 keywords when merging with existing implements clauses.

Fixes microsoft#18794

Author: amcasey

src/services/codefixes/fixExtendsInterfaceBecomesImplements.ts

@@ -27,11 +27,22 @@ namespace ts.codefix {
     }
 
     function doChanges(changes: textChanges.ChangeTracker, sourceFile: SourceFile, extendsToken: Node, heritageClauses: ReadonlyArray<HeritageClause>): void {
-        changes.replaceNode(sourceFile, extendsToken, createToken(SyntaxKind.ImplementsKeyword));
+        changes.replaceRange(sourceFile, { pos: extendsToken.getStart(), end: extendsToken.end }, createToken(SyntaxKind.ImplementsKeyword));
         // We replace existing keywords with commas.
         for (let i = 1; i < heritageClauses.length; i++) {
             const keywordToken = heritageClauses[i].getFirstToken()!;
-            changes.replaceNode(sourceFile, keywordToken, createToken(SyntaxKind.CommaToken));
+            const keywordFullStart = keywordToken.getFullStart();
+            changes.replaceRange(sourceFile, { pos: keywordFullStart, end: keywordFullStart }, createToken(SyntaxKind.CommaToken));
+
+            // Rough heuristic: delete trailing whitespace after keyword so that it's not excessive.
+            // (Trailing because leading might be indentation, which is more sensitive.)
+            const text = sourceFile.text;
+            let end = keywordToken.end;
+            while (end < text.length && ts.isWhiteSpaceSingleLine(text.charCodeAt(end))) {
+                end++;
+            }
+
+            changes.deleteRange(sourceFile, { pos: keywordToken.getStart(), end });
         }
     }
 }

tests/cases/fourslash/codeFixChangeExtendsToImplementsAbstractModifier.ts

@@ -8,5 +8,5 @@
 verify.codeFix({
     description: "Change 'extends' to 'implements'",
     // TODO: GH#18794
-    newRangeContent: "abstract class A implements I1 , I2",
+    newRangeContent: "abstract class A implements I1, I2",
 });

tests/cases/fourslash/codeFixChangeExtendsToImplementsWithDecorator.ts

@@ -13,5 +13,5 @@
 verify.codeFix({
     description: "Change 'extends' to 'implements'",
     // TODO: GH#18794
-    newRangeContent: "class A implements I1 , I2 { }",
+    newRangeContent: "class A implements I1, I2 { }",
 });

tests/cases/fourslash/codeFixChangeExtendsToImplementsWithTrivia.ts

@@ -0,0 +1,19 @@
+/// <reference path='fourslash.ts' />
+
+//// interface I1 { }
+//// interface I2 { }
+//// interface I3 { }
+
+//// [|class MyClass /*A !*/ //B !
+////     /*C !*/ extends /*D !*/ I1 /*E !*/ //F !
+////     /*G !*/ implements /*H !*/ I2 /*I !*/, /*J !*/ I3 /*K !*/ //L !|]
+//// {
+//// }
+
+verify.codeFix({
+    description: "Change 'extends' to 'implements'",
+    // TODO: GH#18794
+    newRangeContent: `class MyClass /*A !*/ //B !
+    /*C !*/ implements /*D !*/ I1, /*E !*/ //F !
+    /*G !*/ /*H !*/ I2 /*I !*/, /*J !*/ I3 /*K !*/ //L !`,
+});