首页 >web前端 >js教程 >AI 编码助手、入门模板等:减少工作量指南

AI 编码助手、入门模板等:减少工作量指南

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-20 00:03:02266浏览

您是一名 JavaScript 开发人员,怀揣着构建令人惊叹的事物的远大梦想。但在您开始实施下一个令人难以置信的应用程序创意之前,您必须花费数小时来设置样板代码和基础设施。需要配置开发环境、设置 CI 管道以及构建大量通用功能,例如用户配置文件和身份验证流程。

您觉得这并不是对您的时间或才能的最佳利用。那是你开始寻找捷径的时候。可以处理应用程序日常部分的工具和资源,以便您可以专注于您正在尝试构建的特殊功能。

您可能已经在某种程度上依赖人工智能编码助手,但当它们与旨在快速启动我们的项目的其他开发工具和资源配合使用时,真正的魔力就会发生。

虽然人工智能可以简化许多任务,但了解如何有效地使用经过验证的工具和资源至关重要。这些可以指导您的 AI 助手生成更干净、经过更好测试且更高效的代码。

项目模板和人工智能编码助手

项目模板为各种技术堆栈提供预配置的设置。它们已经存在很长时间了,但也许与直觉相反,随着人工智能编码助手的兴起,它们变得更加重要。

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

示例:Vercel.com 和 Remix.run 上的入门模板

模板为您的 AI 助手提供了最佳的上下文,节省了数小时的细致提示工程以及与您的 AI 伙伴的长时间对话。模板有详细说明。它定义了开发环境、使用的依赖项、数据传输方法、框架、状态管理、样式解决方案等等。

模板还嵌入了编码约定和开发标准。有了坚实的、经过测试和验证的基础,您就无需逐个提示地将整个事情拼凑在一起。

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

使用Cursor AI和@Codebase提及自定义预制项目(模板)

除了模板本身之外,一些 AI 助手(如 Cursor AI)还支持通用指令文件来指导 AI 提出的每个建议。例如,请参阅由高级开发人员编写的 Cusror AI 指令集合,以在 .cursorrules 文件中使用:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

https://cursor.directory/

基础设施即代码和人工智能编码助手

编码不仅仅是编写前端或后端逻辑,而是为您的应用程序的蓬勃发展建立整个生态系统。 AWS CDK、Pulumi 或 Terraform 等工具可让您将云基础设施定义为代码。

像 SST 这样的现代 IoC 工具非常“了解”代码库的功能方面。它们嵌入到应用程序的逻辑中,以实现简化且更可靠的开发。现代 IoC 工具通常提供令人难以置信的抽象 API,这使您和您的 AI 伴侣更容易理解。

使用 IoC 可以让您的 AI 编码助手为您提供更多帮助。它可以操纵和扩展您的基础设施,就像它对您的逻辑和 UI 所做的那样。您的代码库就是人工智能为您提供良好服务所需的全部内容。没有任何内容被隐藏,包括为您的应用程序提供支持的资源。

/**  
* SST Example; the code for nextjs deployment   
* along with the creation of an S3 bucket (acesible to it)  
**/  

const bucket = new sst.aws.Bucket("MyBucket", {  
  access: "public"  
});  

new sst.aws.Nextjs("MyWeb", {  
  link: [bucket]  
});

自托管 UI 库和 AI 编码助手

将 UI 组件直接嵌入到项目中,而不是将它们安装为(不可变的)npm 包,这为您提供了更大的灵活性来调整和扩展它们。

将自己的 UI 组件实例作为代码库的一部分的一个主要优点是,它使您的 AI 编码助手可以更轻松地根据需要编写新的 UI,同时参考您自定义的组件集合及其(可能)修改的内容行为和 API。

一些组件集合(例如 shadcn/ui)提供 CLI 工具来帮助您完成“复制粘贴”过程。 Bit 等其他工具可以帮助您对 Bit 平台上托管的任何 UI 库执行相同的操作。任何组件都可以安装或复制到您的项目中。

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

Bit Platform 上托管的 Radix 组件的自定义集合

就 Bit Platform 而言,专门的 AI 助手还可以根据您最喜欢的组件库生成自定义的共享组件集合。

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

在 Bit Platform 上生成自定义 Material UI 组件的共享集合

可组合代码库和 AI 编码助手

可组合软件或可组合代码库是两个密切相关的概念,它们在软件开发中也已经存在了一段时间。

本质上,可组合代码库是由模块化、可重用且可独立管理的组件或模块设计的。这些模块可以以不同的方式组装以产生新系统或修改现有系统。系统可以在构建时、运行时或混合状态下组合,形成前端、后端,甚至其基础设施。

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

示例:由可重用组件组成的可组合 React Apollo 服务器应用程序

“可组合”方法因其生成的标准化、可维护且高度适应性的代码而受到许多人的喜爱和采用。

标准化”,因为相同的组件在整个系统中重复使用。 “可维护”,因为系统中的组件形成了一个清晰的依赖关系图,描述了它们如何相互关联,而且还因为代码总行数 (LOC) 大大减少。最后,它是“适应性强”,因为组件可以在不同的星座中使用,以满足新的需求。

人工智能编码助手正在为可组合性带来全新​​的旋转。

像 Bit 这样的平台已经采用了这种方法,为独立组件提供了一个家,以及人工智能驱动的编码助手。这个助手不仅仅是简单的代码生成;它了解系统的依赖关系图,并且优先考虑重用现有组件,而不是从头开始创建新代码

这种策略性重用确保代码库保持高效和可维护,避免不必要的膨胀。此外,由于重复使用的组件已经过测试和验证,因此可以保证您获得更好的睡眠。

例如,请参阅以下给Bit AI助手的提示:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

使用 Bit 的 AI 编码助手生成新功能

生成的组件将是代码库中现有独立组件的组合:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

人工智能生成的组件“contact-us-form”由代码库中的现有组件组成

然后在加入您的代码库之前构建并测试该组件,在某种程度上,这是可重用组件的精选集合:

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

AI Coding Assistants, Starter Templates, and More: A Guide to Working Less

人工智能生成的组件在加入 Bit Platform 上的代码库之前会进行构建和测试

结论

没有人开始编码,因为他们对设置样板或与管道进行角力感到兴奋。当你开始专注于真正重要的创造性的、改变游戏规则的事情时,真正的魔力就会发生。人工智能编码助手可以为您提供帮助,但是,如果在没有考虑计划或方法的情况下使用它们,通常会导致与您的人工智能合作伙伴进行冗长乏味的对话。

以上是AI 编码助手、入门模板等:减少工作量指南的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn