ESLint 插件安装后为什么规则不生效?

A. 国曼 阅读 16

我最近在项目里装了一个 ESLint 插件 eslint-plugin-react-hooks,也按文档在 .eslintrc.js 里配置了 rules,但写代码时根本没触发对应的检查。比如我故意把 useEffect 写错,ESLint 却啥也不报。

我确认插件已经装在 devDependencies 里了,配置也加了 plugins 和 rules,但就是没效果。是不是还要额外启用什么?我的配置如下:

module.exports = {
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
百里文君
这个问题我遇到过,一般有这几个坑要排查:

1. 先确认你的 ESLint 真的在运行。有些编辑器/IDE 默认不跑 ESLint,要装插件或者开启。比如 VS Code 需要 ESLint 扩展,而且 settings.json 里要有:
{
"eslint.validate": ["javascript", "javascriptreact"]
}


2. 确保你的文件扩展名是对的。React 组件如果是 .jsx 或 .tsx 后缀,要在 ESLint 配置里加:
module.exports = {
extends: ['plugin:react-hooks/recommended'],
parserOptions: {
ecmaFeatures: {
jsx: true
}
}
}


3. 检查 node_modules 里确实有 eslint-plugin-react-hooks。有时候 yarn/npm 安装会抽风,删掉 node_modules 和 lock 文件重装更靠谱。

4. 建议直接用 extends 而不是单独配 rules,像上面代码那样。这样效率更高,还能自动带上其他必要配置。

5. 最后在终端手动跑下 ESLint 看看输出:
npx eslint your-component.jsx


如果还不行,八成是文件没被 ESLint 处理到,检查下你的 .eslintignore 有没有误伤。
点赞
2026-03-07 20:01