原文：How to Create an Automated Pull Request Checklist in GitHub，作者：Brittany Joiner
如果你曾经为某个项目做过贡献，无论是你的应用程序还是开源工具，你都可能创建了一个 pull request。这要求对你的代码进行更改以合并到主代码库中。
我们使用 pull request 来确保只有高质量的代码被合并到主分支中。但有时我们在经过艰苦的编码开发新功能后会忽略一些小事情，产生错误。
最坏的情况是，这些错误可能会被团队成员忽略，然后合并到主代码库中，导致 bug 或降低效率。而最好的情况是，团队其他成员可能会花些时间来检查出问题并反馈。
我在创建 pull request 的时候特别容易偷懒，所以我做了任何开发人员都会做的事情......我找到了一种自动化生成 pull request 检查清单并强迫自己完成工作的方法！
本教程向你展示如何在浏览器中构建一个扩展，以自动生成一个 pull request 检查清单，在你检查该清单中的每个项目之后，才显示 Create Pull Request（创建拉取请求）这个按钮。
开始
在你开始之前，你需要先做准备工作。
列出要在代码中检查的内容
忘记任何工具或任何自动化......花几分钟，想想需要具备什么才是一个好的 pull request，并列出这些项目。
是什么让你可以轻松查看其他 pull request？或者你经常发现人们评论的常见错误是什么？
如果你需要一些想法，这是我列出的项目：
- 一切按字母顺序排序
- 审阅者如何在本地测试代码的说明
- 已添加测试
- 功能/bug 修复的屏幕截图（如果适用）
- 如果添加了任何新文本，则将其国际化
- 任何新元素都有 aria 标签
- 调试后不会不小心留下
console.logs - 我是否为变量和函数使用了简洁明了的名称
- 我是否解释了所有可能的解决方案以及为什么选择我所做的那个
- 添加注释以使新功能更清晰
- 添加了 pull request 标签
- 更新任何历史/变更日志文件
如果你仍然不确定，请与你团队中更高级的开发人员交谈，看看他们在审查 pull requet 时会关注什么。
创建 PixieBrix 帐户（你的浏览器自动化工具）
有一些浏览器扩展可以让你创建自动化。我发现 PixieBrix 非常强大，而且它的社区氛围很友好。
PixieBrix 提供最通用的低代码平台，用于扩展你和你的团队在使用的 Web 应用程序。你将获得你需要的高效的、个性化的体验——来源：PixieBrix 网站
为了创建我在下面描述的自动化，你需要注册一个免费的 PixieBrix 帐户。
只需在他们的网站上选择“免费开始”，然后按照引导创建一个帐户。系统将提示你安装 PixieBrix Chrome 扩展程序。
现在你准备好了！
如何构建 pull request 清单自动化
好吧，你都准备好了，现在是构建的时候了。
如果你想采取最直接的路线，你可以激活我已经构建的扩展，并随意编辑。
但是，如果你想从头开始构建它并更熟悉浏览器自动化的工作原理，请按照以下步骤操作。
第 1 步 – 在 PixieBrix 中打开页面编辑器
要在 PixieBrix 中构建扩展，你不需要 VSCode 或任何其他编辑器，你可以完全在浏览器中完成所有操作。
我喜欢首先转到我希望执行操作的页面，在本例中为 github.com。
要访问编辑器，请右键单击任何网页以打开 Context Menu（上下文菜单）并选择 Inspect 检查。滚动标签（你知道，Elements、Console、Network 等标签），直到你看到 PixieBrix。
系统可能会提示你允许某些权限，但随后你会发现一个空白页面，左上角有一个按钮，上面写着 “Add（添加）”，这就是我们要开始的地方。
第 2 步 - 添加触发
要在 PixieBrix 中构建扩展，你需要将积木链在一起。你可以将砖块视为功能，扩展是主要功能，按你配置的顺序执行较小的功能。
你有多种选择来触发此扩展。
你可以选择手动操作，例如向页面添加按钮或 context menu（当你右键单击网页时 - 与你进入检查器的菜单相同），或者你可以使用快速栏命令（键盘快捷键）。
侧边栏面板会在浏览器右侧打开一个面板，它实际上不是触发器，而是用于为另一个触发器创建显示。
对于这个工作流程，请使用 Trigger 选项。该选项会在你加载特定网页并满足你配置的其他条件时运行扩展程序。
这是它的界面：
你可以将顶部的名称更改为你喜欢的名称，例如 Github PR Checklist。
要配置触发器，请考虑何时要查看检查清单。你可以设置一访问 GitHub 就启动它，但这可能比你想要的更频繁，因为当你阅读 issue 或在 repo 中搜索某些内容时不需要清单。
我决定在页面上有一个 create pull request 按钮元素时触发它，这表明我即将打开一个拉取请求，所以这可能是检查我的清单的好时机！
因此，请创建一个 pull request 并导航到具有该绿色按钮的页面（同时保持页面编辑器打开）。
看到该按钮后，滚动到触发器的 Advanced: Match Rules 部分，然后查找 Selectors 字段。
你可以使用鼠标打开元素选择器视图并单击以选择按钮，或者你可以直接在字段中复制此类。
.hx_create-pr-button
现在你已经创建了一个触发器，该触发器表示你可以随时加载托管在 github.com 上的页面。
好的，所以我们已经确定了该按钮的类，所以最难的部分已经完成了！现在我们只需要隐藏它，显示清单，然后在清单完成后再次显示它。
第 3 步 – 隐藏 create pull request 按钮
选择触发器下方的加号按钮以添加另一个部分。你将看到一个开放的市场，允许你搜索所有可用的块。搜索 hide，你会看到这个部分。
将鼠标悬停在 “Hide” 块上并查看更多选项，然后选择 “Add” 将其添加到你的扩展程序中。
这个部分需要的唯一配置是隐藏哪个元素。在这个示例中，它将与我们在触发器中使用的元素完全相同——创建拉取请求按钮。因此，你可以复制同一个类并将其设置为选择器的值。
第 4 步 – 打开侧边栏
添加另一个名为 Show Sidebar 的部分。这将在浏览器右侧打开一个面板以显示内容。
我将 panelHeading 字段设置为 PR，以指定它应该加载 PR 选项卡。如果你尚未设置其他侧面板，则无需在此处放置任何东西，你可以跳到下一步。
第 5 步 - 把 issue 分配给自己
在我们进入清单之前，除了显示清单和隐藏按钮之外，我还添加了一项自动化功能。
我创建了一个动作来把 issue 分配给自己。这只是一个点击，但为什么不让机器人去做呢？😊
请添加另一个名为 Simulate a DOM event 的部分。这就像它听起来的那样......它假装对特定元素做某事，例如点击它。
为你希望与之交互的元素和事件提供选择器。
就像在触发器和隐藏部分中一样，你可以使用鼠标按钮在屏幕上打开选择器，然后选择 assign yourself 链接以自动将这些类应用到选择器字段。
你还可以通过将其复制并粘贴到 selector 字段中来手动应用该类：
#new_pull_request .js-issue-assign-self
确保为 event 选择 click，一切就绪！
第 6 步 - 创建你的清单
现在我们正处于扩展的核心。是时候建立清单了。选择加号按钮并添加 Show a modal or sidebar form 部分。
这是用于设计表单，对于我们在提交拉取请求之前要确认或考虑的每个项目，将是一个复选框字段。
设置表单标题和描述
这些纯粹是装饰性的，因此请将它们设置为你想要的任何内容。
配置你的第一个字段
在打开拉取请求之前获取你要查看的项目列表，然后选择第一个。这将是我们的第一个表单字段，你需要在 PixieBrix 中设置以下字段：
namelabelinput type
名称和标签可以是任何你想要的。保持名称简单，因为你需要在下一步检查它是否正确时引用它。标签是复选框旁边的视觉显示。对于输入类型，选择复选框。
你可以在 PixieBrix 页面编辑器的右侧面板上预览它的外观。
将其余项目添加为新字段
在字段上方滚动以选择显示“添加新字段”的蓝色按钮，然后为你有的项目再次执行所有操作。
最终表单配置
快完成了！在表单字段选项下方滚动，直到看到 Submit Button Text。你可以保持原样，但我将我的自定义为 Ready to Open 以使按钮操作更加清晰。
最重要的是，通过选择下拉菜单将 Location 值更改为 sidebar 而不是 modal。这会将表单设置为显示在我们在上一步中打开的侧栏中。
第 7 步 – 完成清单后显示 create pull request 按钮
向这个名为 Show 的扩展添加最后一部分。这类似于 Hide，我们将把我们一直引用的同一类传递给 create pull request 按钮。
如果你需要复习，请看这里：
.hx_create-pr-button
还有一个要配置的部分。我们想控制这个部分何时执行，因为我们只想在表单提交中检查每个项目时显示按钮。
我们可以将表单中的每个字段都设置为必填项，这样在检查完所有内容之前你无法提交表单。但另一种方法是编辑此部分的高级选项下的 Condition 字段。
你可以在此处指定此特定部分何时运行。如果清单中的每个字段都为真，你将构建一个返回真的语句。
这就是语法的样子，你需要将 item 值换成每个项目的名称。
{{ "true" if @form.item1 and @form.item2 and @form.item3 and @form.item4 and @form.item5 and @form.item6 and @form.item7 and @form.item8 and @form.item9 and @form.item10 and@form.item11 }}
完成后，你的设置应如下所示：
选择 PixieBrix 页面编辑器右上角的蓝色保存按钮以保存你的扩展程序。
试一试
现在试一试！无论你是激活了预构建的扩展，还是按照教程自行构建，你都已准备好进行测试。
打开一个 pull request，你将看到侧边栏表单并且没有绿色按钮。检查列表中的所有项目，然后提交，然后突然出现你的按钮，你已经被分配到 PR！
如果你在开始构建它时遇到任何问题，或者它没有按预期工作，PixieBrix 社区很活跃，维护者总是愿意加入并提供帮助。
但是，如果你是一个视觉学习者并且更喜欢观看，我制作了一个视频，向你展示如何构建这个自动化 PR 检查清单。
感谢你阅读本文！