Enable click to go to error in console for TypeScript (#6502)

* reattempt changes

* formatter fixes

* fix missing colon in path

* revert path tweaking amends as per discussion with @ianschmitz

Author: johnnyreilly

packages/react-dev-utils/README.md

@@ -332,7 +332,7 @@ Creates a Webpack compiler instance for WebpackDevServer with built-in helpful m
 The `args` object accepts a number of properties:
 
 - **appName** `string`: The name that will be printed to the terminal.
-- **config** `Object`:  The webpack configuration options to be provided to the webpack constructor.
+- **config** `Object`: The webpack configuration options to be provided to the webpack constructor.
 - **devSocket** `Object`: Required if `useTypeScript` is `true`. This object should include `errors` and `warnings` which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when running `fork-ts-checker-webpack-plugin` with `async: true` to report errors that are emitted after the webpack build is complete.
 - **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below.
 - **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm.

packages/react-dev-utils/formatWebpackMessages.js

@@ -16,7 +16,7 @@ function isLikelyASyntaxError(message) {
 
 // Cleans up webpack error messages.
 // eslint-disable-next-line no-unused-vars
-function formatMessage(message, isError) {
+function formatMessage(message) {
   let lines = message.split('\n');
 
   // Strip Webpack-added headers off errors/warnings

packages/react-dev-utils/typescriptFormatter.js

@@ -12,48 +12,45 @@ const codeFrame = require('@babel/code-frame').codeFrameColumns;
 const chalk = require('chalk');
 const fs = require('fs');
 
+const types = { diagnostic: 'TypeScript', lint: 'TSLint' };
+
 function formatter(message, useColors) {
-  const hasGetters = typeof message.getFile === 'function';
+  const { type, severity, file, line, content, code, character } =
+    typeof message.getFile === 'function'
+      ? {
+          type: message.getType(),
+          severity: message.getSeverity(),
+          file: message.getFile(),
+          line: message.getLine(),
+          content: message.getContent(),
+          code: message.getCode(),
+          character: message.getCharacter(),
+        }
+      : message;
+
   const colors = new chalk.constructor({ enabled: useColors });
   const messageColor = message.isWarningSeverity() ? colors.yellow : colors.red;
-
-  let source;
-
-  if (hasGetters) {
-    source =
-      message.getFile() &&
-      fs.existsSync(message.getFile()) &&
-      fs.readFileSync(message.getFile(), 'utf-8');
-  } else {
-    source =
-      message.file &&
-      fs.existsSync(message.file) &&
-      fs.readFileSync(message.file, 'utf-8');
-  }
-
-  let frame = '';
-
-  if (source) {
-    frame = codeFrame(
-      source,
-      { start: { line: message.line, column: message.character } },
-      { highlightCode: useColors }
-    )
-      .split('\n')
-      .map(str => '  ' + str)
-      .join(os.EOL);
-  }
-
-  const severity = hasGetters ? message.getSeverity() : message.severity;
-  const types = { diagnostic: 'TypeScript', lint: 'TSLint' };
+  const fileAndNumberColor = colors.bold.cyan;
+
+  const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8');
+  const frame = source
+    ? codeFrame(
+        source,
+        { start: { line: line, column: character } },
+        { highlightCode: useColors }
+      )
+        .split('\n')
+        .map(str => '  ' + str)
+        .join(os.EOL)
+    : '';
 
   return [
-    messageColor.bold(`${types[message.type]} ${severity.toLowerCase()}: `) +
-      (hasGetters ? message.getContent() : message.content) +
+    messageColor.bold(`${types[type]} ${severity.toLowerCase()} in `) +
+      fileAndNumberColor(`${file}(${line},${character})`) +
+      messageColor(':'),
+    content +
       '  ' +
-      messageColor.underline(
-        (message.type === 'lint' ? 'Rule: ' : 'TS') + message.code
-      ),
+      messageColor.underline((type === 'lint' ? 'Rule: ' : 'TS') + code),
     '',
     frame,
   ].join(os.EOL);