--pretty output: move context after the file/error

Fixes #16583

Author: alexeagle

src/compiler/program.ts

@@ -271,6 +271,7 @@ namespace ts {
     export function formatDiagnosticsWithColorAndContext(diagnostics: ReadonlyArray<Diagnostic>, host: FormatDiagnosticsHost): string {
         let output = "";
         for (const diagnostic of diagnostics) {
+            let context = "";
             if (diagnostic.file) {
                 const { start, length, file } = diagnostic;
                 const { line: firstLine, character: firstLineChar } = getLineAndCharacterOfPosition(file, start);
@@ -284,12 +285,12 @@ namespace ts {
                     gutterWidth = Math.max(ellipsis.length, gutterWidth);
                 }
 
-                output += host.getNewLine();
+                context += host.getNewLine();
                 for (let i = firstLine; i <= lastLine; i++) {
                     // If the error spans over 5 lines, we'll only show the first 2 and last 2 lines,
                     // so we'll skip ahead to the second-to-last line.
                     if (hasMoreThanFiveLines && firstLine + 1 < i && i < lastLine - 1) {
-                        output += formatAndReset(padLeft(ellipsis, gutterWidth), gutterStyleSequence) + gutterSeparator + host.getNewLine();
+                        context += formatAndReset(padLeft(ellipsis, gutterWidth), gutterStyleSequence) + gutterSeparator + host.getNewLine();
                         i = lastLine - 1;
                     }
 
@@ -300,30 +301,28 @@ namespace ts {
                     lineContent = lineContent.replace("\t", " ");    // convert tabs to single spaces
 
                     // Output the gutter and the actual contents of the line.
-                    output += formatAndReset(padLeft(i + 1 + "", gutterWidth), gutterStyleSequence) + gutterSeparator;
-                    output += lineContent + host.getNewLine();
+                    context += formatAndReset(padLeft(i + 1 + "", gutterWidth), gutterStyleSequence) + gutterSeparator;
+                    context += lineContent + host.getNewLine();
 
                     // Output the gutter and the error span for the line using tildes.
-                    output += formatAndReset(padLeft("", gutterWidth), gutterStyleSequence) + gutterSeparator;
-                    output += redForegroundEscapeSequence;
+                    context += formatAndReset(padLeft("", gutterWidth), gutterStyleSequence) + gutterSeparator;
+                    context += redForegroundEscapeSequence;
                     if (i === firstLine) {
                         // If we're on the last line, then limit it to the last character of the last line.
                         // Otherwise, we'll just squiggle the rest of the line, giving 'slice' no end position.
                         const lastCharForLine = i === lastLine ? lastLineChar : undefined;
 
-                        output += lineContent.slice(0, firstLineChar).replace(/\S/g, " ");
-                        output += lineContent.slice(firstLineChar, lastCharForLine).replace(/./g, "~");
+                        context += lineContent.slice(0, firstLineChar).replace(/\S/g, " ");
+                        context += lineContent.slice(firstLineChar, lastCharForLine).replace(/./g, "~");
                     }
                     else if (i === lastLine) {
-                        output += lineContent.slice(0, lastLineChar).replace(/./g, "~");
+                        context += lineContent.slice(0, lastLineChar).replace(/./g, "~");
                     }
                     else {
                         // Squiggle the entire line.
-                        output += lineContent.replace(/./g, "~");
+                        context += lineContent.replace(/./g, "~");
                     }
-                    output += resetEscapeSequence;
-
-                    output += host.getNewLine();
+                    context += resetEscapeSequence;
                 }
 
                 output += host.getNewLine();
@@ -333,6 +332,12 @@ namespace ts {
             const categoryColor = getCategoryFormat(diagnostic.category);
             const category = DiagnosticCategory[diagnostic.category].toLowerCase();
             output += `${ formatAndReset(category, categoryColor) } TS${ diagnostic.code }: ${ flattenDiagnosticMessageText(diagnostic.messageText, host.getNewLine()) }`;
+
+            if (diagnostic.file) {
+                output += host.getNewLine();
+                output += context;
+            }
+
             output += host.getNewLine();
         }
         return output;

tests/baselines/reference/prettyContextNotDebugAssertion.errors.txt

@@ -1,9 +1,9 @@
 
+tests/cases/compiler/index.ts(2,1): error TS1005: '}' expected.
+
 2 
   
 
-tests/cases/compiler/index.ts(2,1): error TS1005: '}' expected.
-
 
 ==== tests/cases/compiler/index.ts (1 errors) ====
     if (true) {