React Doctor — 你的 AI 编码 Agent 写得烂 React 它来抓

2026-05-11 · #React · #AI编码 · #代码审查

AI 编码 Agent 写代码很爽 但质量嘛 有时候真是一言难尽

Million.js 团队刚开源了一个叫 React Doctor 的工具 一上线就冲上 GitHub Trending 目前 7.7K Stars

它的口号简单粗暴：Your agent writes bad React. This catches it.

一命令出健康分

在项目根目录跑一行命令就行

npx -y react-doctor@latest .

输出一个 0 到 100 的健康分数

• 75+ 良好
• 50-74 需要改善
• 以下 50 严重

同时会列出具体的诊断结果 覆盖 6 个维度

• State & Effects — 状态管理 副作用 有没有滥用 useEffect
• Performance — 不必要的重渲染 缺少 memoization
• Architecture — 组件拆分 职责划分
• Security — dangerouslySetInnerHTML XSS 风险
• Accessibility — a11y 规范
• Dead Code — 未使用的导入和变量

规则会根据你的框架和 React 版本自动切换 不需要手动配

直接教你的 Agent 别再写烂代码

除了扫描还有更酷的功能

npx -y react-doctor@latest install

这条命令会把 React Doctor 的规则安装到你的编码 Agent 里

支持 Claude Code Cursor Codex OpenCode 以及 50+ 其他 Agent

装完之后 AI 写代码的时候就会自动遵循 React 最佳实践 从一开始就少写烂代码

效果就像给你的 Agent 装了个"React 导师" 边写边教

CI/CD 自动审查

React Doctor 内置了 GitHub Actions

# .github/workflows/react-doctor.yml
name: React Doctor
on:
  pull_request:
  push:
    branches: [main]
permissions:
  contents: read
  pull-requests: write
jobs:
  react-doctor:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
        with:
          fetch-depth: 0
      - uses: millionco/react-doctor@main
        with:
          diff: main
          github-token: ${{ secrets.GITHUB_TOKEN }}

配置好之后每个 PR 自动审查 在 PR 上直接贴评论 还能通过 fail-on 参数设置门槛 不达标就阻止合并

灵活配置

支持 react-doctor.config.json 配置文件

{
  "ignore": {
    "rules": ["react/no-danger"],
    "files": ["src/generated/**"],
    "overrides": [
      { "files": ["components/diff/**"], "rules": ["react-doctor/no-array-index-as-key"] }
    ]
  }
}

支持三级粒度忽略：全局规则 全局文件 某文件特定规则

也兼容 .gitignore .eslintignore 和行内 eslint-disable 注释 现有 ESLint/OxLint 配置会自动合并

谁该用

• 重度依赖 AI Agent 的团队 — Agent 写得快 但质量需要兜底
• React 项目维护者 — 想保持代码库健康 又不想手动 Review 所有 AI 生成的代码
• 想教 Agent 写更好代码的人 — install 命令直接注入规则 一劳永逸
• CICD 流水线想加 React 质量门禁的 — 门槛可调 自动评论

总结

React Doctor 代表了一个趋势：AI 写代码的时代 代码质量工具不再是 "人写完后检查" 而是 "Agent 写的时候就教它怎么写对"

这比事后跑 ESLint 有意义得多

项目地址：github.com/millionco/react-doctor

试试 npx -y react-doctor@latest . 看看你的项目几分

文章首发于 EasyTool.me 欢迎转载 保留出处即可