有没有办法覆盖 create-react-app webpack 配置中的 ESLintPlugin 选项？答案

【问题标题】：Is there a way to override ESLintPlugin options in create-react-app webpack config?有没有办法覆盖 create-react-app webpack 配置中的 ESLintPlugin 选项？
【发布时间】：2022-03-07 17:42:20
【问题描述】：

所以我在我的 react 应用程序中遇到了 eslint 的问题，我能够在弹出应用程序并在 webpack.config 文件中的 ESLintPlugin 中添加一些选项后解决它。

  new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        failOnError: false, <== this one 
        emitWarning: true, <== and this one
        // ESLint class options
        cwd: paths.appPath,
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app/base')],
          rules: {
            ...(!hasJsxRuntime && {
              'react/react-in-jsx-scope': 'error'
            })
          }
        }
      })

我想知道我是否可以做同样的事情，但不必退出应用程序，并改用react-app-rewired，我已经有一个config-overrides.js 文件

module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto',
  });
  return webpackConfig;
};

有没有类似的方法可以访问webpack.config文件中的ESLintPlugin函数并通过config-overrides.js文件添加新的选项？

【问题讨论】：

在项目的根目录中添加.eslintrc 文件是否有效？
@NinoFiliu 我已经有了.eslintrc 文件，所有的linting 选项都在里面。我的问题是关于 webpack.config 文件中存在的 ESLintPlugin 函数。我编辑了我的问题并添加了功能。

标签： reactjs webpack eslint

【解决方案1】：

这适用于我的反应脚本“^5.0.0”。我所做的只是在 config-overrides.js 中重新初始化 eslint webpack 插件

//config-overrides.js
const ESLintPlugin = require('eslint-webpack-plugin') //this package should be exist by default

module.exports = function override(config) {

  for (let i = 0; i < config.plugins.length; i++) {
    if (config.plugins[i].key !== "ESLintWebpackPlugin") continue;
    const currentEslint = config.plugins[i];
    config.plugins[i] = new ESLintPlugin({
      ...currentEslint.options, // using default eslint option
    })
    break;
  }

  return config;
}

通过在 config-overrides.js 上重新初始化它，它会读取您的自定义 .eslintrc.json

【讨论】：