feat: add color to code frame and support columns (#1)

azz · Dec 20, 2017 · a73556e · a73556e
1 parent 44d702c
commit a73556e
Show file tree

Hide file tree

Showing 3 changed files with 905 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "semantic-release": "^8.2.0"
   },
   "dependencies": {
-    "@babel/code-frame": "^7.0.0-beta.35",
+    "@babel/code-frame": "7.0.0-beta.35",
     "pify": "^3.0.0",
     "throat": "^4.1.0",
     "worker-farm": "^1.5.2"

diff --git a/src/runTsc.js b/src/runTsc.js
@@ -1,13 +1,15 @@
-const codeFrame = require('@babel/code-frame').default;
+const codeFrame = require('@babel/code-frame').codeFrameColumns;
 const ts = require('typescript');
 const fs = require('fs');
 
-const appendCodeFrame = ({ filePath, errorMessage, line, column }) => {
-  if (typeof line === 'undefined') {
+const appendCodeFrame = ({ filePath, errorMessage, location }) => {
+  if (typeof location === 'undefined') {
     return errorMessage;
   }
   const rawLines = fs.readFileSync(filePath, 'utf8');
-  return `${errorMessage}\n${codeFrame(rawLines, line, column)}`;
+  return `${errorMessage}\n${codeFrame(rawLines, location, {
+    highlightCode: true,
+  })}`;
 };
 
 const convertErrors = ({ start, end, errors, testPath }) => ({
@@ -60,16 +62,34 @@ const runTsc = ({ testPath /*, config */ }, workerCallback) => {
     const errors = allDiagnostics.map(diagnostic => {
       if (diagnostic.file) {
         const {
-          line,
-          character,
+          line: lineStart,
+          character: characterStart,
         } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+        const {
+          line: lineEnd,
+          character: characterEnd,
+        } = diagnostic.file.getLineAndCharacterOfPosition(
+          diagnostic.start + diagnostic.length
+        );
+
+        const location = {
+          start: {
+            line: lineStart + 1,
+            column: characterStart + 1,
+          },
+          end: {
+            line: lineEnd + 1,
+            column: characterEnd + 1,
+          },
+        };
+
         const message = ts.flattenDiagnosticMessageText(
           diagnostic.messageText,
           '\n'
         );
+
         return {
-          line: line + 1,
-          column: character + 1,
+          location,
           errorMessage: message,
           filePath: diagnostic.file.fileName,
         };