首頁 > web前端 > js教程 > AI 編碼助理、入門範本等:減少工作量指南

AI 編碼助理、入門範本等:減少工作量指南

Mary-Kate Olsen
發布: 2024-11-20 00:03:02
原創
258 人瀏覽過

您是 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板