Add custom eslint formatter (facebook#2138)

* Add custom eslint formatter

* Add formatter docs

* Update formatter docs

* Slightly tweak it

* Update README.md

Author: sidoshi

config/webpack.config.dev.js

@@ -17,6 +17,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -120,16 +121,16 @@ module.exports = {
         enforce: 'pre',
         use: [
           {
-            // @remove-on-eject-begin
-            // Point ESLint to our predefined config.
             options: {
+              formatter: eslintFormatter,
+              // @remove-on-eject-begin
               baseConfig: {
                 extends: ['react-app'],
               },
               ignore: false,
               useEslintrc: false,
+              // @remove-on-eject-end
             },
-            // @remove-on-eject-end
             loader: 'eslint-loader',
           },
         ],

config/webpack.config.prod.js

@@ -17,6 +17,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -117,17 +118,18 @@ module.exports = {
         enforce: 'pre',
         use: [
           {
-            // @remove-on-eject-begin
-            // Point ESLint to our predefined config.
             options: {
+              formatter: eslintFormatter,
+              // @remove-on-eject-begin
               // TODO: consider separate config for production,
               // e.g. to enable no-console and no-debugger only in production.
               baseConfig: {
                 extends: ['react-app'],
               },
+              ignore: false,
               useEslintrc: false,
+              // @remove-on-eject-end
             },
-            // @remove-on-eject-end
             loader: 'eslint-loader',
           },
         ],

scripts/utils/createWebpackCompiler.js

@@ -100,17 +100,17 @@ module.exports = function createWebpackCompiler(config, onReadyCallback) {
         console.log(message);
         console.log();
       });
+
       // Teach some ESLint tricks.
-      console.log('You may use special comments to disable some warnings.');
       console.log(
-        'Use ' +
-          chalk.yellow('// eslint-disable-next-line') +
-          ' to ignore the next line.'
+        'Search the ' +
+          chalk.dim('keywords') +
+          ' from the right column to learn more.'
       );
       console.log(
-        'Use ' +
-          chalk.yellow('/* eslint-disable */') +
-          ' to ignore all warnings in a file.'
+        'To ignore, add ' +
+          chalk.yellow('// eslint-disable-next-line') +
+          ' to the line before.'
       );
     }
   });