mcpField
R
react-doctor

react-doctor

github.com/blogic-cz测试与质量373 次安装1 天前更新
代码仓库

关于 react-doctor

面向开发者的 React 代码库命令行诊断工具，用于评估代码健康状况。它检查安全、性能、正确性和架构等问题，并支持验证、修复后重新扫描的流程。

主要功能

  1. 0147 条以上诊断规则
  2. 02安全与正确性检查
  3. 03性能与架构检查
  4. 04Next.js 和 Server Actions 规则
  5. 05按评分汇总代码健康状况

适用场景

  1. 01审查 React 代码库中的问题
  2. 02按优先级处理已验证诊断项
  3. 03修改代码后重新扫描
  4. 04检查死代码和打包体积问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/blogic-cz/blogic-marketplace --skill react-doctor

安装后在 Claude Code 中输入/react-doctor确认已加载。

详细介绍

React Doctor

使用 React Doctor 扫描 React 代码库，查找安全性、性能、正确性和架构方面的问题。根据诊断结果确定修复优先级，改善整体代码健康度。

使用方法

npx -y react-doctor@latest . --verbose

请有意使用 @latest，以运行最新的规则集。

工作流

  1. 在项目根目录运行命令，并完整记录输出。
  2. 修改代码前先核实诊断结果：结合实际运行时行为、项目惯例和框架限制，确认每个报告的问题。
  3. 修复已确认的问题，优先处理严重程度最高的诊断项。
  4. 重新运行 React Doctor，确认诊断列表有所缩减。
  5. 重新运行项目检查（lint、测试、类型检查/构建等，视情况而定），确保没有引入回归问题。

规则覆盖范围（47+）

React Doctor 包含 47+ 条规则。以下分类仅列出代表性示例，并非权威或完整的规则清单。

  • 安全性：客户端包中的硬编码密钥、eval()
  • 状态与副作用：在 useEffect 中派生状态、缺少清理逻辑、使用来自 props 的 useState、级联调用 setState
  • 架构：在组件内部定义组件、巨型组件、内联渲染函数
  • 性能：动画使用布局属性、transition-all、过大的模糊值
  • 正确性：将数组索引用作 key、条件渲染错误
  • Next.js（用于 Next.js 项目）：缺少元数据、针对服务器数据进行客户端获取、异步客户端组件
  • 包体积：barrel 导入、完整引入 lodash、moment.js、缺少代码拆分
  • Server Actions（用于 Next.js 项目）：Server Actions 中缺少身份验证、未使用 after() 的阻塞调用
  • 无障碍性：缺少 prefers-reduced-motion
  • 死代码：未使用的文件、导出项、类型

评分

  • 75+：优秀
  • 50-74：需要改进
  • 0-49：严重

评论

支持 Markdown