Plane 的 React Doctor 实战React 代码库健康分扫描、本地分诊工作流与 CI 门禁集成【免费下载链接】plane Open-source Jira, Linear, Monday, and ClickUp alternative. Plane is a modern project management platform to manage tasks, sprints, docs, and triage.项目地址: https://gitcode.com/GitHub_Trending/pl/planePlane 仓库把 react-doctor 这个 Claude Code Skill 与 CI 工作流结合用一套统一的 0–100 健康分体系持续守护其 React 前端代码质量。读完本篇你将掌握 react-doctor 的三条触发路径回归检查、全量清理、/doctor完整分诊、常用命令行参数、规则解释与调优方式以及 Plane 如何在 GitHub Actions 中把它变成 PR 门禁的完整做法。一、react-doctor 在 Plane 仓库中的定位Skill 文档开头的定义很直接扫描 React 代码库中的安全、性能、正确性与架构问题输出 0–100 的健康分health score。它面向的是大型 React 代码库的体检覆盖安全security、性能performance、正确性correctness、可访问性accessibility、包体积bundle size与架构architecture多个维度。在 Plane 仓库中它并不是凭空引入的根目录 package.json 里有两处明确的落点doctor: npx react-doctorlatest, react-doctor: ^0.4.2doctor脚本意味着仓库成员可以直接用pnpm doctor触发一次扫描devDependencies 中锁定了react-doctor ^0.4.2而 Skill 命令统一使用npx react-doctorlatest拉取最新版。仓库 package.json 同时声明了node 22.22.0的运行环境要求。需要区分的是react-doctor不是Plane 的 linter 替代品。仓库日常静态检查走的是 OxLint共享配置见 .oxlintrc.json启用 react、typescript、jsx-a11y、import、promise、unicorn、oxc 插件由 AGENTS.md 中的pnpm check:lint/pnpm fix驱动。react-doctor 的价值在于补充 linter 难以覆盖的维度跨文件的架构问题、包体积、可访问性模式并以分数形式给出可追踪的趋势。二、Skill 定义的三条触发路径SKILL.md 的 description 声明了使用场景完成一个功能、修复一个 bug、提交 React 代码之前或用户输入/doctor、要求扫描/分诊/清理 React 诊断结果时。对应地文档把工作流分为三条路径。1. 修改 React 代码之后回归检查--diffnpx react-doctorlatest --verbose --diff这是提交前最轻量的用法--diff让工具只扫描相对基线分支base branch发生变化的文件。Skill 给出的纪律是——检查分数没有回退check the score did not regress如果分数下降先修复回归项再提交。这条路径适合嵌入日常开发节奏每改完一块 React 代码跑一次把质量门槛挡在 commit 之前。2. 常规清理或代码改进全量扫描npx react-doctorlatest --verbose去掉--diff即扫描整个代码库。文档要求按严重级别处理问题先 errors再 warnings。这适合周期性的大扫除——比如某个迭代结束后集中处理存量问题目标是让健康分整体爬坡。3./doctor完整本地分诊工作流当用户输入/doctor、说 run react doctor、或要求一次完整的 triage / cleanup而非单纯的回归检查时Skill 指示 agent 拉取规范分诊剧本canonical playbook并严格执行其中每一步curl --fail --silent --show-error \ --header Cache-Control: no-cache \ https://www.react.doctor/prompts/react-doctor-agent.md这个机制有两条值得注意的设计剧本是唯一的真实来源single source of truth。它定义了一个扫描 → 过滤 → 分诊 → 修复 → 验证scan → filter → triage → fix → validate的闭环直接编辑工作区文件但绝不提交never commits、绝不打开 PRnever opens PRs——修复动作只落在工作树上最终是否提交由开发者决定。剧本更新即全量生效。因为在源头更新 prompt每个 agent 下次 fetch 时就自动拿到新版剧本无需重装 skill。剧本内会按需拉取逐条规则per-rule的官方修复配方路径形如https://www.react.doctor/prompts/rules/plugin/rule.md保证每一处修复都使用经过评审测试的规范配方而不是各写各的。对 agent 工作流而言这套远程剧本 按需取配方的模式把分诊逻辑从仓库里解耦出来仓库内只保留一个薄薄的触发入口。三、命令行与常用参数Skill 文档给出的标准命令是npx react-doctorlatest --verbose --diff参数含义如下完整继承自 SKILL.md 的参数表参数用途.扫描当前目录--verbose按规则展示受影响的文件与行号--diff只扫描相对基线分支变更的文件--score只输出数值分数便于脚本消费几个组合建议--verbose --diff提交前定位这次改动引入了哪些新问题、在哪个文件哪一行单独--score把分数写进日志或 CI 输出做提交级趋势追踪Plane 的 CI 正是用 push 事件在默认分支上制造这种趋势见下文省略参数直接npx react-doctorlatest即pnpm doctor最简全量扫描。四、解释与配置规则doctor-explainSkill 文档还划清了修代码与调规则的边界当用户想理解某条规则、不认同某条规则、或想禁用/调优哪些规则运行而不是修代码时应改用doctor-explainskill别名/doctor-config。推荐路径是先解释npx react-doctorlatest rules explain rule再施加最窄的控制npx react-doctorlatest rules disable rule npx react-doctorlatest rules set rule ... npx react-doctorlatest rules category category ... npx react-doctorlatest rules ignore-tag tag这些命令最终会写入doctor.config.*配置文件或者写进package.json的reactDoctor字段。当前 Plane 仓库根目录尚未出现独立的doctor.config.*文件从仓库文件清单看配置处于未显式定制状态使用工具默认规则集。如果后续团队对某些规则有保留意见按上述rules set / ignore-tag落一份配置即可而不必改动代码。五、CI 集成.github/workflows/react-doctor.ymlSkill 管的是仓库内 agent 的本地行为而 Plane 还通过 react-doctor.yml 把 react-doctor 做成了远端质量门禁。这个工作流的设计细节很完整几乎每一段都有注释说明理由值得逐点拆解。触发时机PR 扫描 默认分支趋势react-doctor.yml 在两个事件上触发pull_requestopened / synchronize / reopened / ready_for_reviewPR 维度扫描并更新 PR 上的粘性总结评论push到preview分支在默认分支的每次推送后也扫描一次得到健康分的提交级趋势用于捕捉溜过 PR 评审的回归。注释明确指出 PR 专属步骤sticky summary comment在push事件上会自动跳过如果只想要 PR 时扫描可以注释掉 push 块。权限最小化react-doctor.yml 声明了四组权限各自用途都有注释权限用途contents: readactions/checkout读取仓库源码pull-requests: write读取 PR 变更文件列表把扫描限定在 diff 内 发布/更新 PR 粘性总结评论issues: write粘性评论底层复用issues.createComment/issues.updateCommentAPIPR 本质上是 issuestatuses: write发布带分数与 error/warning 计数的 commit status——这是push事件下结果的主要展示通道注释还给了两个降级开关把pull-requests: write降为read可保留 diff 扫描但关闭评论删掉statuses: write或在下方设commit-status: false可关闭 commit status。并发控制与 checkout 深度react-doctor.yml 的concurrency组按react-doctor-${{ github.event.pull_request.number || github.ref }}分组并cancel-in-progress: true——同一 PR或分支新提交到达时立即取消在跑的旧扫描评审者永远只看最新一次结果react-doctor.yml 的 checkout 使用fetch-depth: 0persist-credentials: false。注释解释了动机react-doctor 需要与 merge base 对比才能只报告 PR 引入的问题默认的浅克隆没有 merge base会退化成列出每个变更文件里的全部存量问题。同时关闭凭证持久化避免把 workflow token 留在.git/config里暴露给后续的第三方 action。Action 版本与可配置项实际执行步骤是millionco/react-doctorv2react-doctor.yml 中还以注释形式保留了完整的配置旋钮参考- uses: millionco/react-doctorv2 # with: # blocking: warning # 门禁级别: error(默认) | warning | none(仅建议) # scope: full # PR 上扫描整个项目而非仅变更文件 # comment: false # 关闭粘性 PR 总结评论 # review-comments: false # 关闭变更行上的内联 review 评论 # commit-status: false # 关闭 commit status # version: 0.4.0 # 固定版本而非 latest # directory: apps/web # 扫描子目录(默认 .) # project: web,admin # monorepo 中扫描指定 workspace 项目其中blocking决定门禁严格度error / warning / none 仅建议directory与project两个旋钮正对 Plane 的 monorepo 结构apps/web、apps/admin、apps/space等前端应用——从源码结构看未来若只想对某个应用做门禁可以直接取消这两行注释而不需要拆分工作流。六、小结本地纪律 远端门禁的分工场景命令 / 机制覆盖范围位置提交前回归检查npx react-doctorlatest --verbose --diff相对 base 分支的变更文件本地 / agent周期性全量清理npx react-doctorlatest --verbose整个代码库本地 / agent/doctor完整分诊拉取规范剧本执行 scan → filter → triage → fix → validate整个代码库只改工作树agent规则解释与调优rules explain / disable / set / category / ignore-tag写doctor.config.*或package.json#reactDoctor本地PR 门禁 分支趋势millionco/react-doctorv2blocking/scope/comment等旋钮PR diff默认或全量GitHub Actions这套组合在 Plane 中的分工是清晰的本地由 Skill 文档约束 agent 与开发者的提交纪律分数不许回退远端由 react-doctor.yml 兜底diff 扫描、粘性评论、commit status、趋势追踪而日常语法级检查仍由 OxLint.oxlintrc.json pnpm check:lint承担。三者叠加构成一条从写代码 → 提交 → PR → 合入默认分支全程可度量的 React 质量防线。【免费下载链接】plane Open-source Jira, Linear, Monday, and ClickUp alternative. Plane is a modern project management platform to manage tasks, sprints, docs, and triage.项目地址: https://gitcode.com/GitHub_Trending/pl/plane创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考