关于 react-doctor
React Doctor 是用于检查 React 代码库的命令行工具,可报告安全、性能、正确性和架构问题,并提供文件级诊断及 0–100 分数。
主要功能
- 01扫描 React 代码中的 47 多类问题
- 02报告文件路径和行号
- 03以 0–100 分数评估结果
- 04检查 Next.js 和无障碍问题
- 05重新扫描以验证修复
适用场景
- 01发现 React 应用中的安全问题
- 02检查性能和架构缺陷
- 03在代码变更后检查代码库
- 04按诊断严重程度安排修复优先级
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ posthog/ posthog --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