如何修复ESLint加载@testing-library插件失败的问题？

错误信息 #

Failed to load plugin '@testing-library' declared in '.eslintrc.json': Cannot find module '@testing-library/eslint-plugin'

你的配置片段 #

"extends": [
    "plugin:@testing-library",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:@testing-library/jest-dom"
  ],
"plugins": ["react", "@typescript-eslint", "@testing-library/jest-dom","prettier","@testing-library/react","@testing-library/eslint-plugin"],

解决方案 #

1. 修正ESLint配置错误 #

你的配置存在两处关键问题：

• plugins字段写法错误：ESLint插件在plugins中只需填写包名前缀（去掉eslint-plugin-部分），@testing-library/eslint-plugin对应的插件名应为@testing-library，而非完整包名。
• extends规则选择不当：针对React项目，应使用plugin:@testing-library/react（适配React的测试库规则），而非通用的plugin:@testing-library。

修正后的配置片段：

"extends": [
    "plugin:@testing-library/react",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:@testing-library/jest-dom"
  ],
"plugins": ["react", "@typescript-eslint", "@testing-library/jest-dom","prettier","@testing-library"],

2. 彻底重装依赖并清理缓存 #

执行以下命令确保依赖安装正确：

# 清理yarn缓存
yarn cache clean
# 删除旧依赖文件
rm -rf node_modules yarn.lock
# 重新安装所有依赖
yarn install
# 确保@testing-library/eslint-plugin作为开发依赖安装
yarn add -D @testing-library/eslint-plugin

3. 验证修复效果 #

运行ESLint命令检查是否仍有错误：

npx eslint .

说明 #

问题核心是对ESLint插件配置规则的误解：plugins字段不需要写完整包名，ESLint会自动识别eslint-plugin-前缀的包；同时针对React项目，选择对应框架的extends规则才能正确加载插件配置。

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