ESLint react插件冲突求助：airbnb与react-app配置冲突

你遇到的是ESLint中react插件的配置冲突，根源是eslint-config-airbnb与项目自带的eslint-config-react-app规则集同时引入了react插件，导致规则定义冲突。以下是几种可行的修复方案，不必直接移除airbnb插件：

方案一：使用Typescript适配版的Airbnb配置 #

原生eslint-config-airbnb对Typescript支持有限，改用专门的eslint-config-airbnb-typescript能更好兼容TS项目，减少规则冲突：

1. 安装依赖：

yarn add eslint-config-airbnb-typescript eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

2. 修改.eslintrc.json的extends数组，替换原生airbnb配置并调整顺序（确保TS相关规则优先）：

"extends": [
  "plugin:@typescript-eslint/recommended",
  "airbnb-typescript",
  "airbnb/hooks",
  "plugin:react-hooks/recommended",
  "plugin:import/errors",
  "plugin:import/warnings",
  "plugin:import/typescript",
  "plugin:prettier/recommended",
  "prettier"
]

注：移除重复的plugin:react/recommended，因为airbnb-typescript已包含React基础规则

方案二：强制统一react插件版本 #

冲突可能源于两个规则集依赖的eslint-plugin-react版本不一致，通过yarn的resolutions强制统一版本：

1. 在package.json中添加：

"resolutions": {
  "eslint-plugin-react": "^7.32.2",
  "eslint-plugin-react-hooks": "^4.6.0"
}

2. 执行yarn install重新安装依赖，确保所有规则集使用同一版本的react插件。

方案三：移除Airbnb配置（备选） #

若上述方案无效，且你对Airbnb代码规范没有强需求，可以直接注释掉.eslintrc.json中的"airbnb"配置项，快速解决冲突恢复项目运行。

感谢您的解答，致以诚挚问候。

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