OpenSource-Hub

react-doctor

CLI ツール

millionco/react-doctor

扫描React代码库并输出健康评分与可操作诊断。

概要

React Doctor 是一款 CLI 工具,可扫描 React 代码库并生成 0-100 的健康评分与可操作诊断。它检查状态、性能、可访问性、安全性和死代码,支持 Next.js、Vite 和 React Native。它可集成到 CI/CD 管道和编程代理中,以强制实施最佳实践。

README プレビュー

\n  \n  \n  \n\n\n[](https://npmjs.com/package/react-doctor)\n[](https://npmjs.com/package/react-doctor)\n\nYour agent writes bad React, this catches it.\n\nOne command scans your codebase and outputs a **0 to 100 health score** with actionable diagnostics.\n\nWorks with Next.js, Vite, and React Native.\n\n### [See it in action →](https://react.doctor)\n\n## Install\n\nRun this at your project root:\n\n```bash\nnpx -y react-doctor@latest .\n```\n\nYou'll get a score (75+ Great, 50 to 74 Needs work, under 50 Critical) and a list of issues across state & effects, performance, architecture, security, accessibility, and dead code. Rules toggle automatically based on your framework and React version.\n\nhttps://github.com/user-attachments/assets/07cc88d9-9589-44c3-aa73-5d603cb1c570\n\n## Install for your coding agent\n\nTeach your coding agent React best practices so it stops writing the bad code in the first place.\n\n```bash\nnpx -y react-doctor@latest install\n```\n\nYou'll be prompted to pick which detected agents to install for. Pass `--yes` to skip prompts.\n\nWorks with Claude Code, Cursor, Codex, OpenCode, and 50+ other agents.\n\n## GitHub Actions\n\nA composite action ships with this repository. Drop it into `.github/workflows/react-doctor.yml`:\n\n```yaml\nname: React Doctor\n\non:\n  pull_request:\n  push:\n    branches: [main]\n\npermissions:\n  contents: read\n  pull-requests: write # required to post PR comments\n\njobs:\n  react-doctor:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v5\n        with:\n          fetch-depth: 0 # required for `diff`\n      - uses: millionco/react-doctor@main\n        with:\n          diff: main\n          github-token: ${{ secrets.GITHUB_TOKEN }}\n```\n\nWhen `github-token` is set on `pull_request` events, findings are posted (and updated) as a PR comment. The action also exposes a `score` output (0–100) you can use in subsequent steps.\n\n**Inputs:** `directory`, `verbose`, `project`, `diff`, `gith

FAQ (4)

トラブル対応
なぜ react-doctor の unused-file ルールは Windows 上でほとんどすべてのファイルを使われていないファイルとしてフラグを立てるのですか?

これは、Windows上のdeslop-jsにおける既知のパス区切り文字の不一致バグです(バックスラッシュとフォワードスラッシュの違いによりインポートグラフのエッジが欠落します)。修正はdeslop-js main(PR #16)にマージされており、次のreact-doctorリリースに含まれる予定です。それまでは、一時的な回避策として、WSLまたはUnix環境内でreact-doctorを実行するか、millionco/deslop-js#16からパッチを手動で適用してください。

参照 Issue #652
トラブル対応
対話型CLIチェックリストですべてのアイテムを選択する方法は?

'a'キーを押すと、現在のリスト内のすべてのオプションを選択/選択解除します。このキーボードショートカットはインタラクティブインターフェースで動作します。

参照 Issue #647
security
GitHub Actionsワークフローで@mainブランチを使用することはセキュリティリスクですか?また、アクションを安全にpinするにはどうすればよいですか?

はい、@mainのような可変ブランチでアクションを参照すると、上流リポジトリが侵害された場合にサプライチェーン攻撃を許す可能性があります。代わりに、特定のリリースタグ(例:@v1.2.3)または完全なコミットSHAに固定してください。react-doctorの場合は、@mainではなくuses: millionco/react-doctor@<tag-or-sha>を使用してください。

参照 Issue #299
トラブル対応
npx react-doctor@latest を実行した際に「Cannot find package 'oxc-parser'」エラーを修正する方法は?

このバグはreact-doctor@0.2.14に影響します。oxc-parserが誤ってdependenciesではなくdevDependenciesにリストされています。回避策:react-doctorを実行する前に、プロジェクトにoxc-parserを手動でインストールしてください(npm install oxc-parserまたはpnpm add oxc-parser)。または、react-doctor@0.2.3以前にダウングレードしてください。恒久的な修正については、issue #629を追跡してください。

参照 Issue #629