使用CRA创建的React+TypeScript项目ESLint依赖冲突求助

问题根源 #

你的项目依赖的react-scripts自带的eslint-config-react-app绑定了@typescript-eslint/eslint-plugin@5.62.0，但你手动安装的是6.x版本的@typescript-eslint/parser，二者版本不兼容导致依赖解析失败。以下是几种可行的解决方案：

方案1：安装与CRA兼容的5.x版本依赖 #

先卸载冲突的依赖，再安装和CRA自带版本匹配的包：

# 卸载已安装的冲突依赖
npm uninstall eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import --save-dev

# 安装与CRA兼容的5.x版本
npm install eslint@^8 @typescript-eslint/parser@^5.62.0 @typescript-eslint/eslint-plugin@^5.62.0 eslint-plugin-react@^7 eslint-plugin-react-hooks@^4 eslint-plugin-import@^2 --save-dev

方案2：升级react-scripts到兼容6.x的版本 #

如果你的项目允许升级react-scripts，新版已适配@typescript-eslint 6.x系列：

# 升级react-scripts到最新版
npm install react-scripts@latest

# 重新安装最新ESLint依赖
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import --save-dev

注意：升级react-scripts可能引发其他依赖变更，需验证项目能否正常运行。

方案3：用npm overrides强制统一版本 #

若不想升级react-scripts，可在package.json中添加overrides字段，强制所有依赖使用指定版本：

"overrides": {
  "@typescript-eslint/eslint-plugin": "^5.62.0",
  "@typescript-eslint/parser": "^5.62.0"
}

添加后执行：

npm install

方案4：简化配置（若无需自定义ESLint） #

CRA本身已集成完整的ESLint配置，若没有特殊自定义需求，可直接删除手动安装的ESLint依赖，使用CRA自带的校验能力。

补充：检查ESLint配置文件 #

确保.eslintrc.js或.eslintrc.json中的配置与安装的版本匹配，以5.x版本为例：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'import'],
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    // 自定义规则
  }
};

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