Stylize tsc's error messages with color and context

src/compiler/commandLineParser.ts

@@ -20,6 +20,17 @@ namespace ts {
             name: "diagnostics",
             type: "boolean",
         },
+        {
+            name: "diagnosticStyle",
+            paramType: Diagnostics.KIND,
+            description: Diagnostics.Specify_diagnostic_printing_style_Colon_simple_default_or_pretty,
+            type: {
+                "simple": DiagnosticStyle.Simple,
+                "pretty": DiagnosticStyle.Pretty,
+            },
+            error: Diagnostics.Argument_for_diagnosticStyle_must_be_simple_or_pretty,
+            experimental: true,
+        },
         {
             name: "emitBOM",
             type: "boolean"
@@ -500,4 +511,4 @@ namespace ts {
             return fileNames;
         }
     }
-}
+}

src/compiler/diagnosticMessages.json

@@ -2258,14 +2258,6 @@
         "code": 6063
     },
 
-    "Specify JSX code generation: 'preserve' or 'react'": {
-        "category": "Message",
-        "code": 6080
-    },
-    "Argument for '--jsx' must be 'preserve' or 'react'.": {
-        "category": "Message",
-        "code": 6081
-    },
     "Enables experimental support for ES7 decorators.": {
         "category": "Message",
         "code": 6065
@@ -2298,6 +2290,23 @@
         "category": "Message",
         "code": 6072
     },
+    "Specify diagnostic printing style: 'simple' (default) or 'pretty'.": {
+        "category": "Message",
+        "code": 6073
+    },
+    "Argument for '--diagnosticStyle' must be 'simple' or 'pretty'.": {
+        "category": "Error",
+        "code": 6074
+    },
+
+    "Specify JSX code generation: 'preserve' or 'react'": {
+        "category": "Message",
+        "code": 6080
+    },
+    "Argument for '--jsx' must be 'preserve' or 'react'.": {
+        "category": "Message",
+        "code": 6081
+    },
 
     "Variable '{0}' implicitly has an '{1}' type.": {
         "category": "Error",

src/compiler/sys.ts

@@ -6,6 +6,7 @@ namespace ts {
         newLine: string;
         useCaseSensitiveFileNames: boolean;
         write(s: string): void;
+        writesToTty?(): boolean;
         readFile(path: string, encoding?: string): string;
         writeFile(path: string, data: string, writeByteOrderMark?: boolean): void;
         watchFile?(path: string, callback: (path: string, removed: boolean) => void): FileWatcher;
@@ -191,6 +192,7 @@ namespace ts {
             const _fs = require("fs");
             const _path = require("path");
             const _os = require("os");
+            const _tty = require("tty");
 
             const platform: string = _os.platform();
             // win32\win64 are case insensitive platforms, MacOS (darwin) by default is also case insensitive
@@ -271,16 +273,9 @@ namespace ts {
                 newLine: _os.EOL,
                 useCaseSensitiveFileNames: useCaseSensitiveFileNames,
                 write(s: string): void {
-                    const buffer = new Buffer(s, "utf8");
-                    let offset = 0;
-                    let toWrite: number = buffer.length;
-                    let written = 0;
-                    // 1 is a standard descriptor for stdout
-                    while ((written = _fs.writeSync(1, buffer, offset, toWrite)) < toWrite) {
-                        offset += written;
-                        toWrite -= written;
-                    }
+                    process.stdout.write(s);
                 },
+                writesToTty: () => _tty.isatty(1),
                 readFile,
                 writeFile,
                 watchFile: (fileName, callback) => {

src/compiler/tsc.ts

@@ -6,6 +6,14 @@ namespace ts {
         fileWatcher?: FileWatcher;
     }
 
+    let reportDiagnostic = reportDiagnosticSimply;
+
+    function reportDiagnostics(diagnostics: Diagnostic[]): void {
+        for (let diagnostic of diagnostics) {
+            reportDiagnostic(diagnostic);
+        }
+    }
+
     /**
      * Checks to see if the locale is in the appropriate format,
      * and if it is, attempts to set the appropriate language.
@@ -81,12 +89,13 @@ namespace ts {
         return <string>diagnostic.messageText;
     }
 
-    function reportDiagnostic(diagnostic: Diagnostic) {
+    function reportDiagnosticSimply(diagnostic: Diagnostic): void {
         let output = "";
 
         if (diagnostic.file) {
-            let loc = getLineAndCharacterOfPosition(diagnostic.file, diagnostic.start);
-            output += `${ diagnostic.file.fileName }(${ loc.line + 1 },${ loc.character + 1 }): `;
+            let { line, character } = getLineAndCharacterOfPosition(diagnostic.file, diagnostic.start);
+
+            output += `${ diagnostic.file.fileName }(${ line + 1 },${ character + 1 }): `;
         }
 
         let category = DiagnosticCategory[diagnostic.category].toLowerCase();
@@ -95,10 +104,78 @@ namespace ts {
         sys.write(output);
     }
 
-    function reportDiagnostics(diagnostics: Diagnostic[]) {
-        for (let i = 0; i < diagnostics.length; i++) {
-            reportDiagnostic(diagnostics[i]);
+    const shouldUseColors = sys.writesToTty && sys.writesToTty();
+    const redForegroundEscapeSequence = shouldUseColors ? "\u001b[91m" : "";
+    const gutterStyleSequence = shouldUseColors ? "\u001b[100;30m" : "";
+    const gutterSeparator = shouldUseColors ? " " : " | ";
+    const resetEscapeSequence = shouldUseColors ? "\u001b[0m" : "";
+
+    function reportDiagnosticWithColorAndContext(diagnostic: Diagnostic): void {
+        let output = "";
+
+        if (diagnostic.file) {
+            let { start, length, file } = diagnostic;
+            let { line: firstLine, character: firstLineChar } = getLineAndCharacterOfPosition(file, start);
+            let { line: lastLine, character: lastLineChar } = getLineAndCharacterOfPosition(file, start + length);
+            const lastLineInFile = getLineAndCharacterOfPosition(file, file.text.length).line;
+
+            let hasMoreThanFiveLines = (lastLine - firstLine) >= 4;
+            let gutterWidth = (lastLine + 1 + "").length;
+            if (hasMoreThanFiveLines) {
+                gutterWidth = Math.max("...".length, gutterWidth);
+            }
+
+            output += sys.newLine;
+            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 += gutterStyleSequence + padLeft("...", gutterWidth) + resetEscapeSequence + gutterSeparator + sys.newLine;
+                    i = lastLine - 1;
+                }
+
+                let lineStart = getPositionOfLineAndCharacter(file, i, 0);
+                let lineEnd = i < lastLineInFile ? getPositionOfLineAndCharacter(file, i + 1, 0) : file.text.length;
+                let lineContent = file.text.slice(lineStart, lineEnd);
+                lineContent = lineContent.replace(/\s+$/g, "");  // trim from end
+                lineContent = lineContent.replace("\t", " ");    // convert tabs to single spaces
+
+                // Output the gutter and the actual contents of the line.
+                output += gutterStyleSequence + padLeft(i + 1 + "", gutterWidth) + resetEscapeSequence + gutterSeparator;
+                output += lineContent + sys.newLine;
+
+                // Output the gutter and the error span for the line using tildes.
+                output += gutterStyleSequence + padLeft("", gutterWidth) + resetEscapeSequence + gutterSeparator;
+                output += 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.
+                    let lastCharForLine = i === lastLine ? lastLineChar : undefined;
+
+                    output += lineContent.slice(0, firstLineChar).replace(/\S/g, " ");
+                    output += lineContent.slice(firstLineChar, lastCharForLine).replace(/./g, "~");
+                }
+                else if (i === lastLine) {
+                    output += lineContent.slice(0, lastLineChar).replace(/./g, "~");
+                }
+                else {
+                    // Squiggle the entire line.
+                    output += lineContent.replace(/./g, "~");
+                }
+                output += resetEscapeSequence;
+
+                output += sys.newLine;
+            }
+
+            output += sys.newLine;
+            output += `${ file.fileName }(${ firstLine + 1 },${ firstLineChar + 1 }): `;
         }
+
+        let category = DiagnosticCategory[diagnostic.category].toLowerCase();
+        output += `${ category } TS${ diagnostic.code }: ${ flattenDiagnosticMessageText(diagnostic.messageText, sys.newLine) }`;
+        output += sys.newLine + sys.newLine;
+
+        sys.write(output);
     }
 
     function reportWatchDiagnostic(diagnostic: Diagnostic) {
@@ -252,6 +329,10 @@ namespace ts {
                 compilerHost.getSourceFile = getSourceFile;
             }
 
+            if (compilerOptions.diagnosticStyle === DiagnosticStyle.Pretty) {
+                reportDiagnostic = reportDiagnosticWithColorAndContext;
+            }
+
             let compileResult = compile(rootFileNames, compilerOptions, compilerHost);
 
             if (!compilerOptions.watch) {

src/compiler/types.ts

@@ -2043,6 +2043,7 @@ namespace ts {
         charset?: string;
         declaration?: boolean;
         diagnostics?: boolean;
+        /* @internal */diagnosticStyle?: DiagnosticStyle;
         emitBOM?: boolean;
         help?: boolean;
         init?: boolean;
@@ -2128,6 +2129,12 @@ namespace ts {
         JSX
     }
 
+    /* @internal */
+    export const enum DiagnosticStyle {
+        Simple,
+        Pretty,
+    }
+
     export interface ParsedCommandLine {
         options: CompilerOptions;
         fileNames: string[];