mcpField
R
react-doctor

react-doctor

github.com/brianlovin测试与质量3792.8k 次安装31 周前更新
代码仓库

关于 react-doctor

react-doctor 是用于检查 React 代码库的命令行技能,可发现安全、性能、正确性和架构问题。它提供带文件位置的诊断建议,并按 0 到 100 分评分。

主要功能

  1. 01覆盖多个领域的 47+ 条规则
  2. 02报告含文件与行号的诊断
  3. 03按 0 到 100 分评估代码库
  4. 04检查 Next.js 与服务端模式

适用场景

  1. 01检查 React 项目的安全问题
  2. 02查找性能与包体积问题
  3. 03按诊断严重程度安排修复
  4. 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

工作流

  1. 在项目根目录运行上述命令
  2. 阅读每一条包含文件路径和行号的诊断信息
  3. 从错误(最高严重级别)开始修复问题
  4. 重新运行以验证评分是否提高

规则(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