Add opt-out for eslint-webpack-plugin

Author: mrmckeb

docusaurus/docs/advanced-configuration.md

@@ -26,4 +26,5 @@ You can adjust various development and production settings by setting environmen
 | IMAGE_INLINE_SIZE_LIMIT   | 🚫 Ignored  |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | FAST_REFRESH              |   ✅ Used   | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | TSC_COMPILE_ON_ERROR      |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ESLINT_BUILD_ON_ERROR     |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and build projects even if there are ESLint errors. This works by treating all ESLint errors as warnings.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | DISABLE_NEW_JSX_TRANSFORM |   ✅ Used   |  ✅ Used   | When set to `true`, disables the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) introduced in React 17 and backported to React 16.14.0, 15.7.0, and 0.14.10. New projects will use a version of React that supports this by default but you may need to disable it in existing projects if you can't upgrade React.                                                                                                                                                                                                                                                                                                     |

packages/react-dev-utils/eslintFormatter.js

@@ -14,6 +14,8 @@ const table = require('text-table');
 
 const cwd = process.cwd();
 
+const emitErrorsAsWarnings = process.env.ESLINT_BUILD_ON_ERROR === 'true';
+
 function isError(message) {
   if (message.fatal || message.severity === 2) {
     return true;
@@ -69,7 +71,10 @@ function formatter(results) {
 
     // add color to rule keywords
     messages.forEach(m => {
-      m[4] = m[2] === 'error' ? chalk.red(m[4]) : chalk.yellow(m[4]);
+      m[4] =
+        m[2] === 'error' && !emitErrorsAsWarnings
+          ? chalk.red(m[4])
+          : chalk.yellow(m[4]);
       m.splice(2, 1);
     });
 
@@ -87,7 +92,7 @@ function formatter(results) {
     output += `${outputTable}\n\n`;
   });
 
-  if (reportContainsErrorRuleIDs) {
+  if (reportContainsErrorRuleIDs && !emitErrorsAsWarnings) {
     // Unlike with warnings, we have to do it here.
     // We have similar code in react-scripts for warnings,
     // but warnings can appear in multiple files so we only

packages/react-scripts/config/webpack.config.js

@@ -55,6 +55,8 @@ const reactRefreshOverlayEntry = require.resolve(
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
+const emitErrorsAsWarnings = process.env.ESLINT_BUILD_ON_ERROR === 'true';
+
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -755,6 +757,7 @@ module.exports = function (webpackEnv) {
         extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
         formatter: require.resolve('react-dev-utils/eslintFormatter'),
         eslintPath: require.resolve('eslint'),
+        emitWarning: emitErrorsAsWarnings,
         context: paths.appSrc,
         cache: true,
         cacheLocation: path.resolve(