在过去的两年里,我和 Work & Co 的团队一直在测试并逐步集成 Copilot、Cursor、Claude 和 ChatGPT 等 AI 编码工具,以帮助我们提供大众使用的网络体验。诚然,在经历了一些最初的怀疑和一些恍然大悟之后,各种人工智能工具已经进入我的日常使用。随着时间的推移,我们发现让人工智能接管有意义的应用程序列表开始增长,因此我决定为我所谓的“负责任的开发人员”分享一些人工智能工具的实际用例。 负责任的开发商是什么意思? 我们必须确保我们提供符合利益相关者和客户期望的高质量代码。我们的贡献(即拉取请求)不应成为必须审查和测试我们工作的同事的负担。另外,如果您在公司工作:我们使用的工具需要得到雇主的批准。安全和隐私等敏感方面需要妥善处理:未经政策批准,请勿将机密、客户数据 (PII) 或专有代码粘贴到工具中。将其视为来自互联网上陌生人的代码。始终进行测试和验证。 注意:本文假设您对 AI 编码工具有一定的了解,例如 VSCode 或 Cursor 中的 Copilot。如果所有这些对您来说都是全新且陌生的,那么 Github Copilot 视频教程对您来说可能是一个绝佳的起点。
人工智能编码工具的有用应用 注意:以下示例将主要关注基于 JavaScript 的 Web 应用程序,例如 React、Vue、Svelte 或 Angular。 了解不熟悉的代码库 在已建立的代码库上工作并不罕见,加入大型遗留代码库可能会令人生畏。只需打开您的项目和 AI 代理(在我的例子中,是 VSCode 中的 Copilot Chat),然后开始提问,就像问同事一样。总的来说,我喜欢与任何人工智能代理交谈,就像与人类同胞交谈一样。 这是一个更精致的示例提示: “给我一个高级架构概述:入口点、路由、身份验证、数据层、构建工具。然后列出 5 个要按顺序阅读的文件。将解释视为假设,并通过跳转到引用的文件来确认。”
您可以继续提出后续问题,例如“路由详细如何工作?”或者“告诉我身份验证过程和方法”,它将引导您找到有用的方向,为不熟悉的代码库的黑暗带来一些启发。 升级依赖项时对重大更改进行分类 更新 npm 包,尤其是当它们带来重大更改时,可能是一项乏味且耗时的工作,并且会让您调试大量的回归。我最近不得不将数据可视化库plotly.js从版本2升级到版本3,因此,一些图表中的轴标签停止工作。 我接着问ChatGPT: “我更新了使用 Plotly 的 Angular 项目。我更新了plotly.js(dist 包从版本 2.35.2 到 3.1.0),现在 x 和 y 轴上的标签消失了。发生了什么?”
代理很快就给出了解决方案(请参见下文)。 注意:在发布修复程序之前,我仍然根据官方迁移指南验证了解释。
跨文件安全地复制重构 不断增长的代码库肯定会带来代码整合的机会。例如,您注意到可以提取到单个函数或组件中的文件之间存在代码重复。因此,您决定创建一个可以包含在内的共享组件,并在一个文件中执行该重构。现在,您无需手动对剩余文件进行这些更改,而是要求代理为您推出重构。 代理允许您选择多个文件作为上下文。完成一个文件的重构后,我可以将重构的文件和未修改的文件添加到上下文中,并提示代理将更改推广到其他文件,如下所示:“将我在文件 A 中所做的更改也复制到文件 B”。 在不熟悉的技术中实现功能 使用 AI 编码工具时我最喜欢的一个惊喜时刻是它帮助我用 GLSL(一种我相当不熟悉的语言)创建一个相当复杂的动画渐变动画。在最近的一个项目中,我们的设计师提出了一个动画渐变作为 3D 对象的加载状态。我真的很喜欢这个概念,并希望为我们的客户提供一些独特且令人兴奋的东西。这问题:我只有两天的时间来实现它,并且 GLSL 的学习曲线相当陡峭。 人工智能工具(在本例中为 ChatGPT)再次派上用场,我开始非常简单地提示它为我创建一个独立的 HTML 文件,该文件呈现画布和非常简单的动画颜色渐变。我一步步提示人工智能添加更多技巧,直到获得不错的结果,这样我就可以开始将着色器集成到我的实际代码库中。 最终结果:我们的客户非常满意,并且借助人工智能,我们在很短的时间内交付了复杂的功能。 编写测试 根据我的经验,项目上很少有足够的时间来持续编写和维护一套适当的单元和集成测试,最重要的是,许多开发人员并不真正喜欢编写测试的任务。提示您的人工智能助手为您设置和编写测试是完全可能的,并且可以在很短的时间内完成。当然,作为开发人员,您仍然应该确保您的测试实际上查看应用程序的关键部分并遵循合理的测试原则,但您可以将测试的编写“外包”给我们的人工智能助手。 提示示例: “使用 Jest 为该功能编写单元测试。涵盖快乐路径、边缘情况和故障模式。解释每个测试存在的原因。”
您甚至可以将测试大师 Kent C. Dodds 的测试最佳实践作为指导传递给您的代理,如下所示:
内部模具 与前面提到的着色器示例有点类似,我最近的任务是分析代码库中的代码重复并比较重构前后。如果您不想走耗时的手动比较文件的路线,这当然不是一项简单的任务。在 Copilot 的帮助下,我创建了一个脚本来分析代码重复,在表格中排列和排序输出,并将其导出到 Excel。然后我更进一步。当我们的代码重构完成后,我提示代理将我现有的 Excel 工作表作为基准,在单独的列中添加当前的重复状态,并计算增量。 更新很久以前编写的代码 最近,我的一位老客户来找我,因为随着时间的推移,他的网站上的一些功能不再正常工作。 问题是:该网站是在大约十年前建立的,JavaScript 和 SCSS 使用的是相当旧的编译工具,例如 requireJS,并且设置需要旧版本的 Node.js,甚至无法在我的 2025 MacBook 上运行。 手动更新整个构建过程会花费我几天的时间,所以我决定提示 AI 代理,“你能将 JS 和 SCSS 构建过程更新为像 Vite 这样的精益 2025 堆栈吗?”确实如此,经过大约一个小时的代理优化后,我将 SCSS 和 JS 构建切换到了 Vite,并且我能够专注于实际的错误修复。在对构建过程进行此类整体更改时,只需确保正确验证输出和编译文件即可。 总结与起草 您是否想用一句话总结所有最近的代码更改以获取提交消息,或者拥有一长串提交并希望将其总结为三个要点?没问题,让AI来处理,但请务必校对。 示例提示就像向人类同胞发送消息一样简单:“请用简洁的要点总结我最近的变化”。 我的建议是谨慎使用 GPT 进行编写,并且与代码一样,请在发送或提交之前检查输出。 建议和最佳实践 提示 使用人工智能的不太明显的好处之一是,提示越具体、越量身定制,输出就越好。提示人工智能代理的过程迫使我们在编写和编码之前尽可能具体地制定我们的要求。这就是为什么,作为一般规则,我强烈建议您的提示尽可能具体。 Remix 的合著者 Ryan Florence 提出了一种简单而强大的方法来改进此过程,即用以下句子完成初始提示: “在我们开始之前,你有什么问题要问我吗?”
此时,人工智能通常会返回有用的问题,您可以在其中澄清您的具体意图,指导代理为您的任务提供更适合您的方法。
使用版本控制并按易于理解的块进行工作 使用像 git 这样的版本控制不仅在团队协作处理单个代码库时派上用场,而且还可以为您提供个人贡献者有稳定的积分可以在紧急情况下回滚。由于其不确定性,人工智能有时会变得失控,做出一些对你想要实现的目标毫无帮助的改变,并最终造成不可挽回的破坏。 将您的工作分成多个提交将帮助您创建稳定点,以便在事情出现问题时可以恢复到稳定点。你的队友也会感谢你,因为当你的代码被分成语义上结构良好的块时,他们将更容易审查你的代码。 彻底审查 这更像是一种通用的最佳实践,但在我看来,当使用人工智能工具进行开发工作时,它变得更加重要:成为代码的第一个严格审查者。确保花一些时间逐行检查您的更改,就像您审查其他人的代码一样,只有在通过您自己的自我审查后才提交您的工作。 “现在有两件事对我来说都是真实的:人工智能代理是令人惊叹的,并且能极大地提高生产力。如果你关闭大脑并完全放手,它们也是巨大的机器。”——Armin Ronacher 在他的博客文章《精神病特工:我们会疯吗?》中
结论和批判性思考 在我看来,人工智能编码工具可以提高我们作为开发人员的日常工作效率,并释放思维能力以进行更多规划和高层次思考。它们迫使我们细致地阐明我们期望的结果。 任何人工智能有时都会产生幻觉,这基本上意味着它处于自信的语气中。因此,请务必检查和测试,尤其是当您有疑问时。人工智能不是灵丹妙药,我相信,作为开发人员,卓越和解决问题的能力永远不会过时。 对于刚刚开始其职业生涯的开发人员来说,这些工具很容易为他们完成大部分工作。这里可能会迷失的是通过调试和解决棘手的错误和问题(又称为“苦差事”)而经常耗费精力和痛苦的工作。就连 Cursor AI 的 Lee Robinson 在他的一篇帖子中也对此提出了质疑:
人工智能编码工具正在快速发展,我对接下来的发展感到兴奋。我希望您觉得这篇文章及其提示很有帮助,并且很高兴亲自尝试其中的一些内容。