你提到的这个"检查 useCallback 依赖是否正确"的工具,通常指的不是一个独立的第三方库,而是 React 官方推荐并内置在 ESLint 中的插件规则。
它就是 eslint-plugin-react-hooks。
这个插件是 React 开发中的标准配置,它会在你写代码时进行静态分析,自动检查 useEffect、useCallback、useMemo 等 Hooks 的依赖数组是否完整,防止因遗漏依赖而产生的闭包陷阱和 Bug。
🛠️ 如何安装和配置
你可以通过以下两步来启用它:
1. 安装插件
在你的项目根目录下,运行以下命令来安装这个开发依赖:
bash
编辑
npm install --save-dev eslint-plugin-react-hooks
# 或者使用 yarn
yarn add --dev eslint-plugin-react-hooks
2. 配置 ESLint
在你的 ESLint 配置文件(如 .eslintrc.js 或 .eslintrc.json)中,添加或修改 extends 和 rules 字段:
javascript
编辑
module.exports = {
// ... 其他配置
"extends": [
// ... 其他扩展
"plugin:react-hooks/recommended" // 添加这行
],
"rules": {
// ... 其他规则
// 确保 react-hooks/exhaustive-deps 规则是开启的(recommended 配置默认开启)
"react-hooks/exhaustive-deps": "warn"
}
};
配置完成后,当你在 useCallback 中遗漏了依赖项时,ESLint 就会发出警告,提示你补充完整的依赖列表,从而保证代码的正确性。
🤔 另一种可能:检查未使用的依赖
如果你指的是检查 package.json 中声明了但代码里并未使用的依赖包 (即清理无用的 node_modules),那么对应的第三方工具是 depcheck。
- 安装 :
npm install -g depcheck - 使用 :在项目根目录运行
npx depcheck - 作用 :它会分析你的代码,找出哪些已安装的包实际上没有被
import或require,帮助你精简项目体积。
根据你的描述,eslint-plugin-react-hooks 是你最可能要找的答案。