联手 Copilot，我在 10 个小时内上线了一个前端网站

[LeslieLeung]

我有个一直在做的通知网关项目 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 部署，几乎零成本运行。

GitHub - LeslieLeung/heimdallr-configurator

[foam]

执行力点赞

[kanchi240]

@LeslieLeung 请问你的 code 用的是什么主题，很好看

[LeslieLeung]

@kanchi240 Catppuccin Latte ，配合了一个叫 apc 的插件来改外观，这有一份配置文件可以参考： https://gist.github.com/LeslieLeung/1bcbac2cd25e28422bfcf1252e42faaf

[kanchi240]

收到，多谢！