Make error/warning output more useful (#2161)

packages/react-dev-utils/eslintFormatter.js

@@ -30,13 +30,13 @@ function formatter(results) {
       }
 
       let line = message.line || 0;
-      let position = chalk.dim(`Line ${line}:`);
+      let position = chalk.bold('Line ' + line + ':');
       return [
         '',
         position,
         messageType,
         message.message.replace(/\.$/, ''),
-        chalk.cyan(message.ruleId || ''),
+        chalk.underline(message.ruleId || ''),
       ];
     });
 
@@ -47,7 +47,8 @@ function formatter(results) {
 
     // add color to messageTypes
     messages.forEach(m => {
-      m[2] = m[2] === 'error' ? chalk.red(m[2]) : chalk.yellow(m[2]);
+      m[3] = m[2] === 'error' ? chalk.red(m[3]) : chalk.yellow(m[3]);
+      m.splice(2, 1);
     });
 
     let outputTable = table(messages, {

packages/react-dev-utils/formatWebpackMessages.js

@@ -86,17 +86,7 @@ function formatMessage(message, isError) {
     );
   }
 
-  // Make filename nicer.
-  var slashIndex = Math.max(
-    lines[0].lastIndexOf('/'),
-    lines[0].lastIndexOf('\\')
-  );
-  var fileName = lines[0].substring(slashIndex + 1);
-  var path = lines[0].substring(0, slashIndex + 1);
-  lines[0] = chalk.dim(isError ? 'Found errors in ' : 'Found warnings in ') +
-    path +
-    (isError ? chalk.red : chalk.yellow)(fileName) +
-    chalk.dim(':');
+  lines[0] = chalk.inverse(lines[0]);
 
   // Reassemble the message.
   message = lines.join('\n');

packages/react-scripts/scripts/utils/createWebpackCompiler.js

@@ -103,18 +103,14 @@ module.exports = function createWebpackCompiler(config, onReadyCallback) {
 
       // Teach some ESLint tricks.
       console.log(
-        chalk.dim(
-          'Search for the ' +
-            chalk.cyan('rule keywords') +
-            ' to learn more about each warning.'
-        )
+        'Search for the ' +
+          chalk.underline('rule keywords') +
+          ' to learn more about each warning.'
       );
       console.log(
-        chalk.dim(
-          'To ignore, add ' +
-            chalk.yellow('// eslint-disable-next-line') +
-            ' to the previous line.'
-        )
+        'To ignore, add ' +
+          chalk.yellow('// eslint-disable-next-line') +
+          ' to the previous line.'
       );
       console.log();
     }