feat: add DISABLE_NO_UNUSED_VARS env variable to disable no-unused-vars ESLint rule (#17067)

Author: Amitjoiya

docusaurus/docs/advanced-configuration.md

@@ -29,4 +29,5 @@ You can adjust various development and production settings by setting environmen
 | 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_NO_DEV_ERRORS      |   ✅ Used   | 🚫 Ignored | When set to `true`, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | DISABLE_ESLINT_PLUGIN     |   ✅ Used   |  ✅ Used   | When set to `true`, [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) will be completely disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| DISABLE_NO_UNUSED_VARS    |   ✅ Used   |  ✅ Used   | When set to `true`, disables the `no-unused-vars` and `@typescript-eslint/no-unused-vars` ESLint rules during builds. This is useful if you want to suppress warnings about unused variables while developing.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | 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-scripts/config/webpack.config.js

@@ -60,6 +60,7 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
 const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
 const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+const disableNoUnusedVarsRule = process.env.DISABLE_NO_UNUSED_VARS === 'true';
 
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
@@ -787,6 +788,14 @@ module.exports = function (webpackEnv) {
               }),
             },
           },
+          ...(disableNoUnusedVarsRule && {
+            overrideConfig: {
+              rules: {
+                'no-unused-vars': 'off',
+                '@typescript-eslint/no-unused-vars': 'off',
+              },
+            },
+          }),
         }),
     ].filter(Boolean),
     // Turn off performance processing because we utilize