🚀 在 VS Code 中

在 VS Code 中使用 GitHub Copilot 的最佳實務

本文涵蓋在 Visual Studio Code 中使用 GitHub Copilot 的最佳實務,方法是使用提示詞工程和為 GitHub Copilot 提供正確的內容。

注意

「提示詞工程」或「提示詞設計」是在討論 AI 時經常聽到的詞彙,指的是如何以及將哪些資訊封裝並傳送至 AI API 端點。Copilot 擴充功能會為您執行此程序,但您可以透過提供提示來引導擴充功能,以提供協助。

如果您是 VS Code 或 GitHub Copilot 的新手,您可能想要先檢閱GitHub Copilot 概觀文章,或直接深入開始使用教學課程。

有不同的選項可以最佳化您的 Copilot 體驗,以獲得行內建議和 Chat

充分利用 Copilot 行內建議

GitHub Copilot 擴充功能會自動呈現建議,以協助您更有效率地編碼。您可以做一些事情來協助(「提示」)Copilot,以便為您提供最佳的建議。好消息是,您可能已經在這樣做了,因為這些事情有助於您和您的同事理解您的程式碼。

向 Copilot 提供情境

當 Copilot 有足夠的情境來了解您在做什麼以及您需要什麼協助時,它的效果最佳。就像您在向同事尋求特定程式設計工作的協助時會向他們提供情境一樣,您也可以對 Copilot 執行相同的操作。

開啟檔案

對於程式碼完成,Copilot 會查看您編輯器中的目前檔案和開啟檔案,以分析情境並建立適當的建議。在使用 Copilot 時,在 VS Code 中開啟相關檔案有助於設定此情境,並讓 Copilot 看到您專案的更大範圍。

最上層註解

就像您會向同事簡要介紹高階概念一樣,您正在處理的檔案中的最上層註解可以協助 Copilot 了解您正在建立的各個部分的整體情境。

適當的 include 和參考

最好手動設定您的工作所需的 include 或模組參考。Copilot 可以提供建議,但您可能最清楚您需要包含哪些相依性。這也有助於讓 Copilot 知道您希望它在製作建議時使用哪些架構、程式庫及其版本。

在以下 TypeScript 範例中,我們想要記錄 add 方法的輸出。當我們沒有任何 include 時,Copilot 會建議使用 console.log

Copilot inline suggestion proposes Console.log when no imports in the file.

另一方面,當您新增對 Log4js 的參考時,Copilot 會建議使用該架構來記錄輸出

Copilot inline suggestion proposes logging using the imported logging framework.

有意義的函式名稱

就像名為 fetchData() 的方法對同事(或幾個月後的您)沒有多大意義一樣,fetchData() 也對 Copilot 沒有幫助。使用有意義的函式名稱有助於 Copilot 提供符合您需求的內文。

特定且範圍明確的函式註解

函式名稱的描述性有限,無法過長。函式註解可以協助填寫 Copilot 可能需要知道的詳細資訊。

使用範例程式碼啟發 Copilot

讓 Copilot 進入狀況的一個技巧是複製並貼上與您正在尋找的內容接近的範例程式碼到您開啟的編輯器中。提供一個小範例可以協助 Copilot 產生符合您想要達成的語言和任務的建議。一旦 Copilot 開始為您提供您想要且實際會使用的程式碼,您就可以從檔案中刪除範例程式碼。當 Copilot 預設提供較舊的程式碼建議時,這對於讓 Copilot 快速開始使用較新版本的程式庫特別有幫助。

保持一致並維持高品質標準

Copilot 將會依附於您的程式碼,以產生遵循現有模式的建議,因此「垃圾進,垃圾出」這句諺語適用。

始終保持高品質標準可能需要自律。特別是當您快速且隨意地編碼以使某些東西運作時,您可能想要在「hack」模式下停用 Copilot 完成功能。您可以從 Copilot 狀態選單暫時停用完成功能。透過選取 Copilot 狀態列項目來顯示 Copilot 狀態選單下拉式清單。

Hover over the Copilot Status bar item displays "Show Copilot status menu"

從下拉式清單中,您可以完全停用完成功能,或僅針對作用中檔案類型(例如 Markdown 檔案)停用。

Copilot Status menu dropdown with Disable Completions selected

充分利用 Copilot Chat

您也可以透過安裝 GitHub Copilot Chat 擴充功能,透過 聊天介面從 Copilot 獲得協助。

當您使用 Chat 與 GitHub Copilot 互動時,您可以執行幾件事來最佳化您的體驗。

使用 Chat 參與者和斜線命令

Chat 參與者旨在收集關於程式碼庫或特定領域或技術的額外情境。透過使用適當的參與者,Copilot Chat 可以找到並提供更好的資訊以傳送至 Copilot 後端。例如,如果您想詢問關於您開啟的專案的問題,請使用 @workspace,或使用 @vscode 來了解更多關於 VS Code 功能和 API 的資訊。

Asking the @vscode participant how to change the VS Code colors

當您提出問題時,斜線命令可協助 Copilot Chat 了解您的意圖。您是在學習程式碼庫 (/explain) 嗎?您是否需要協助修正問題 (/fix)?還是您正在建立測試案例 (/tests)?透過讓 Copilot Chat 知道您想要做什麼,它可以調整其回覆以符合您的任務,並提供有用的命令、設定和程式碼片段。

Inline Chat slash command list

您可以用自然語言查詢寫出您的專案範圍或目前任務,但使用 Chat 參與者和斜線命令更簡潔且更明確。

在 Copilot Chat 中深入了解Chat 參與者斜線命令

使用 Chat 變數取得情境

Chat 參與者(例如 @workspace@vscode)可以提供 Chat 變數,以提供特定領域的情境。您可以使用 # 符號在您的 Chat 提示詞中參考 Chat 變數。透過使用 Chat 變數,您可以更明確地指定您包含在 Chat 提示詞中的情境。

例如,#file 變數可讓您在 Chat 提示詞中參考您工作區中的特定檔案。這透過提供關於您正在處理的檔案的情境,協助使 Copilot Chat 的回覆更符合您的程式碼。您可以提出諸如「您可以建議改進 #file:package.json 嗎?」或「我如何在 #file:devcontainer.json 中新增擴充功能?」之類的問題。透過使用 #file 變數,您可以從 Copilot 獲得更有針對性且更準確的回應。

您也可以透過使用「Chat 檢視」中的「附加情境」按鈕,將情境新增至您的 Chat 訊息。然後,您可以從「快速選取」中選取特定類型的情境,例如目前選取範圍、工作區中的一個或多個檔案,或原始碼中的一個或多個符號。

Screenshot of VS Code Copilot Chat view, showing the Attach context button and context Quick Pick.

深入了解搭配 Copilot Chat 使用情境變數

具體明確且保持簡單

當您要求 Copilot 做事時,請在您的要求中具體明確,並將大型任務分解為個別的較小任務。例如,不要要求 Copilot 建立一個 Express 應用程式,該應用程式使用 TypeScript 和 Pug,並且有一個產品頁面,可從 MongoDB 資料庫擷取資料。而是先要求 Copilot 使用 TypeScript 和 Pug 建立 Express 應用程式。接下來,要求新增產品頁面,最後要求從資料庫擷取客戶資料。

當您要求 Copilot 執行特定任務時,請具體說明您想要使用的輸入、輸出、API 或架構。您的提示詞越具體,結果就會越好。例如,不要使用「從資料庫讀取產品資料」,而是使用「依類別讀取所有產品,以 JSON 格式傳回資料,並使用 Mongoose 程式庫」。

反覆運算您的解決方案

當要求 Copilot Chat 協助時,您不會受限於第一個回應。您可以反覆運算並提示 Copilot 改善解決方案。Copilot 同時具有產生的程式碼的情境以及您目前的對話。

以下是使用行內 Chat 建立函式來計算費氏數列的範例

First response from Copilot for a function to calculate Fibonacci numbers

也許您更喜歡不使用遞迴的解決方案

Ask Copilot to not use recursion and new result

您甚至可以要求 Copilot 遵循編碼慣例或改善變數名稱

Ask Copilot to use better variable names and new result

即使您已經接受了結果,您始終可以要求 Copilot 稍後反覆運算程式碼。

關於 Copilot 提示的更多資源

如果您想深入了解如何有效率地使用 GitHub Copilot,您可以繼續觀看以下影片和部落格文章