共计 1369 个字符，预计需要花费 4 分钟才能阅读完成。
我有个一直在做的通知网关项目 Heimdallr，这几天 star 多了很多，发现在什么值得买有个博主介绍了我的项目，然后在评论里发现有人提到，配置太多了，看不明白。
我之前一直想做一个前端页面来进行配置的管理，但是这个项目的首要考虑之一就是“轻量”，所以没有使用数据库，也不想做 CRUD（多没意思）。同时，我本身是后端，对前端的理解仅停留在会写一点点 HTML 和 CSS，所以一直很没有动手写过完整的前端网站。针对配置管理，朋友给了我一个灵感——一个生成 nginx 配置的 网站。
做一个前端页面来生成配置就好了！趁热打铁，我花了大概十个多小时，通过和 GitHub Copilot 合作，上线了一个前端网站 —— Heimdallr Configurator，如下。它的功能就是在左侧编辑通知渠道和分组，右侧同步生成可以直接使用的配置文件，提供复制和导出功能。
以下是一些我总结的技巧：
你来指路，他来解决细节
我一直觉得 Copilot 这个名字取得很好，它的角色不是代替程序员进行编写，而是在程序员的指导下完成繁复的部分。作为机长，你需要了解你的目的地，以及途中经过的路标——对应地，你需要知道最终完成的效果，以及如何分步去完成。
在我的例子里，我知道需要先把页面分成左右两栏，左边做一个 tab，底下一列卡片，每个卡片里放一个表单；右边做一个文本框和几个按钮，文本框实现同步左边表单变动生成配置内容，按钮实现复制、导出和重置功能等。将步骤拆分好后，再通过 Copilot 逐个去实现。
选对上下文，事半功倍
Copilot Chat 有一个选择上下文的功能，在光标没有选中文本时，上下文取当前窗口可见的行，选中了文本时，上下文为选中的文本（可以选中整个文件的全部文本），但是不能跨文件获取上下文。
当你不选择上下文时，Copilot 往往没法给出很具体的建议，它只会给出几个可能的原因。如果你碰巧不熟悉，一个个排查会浪费很多时间。如果你选择的上下文不对，Copilot 无法从中判断到有效信息，它会提示你，这时候重新选择，然后追问即可。在你不知道 bug 在哪里的情况下，可以先选中一段可能有问题的地方，描述问题，如果它表示这里没问题，再选择另一段追问即可。
给清晰指令，避免误解
尽量用简短的技术语言去描述你的需求，而不是自然语言。虽然大模型的能力能让它大致能理解“外行发言”，但正确的术语能避免它第一次给出的结果不满意的情况。例如上面写布局的例子，如果不指定使用 Tailwind CSS，它给出的例子很可能是用原生的 CSS 写的。
另外，我个人建议使用英文与 Copilot Chat 交流，个人觉得交流起来更加方便、精准。而且有时候你跟它说中文，回答可能还是英文。
写好注释，面向自然语言编程
在代码比较简单的时候，也可以不用 Copilot Chat，直接打注释。
篇幅有限，具体示例可以移步我的博客查看：https://ameow.xyz/archives/develop-a-frontend-site-with-copilot
如果你对文中提到的项目感兴趣，这里是它们的地址。
GitHub – LeslieLeung/heimdallr: 一个非常轻量的通知网关，可以聚合各种推送渠道，使用 Serverless 部署，几乎零成本运行。
