搭配 JavaScript 使用 GitHub Copilot

  • 3 分鐘

在先前的單元中，我們示範如何設定 Copilot，並提及如何讓您更快速地以開發人員身分開始撰寫程式碼。

在本單元中，讓我們討論 Copilot 如何協助您處理現有的專案，以及協助您處理更複雜的工作。

使用 GitHub Copilot 進行開發

當我們建置專案時，通常需要持續確保程式碼是全新且更新的狀態。 此外，我們可能需要修正任何出現的錯誤或新增新功能，以改善其功能和可用性。 讓我們探索一些使用 GitHub Copilot 和 GitHub Copilot Chat 進行更新的方法，這是一個互動式聊天介面，可用來詢問和接收程式碼相關問題的回答。

提示工程

雖然 GitHub Copilot 可在您輸入時建議程式碼，但您也可以建置提示來建立實用的建議。 提示 (即我們的輸入) 是協助產生程式碼的指示或指導方針集合。 提示有助於從 Copilot 產生特定回應。 使用 GitHub Copilot Chat 時，提示可能是引導 Copilot 代表您產生程式碼的註解或輸入，或是撰寫 Copilot 自動完成的程式碼。

Copilot 的輸出品質取決於您製作提示的方式。 建立有效的提示對於達成所要的結果至關重要。 例如，如果有下列的提示：

// Create an API endpoint

由於提示模棱兩可且模糊，因此 GitHub Copilot 的結果可能不是您需要的結果。 例如，其可以使用您不知道的架構，或需要您無法辨識資料的端點。 不過，如果有下列的提示：

// Create an API endpoint using the React framework that accepts a JSON payload in a POST request

這最後一個提示很明確，可讓 GitHub Copilot 了解工作的目標和範圍。 雖然您也可以使用註解或程式碼提供內容和範例給 Copilot，您也可以使用 GitHub Copilot Chat 的聊天選項。 有良好的提示可確保模型產生高品質的輸出。

使用 GitHub Copilot 的最佳做法

Copilot 會超載您的生產力，但需要一些良好的做法來確保品質。 使用 Copilot 時的一些最佳做法如下：

  • 請讓提示保持簡單，然後在您繼續執行時，新增更詳細的元件做為範例：

    create an HTML form with a text field and button

    接下來，詳細說明提示以取得更明確的建議：

    Add an event listen to the button to send a POST request to /generate endpoint and display response in a div with id "result"

  • 若要在各項建議之間來回切換做選擇，您可以使用 Ctrl+Enter (或在 Mac 上使用 Cmd+Enter) 來執行此動作。 您可以從 Copilot 取得各項建議，且您可以挑選最佳的輸出。 或者，使用 GitHub Copilot Chat 時，您可以使用聊天輸入來新增提示，並與輸出互動。

如果您停滯或未取得您所需的結果，可以重新撰寫提示或開始撰寫 Copilot 的程式碼以自動完成。

注意

GitHub Copilot 會使用文字編輯器中的開啟檔案做為其他內容。 這會很有幫助，因為其除了您可能會撰寫的提示或程式碼之外，還會提供很實用的資訊。 如果您需要 GitHub Copilot 根據其他檔案提供建議，您可以在使用 GitHub Copilot Chat 時開啟這些檔案，或使用 @workspace 提示。