diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js index dd971077639..b56bab72927 100644 --- a/packages/react-dev-utils/eslintFormatter.js +++ b/packages/react-dev-utils/eslintFormatter.js @@ -41,7 +41,7 @@ function formatter(results) { position, messageType, message.message.replace(/\.$/, ''), - chalk.dim(message.ruleId || ''), + chalk.cyan(message.ruleId || ''), ]; }); diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index f1262aad56b..c48508055f1 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/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'); diff --git a/packages/react-scripts/scripts/utils/createWebpackCompiler.js b/packages/react-scripts/scripts/utils/createWebpackCompiler.js index 260b36c9756..8accbc0af14 100644 --- a/packages/react-scripts/scripts/utils/createWebpackCompiler.js +++ b/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(); } });