关于 react-doctor
react-doctor 是用于检查 React 代码库的命令行技能,可发现安全、性能、正确性和架构问题。它提供带文件位置的诊断建议,并按 0 到 100 分评分。
主要功能
- 01覆盖多个领域的 47+ 条规则
- 02报告含文件与行号的诊断
- 03按 0 到 100 分评估代码库
- 04检查 Next.js 与服务端模式
适用场景
- 01检查 React 项目的安全问题
- 02查找性能与包体积问题
- 03按诊断严重程度安排修复
- 04处理问题后重新检查代码
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ brianlovin/ agent-config --skill react-doctor安装后在 Claude Code 中输入/react-doctor确认已加载。
详细介绍
React Doctor
扫描 React 代码库中的安全性、性能、正确性和架构问题。输出 0-100 的评分以及可操作的诊断信息。
用法
npx -y react-doctor@latest . --verbose
工作流
- 在项目根目录运行上述命令
- 阅读每一条包含文件路径和行号的诊断信息
- 从错误(最高严重级别)开始修复问题
- 重新运行以验证评分是否提高
规则(47+)
- 安全性:客户端 bundle 中的硬编码密钥、eval()
- 状态与副作用:useEffect 中的派生状态、缺少清理、从 props 初始化 useState、级联 setState
- 架构:组件内定义组件、巨型组件、内联渲染函数
- 性能:布局属性动画、transition-all、大 blur 值
- 正确性:以数组索引作为 key、条件渲染 bug
- Next.js:缺少 metadata、对服务端数据进行客户端获取、异步客户端组件
- Bundle 体积:桶式导入、完整 lodash、moment.js、缺少代码分割
- 服务端:server actions 中缺少鉴权、未使用 after() 导致的阻塞
- 无障碍:缺少 prefers-reduced-motion
- 死代码:未使用的文件、导出、类型
评分
- 75+:优秀
- 50-74:有待改进
- 0-49:严重
评论
支持 Markdown