如何解决@typescript-eslint插件在.eslintrc.json中的冲突问题？

AI 小北

2026-7-25

解决"@typescript-eslint"插件冲突问题

出现这个错误是因为本地.eslintrc.json的配置和eslint-config-react-app内置的@typescript-eslint配置版本或规则产生了冲突，以下是几种可行的解决方式：

统一@typescript-eslint相关包版本
查看package-lock.json或yarn.lock中eslint-config-react-app依赖的@typescript-eslint/eslint-plugin和@typescript-eslint/parser版本，然后手动在package.json中指定相同版本，重新安装依赖。
示例命令：
```
npm install @typescript-eslint/eslint-plugin@x.x.x @typescript-eslint/parser@x.x.x --save-dev
```
（把x.x.x替换为实际匹配的版本号）
移除.eslintrc.json中的重复配置
检查自己的.eslintrc.json，如果手动添加了@typescript-eslint相关的插件或扩展，而eslint-config-react-app已经集成了这些配置，直接移除重复项即可。比如原本配置里有extends: ["react-app", "@typescript-eslint/recommended"]，改成只保留extends: ["react-app"]；如果根级别有plugins: ["@typescript-eslint"]，也可以删掉。
清除依赖缓存并重装
依赖缓存可能导致版本不一致，先执行缓存清理：
```
npm cache clean --force
# 或者yarn用户执行：yarn cache clean
```
然后删除node_modules文件夹和package-lock.json（或yarn.lock），再重新安装依赖：
```
npm install
# 或者yarn install
```
通过overrides自定义规则
如果需要调整@typescript-eslint的规则，不要在根级别直接配置，而是放到.eslintrc.json的overrides字段中，避免和react-app的内置overrides冲突。示例配置：
```
{
  "extends": ["react-app"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "warn"
      }
    }
  ]
}
```