Tweak error and warning output (#2152)

* Tweak error and warning output

* Add a colon

packages/react-dev-utils/eslintFormatter.js

@@ -37,7 +37,7 @@ function formatter(results) {
         position,
         messageType,
         message.message.replace(/\.$/, ''),
-        chalk.dim(message.ruleId || ''),
+        chalk.cyan(message.ruleId || ''),
       ];
     });
 

packages/react-dev-utils/formatWebpackMessages.js

@@ -86,9 +86,17 @@ function formatMessage(message, isError) {
     );
   }
 
-  // Prepend filename with an explanation.
-  lines[0] = chalk.underline(lines[0]) +
-    (isError ? ' contains errors.' : ' contains warnings.');
+  // 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(':');
 
   // Reassemble the message.
   message = lines.join('\n');

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

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