最近帮人看了一个基于 react-app-rewired 和 customize-cra 的老 react 项目，无法设置自定义 eslint 规则。

我在常用的项目里看，都没有这个问题，因为 react-script 是较新的版本，所以如果升级为新版 react-script ，就可以很方便地通过 .eslintrc.js 文件进行设置。

但这个改动可能影响范围稍大，如果不想改脚手架依赖版本,要怎么改？

尝试把 .eslintrc.js 文件改成 json 或者 .eslintrc 文件，都无法生效。设置 EXTEND_ESLINT 为 true 仍然还是无效。查看 customize-cra 提供的方法，发现有一个选项 useEslintRc，用起来还是有问题。

最终通过 https://github.com/arackaf/customize-cra/issues/175 中 mikko-tormala 的方法，使用 config-overrides.js 直接修改 webpack 配置，使 .eslintrc.js 配置生效。

定义 useEslintConfig 方法：

const useEslintConfig = configRules => config => {
  const updatedRules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some( use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0];
        const baseOptions = ruleUse.options;
        const baseConfig = baseOptions.baseConfig || {};
        const newOptions = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules }
        }
        ruleUse.options = newOptions;
        return rule;

      // Rule not using eslint. Do not modify.
      } else {
        return rule;
      }
    }
  );

  config.module.rules = updatedRules;
  return config;
};

使用：

const eslintConfig = require('./.eslintrc.js');
module.exports = {
    webpack: override(
        useEslintConfig(eslintConfig),
    ),
}