在過去的兩年裡，我和 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 在他的一篇貼文中也對此提出了質疑：
人工智慧編碼工具正在快速發展，我對接下來的發展感到興奮。我希望您覺得這篇文章及其提示很有幫助，並且很高興親自嘗試其中的一些內容。
