React项目ESLint报prefer-regex-literals规则配置无效错误如何解决

报错原因 #

该错误是ESLint版本与airbnb规则集版本不兼容导致的：
你使用的eslint-config-airbnb-base版本中，内置给prefer-regex-literals规则配置了disallowRedundantWrapping参数，但是该参数仅在ESLint v7.12.0及以上版本才支持。如果你的本地ESLint版本低于v7.12.0，ESLint会认为该规则的配置非法，哪怕你在自己的配置文件中覆盖了规则参数，继承的airbnb配置在加载阶段就会触发校验报错，所以你的修改不会生效。

解决方法 #

方案一（推荐）：升级ESLint到支持该参数的版本 #

执行以下命令升级ESLint：

# npm
npm install eslint@^7.12.0 --save-dev
# yarn
yarn add eslint@^7.12.0 -D
# pnpm
pnpm add eslint@^7.12.0 -D

升级完成后重启VS Code的ESLint服务即可，该方案不会影响其他规则的正常使用。

方案二：不升级ESLint，修改规则配置 #

如果你暂时不想升级ESLint，直接在.eslintrc.json的rules中删除该规则的参数配置，仅保留严重等级，或者直接关闭规则：

// 仅保留严重等级，不添加额外参数
"prefer-regex-literals": "error"
// 或者直接关闭规则
// "prefer-regex-literals": "off"

生效验证 #

修改完成后如果还是报错，执行以下操作：

• 删除项目下的node_modules文件夹和依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新安装依赖
• 按Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac）调出命令面板，选择ESLint: Restart ESLint Server重启ESLint服务
• 重启VS Code

内容的提问来源于stack exchange，提问作者Leinil