Tweak colors for better contrast on Windows (#2180)

Author: gaearon

packages/react-dev-utils/eslintFormatter.js

@@ -45,9 +45,9 @@ function formatter(results) {
       messages = messages.filter(m => m[2] === 'error');
     }
 
-    // add color to messageTypes
+    // add color to rule keywords
     messages.forEach(m => {
-      m[3] = m[2] === 'error' ? chalk.red(m[3]) : chalk.yellow(m[3]);
+      m[4] = m[2] === 'error' ? chalk.red(m[4]) : chalk.yellow(m[4]);
       m.splice(2, 1);
     });
 

packages/react-scripts/scripts/start.js

@@ -55,22 +55,35 @@ const HOST = process.env.HOST || '0.0.0.0';
 function run(port) {
   const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 
-  const formatUrl = hostname =>
-    url.format({ protocol, hostname, port, pathname: '/' });
+  const formatUrl = hostname => url.format({
+    protocol,
+    hostname,
+    port,
+    pathname: '/',
+  });
+  const prettyPrintUrl = hostname => url.format({
+    protocol,
+    hostname,
+    port: chalk.bold(port),
+    pathname: '/',
+  });
 
   const isUnspecifiedAddress = HOST === '0.0.0.0' || HOST === '::';
-  let prettyHost, lanAddress;
+  let prettyHost, lanAddress, prettyLanUrl;
   if (isUnspecifiedAddress) {
     prettyHost = 'localhost';
     try {
       lanAddress = address.ip();
+      if (lanAddress) {
+        prettyLanUrl = prettyPrintUrl(lanAddress);
+      }
     } catch (_e) {
       // ignored
     }
   } else {
     prettyHost = HOST;
   }
-  const prettyUrl = formatUrl(prettyHost);
+  const prettyLocalUrl = prettyPrintUrl(prettyHost);
 
   // Create a webpack compiler that is configured with custom messages.
   const compiler = createWebpackCompiler(
@@ -85,15 +98,11 @@ function run(port) {
       );
       console.log();
 
-      if (isUnspecifiedAddress && lanAddress) {
-        console.log(
-          `  ${chalk.bold('Local:')}            ${chalk.cyan(prettyUrl)}`
-        );
-        console.log(
-          `  ${chalk.bold('On Your Network:')}  ${chalk.cyan(formatUrl(lanAddress))}`
-        );
+      if (prettyLanUrl) {
+        console.log(`  ${chalk.bold('Local:')}            ${prettyLocalUrl}`);
+        console.log(`  ${chalk.bold('On Your Network:')}  ${prettyLanUrl}`);
       } else {
-        console.log(`  ${chalk.cyan(prettyUrl)}`);
+        console.log(`  ${prettyLocalUrl}`);
       }
 
       console.log();

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

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