React Doctor：让你的 React 代码更健康

在开发过程中，难免会遇到一些不规范的代码，这不仅影响代码质量，还可能导致后续维护和扩展的困难。为了解决这个问题，React Doctor 应运而生。这个工具专门设计来扫描你的 React 代码库，并给出一个0到100的健康评分，同时提供可操作的诊断建议。无论你是使用 Next.js、Vite 还是 React Native，React Doctor 都能为你提供帮助。

主要特点

• 健康评分：通过一次命令即可扫描整个代码库，输出健康评分（75+为优秀，50到74需改进，50以下为危急）。
• 多维度诊断：覆盖状态与效果、性能、架构、安全性、可访问性及死代码等多个方面。
• 框架兼容：根据你的框架和 React 版本自动切换规则，极大地方便了使用。

在何处使用 React Doctor

如果你的项目涉及到 React 相关的开发，使用 React Doctor 可以帮助你发现潜藏的问题，提升代码的健康状态。例如，在团队开发环境中，及时发现代码中不规范的写法，并引导团队成员养成良好的编码习惯。

使用方法

1. 安装

要安装 React Doctor，只需在项目根目录运行以下命令：

npx -y react-doctor@latest .

运行后，你将获得一个健康评分以及各类问题的列表，帮助你了解当前代码的健康状况。

2. 为编码工具配置 React Doctor

如果希望你的编码工具自动遵循 React 的最佳实践，可以通过以下命令进行配置：

npx -y react-doctor@latest install

这将安装支持多个编码代理的配置，包括 Claude Code、Cursor、Codex、OpenCode 等。

3. GitHub Actions 集成

如果你的项目使用 GitHub 进行版本控制，可以利用 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 }}

这样，每次提交或请求拉取时，React Doctor 都会对代码进行扫描并更新结果。

4. 配置自定义规则

你可以在项目根目录创建一个 react-doctor.config.json 文件，自定义忽略某些规则或文件：

{
  "ignore": {
    "rules": ["react/no-danger", "jsx-a11y/no-autofocus"],
    "files": ["src/generated/**"],
    "overrides": [
      {
        "files": ["components/modules/diff/**"],
        "rules": ["react-doctor/no-array-index-as-key", "react-doctor/no-render-in-render"]
      },
      {
        "files": ["components/search/HighlightedSnippet.tsx"],
        "rules": ["react/no-danger"]
      }
    ]
  }
}

这种方式可以在需要时保持灵活性，同时保护重点文件的健康检查。

实用示例

在实际编码过程中，你可能会遇到多个警告和错误，React Doctor 的输出将帮助你逐一解决。例如，当检测到状态和效果的处理不当时，React Doctor 会给出明确的建议，帮助你理解并修复这些问题。使用 React Doctor 的命令行工具时，可以通过一些参数来调整功能。

react-doctor --verbose

以上命令将显示更详细的规则和文件诊断信息，便于开发者逐步了解并改善代码质量。

其他工具对比

在功能方面，React Doctor 与其他同类工具相比，更加重视代码健康评分与多维度诊断的结合。比如：

• ESLint：虽然能对代码进行静态分析，但没有健康评分的概念，主要依赖手动配置和集成。
• SonarQube：非常强大，但主要用于大规模项目的综合分析，易用性可能不如 React Doctor。

综上所述，React Doctor 提供了一个易于使用且高效的解决方案，帮助开发者俊化他们的代码，提升整体代码质量和可维护性。