🚀 在 VS Code 中

在 VS Code 中使用 GitHub Copilot 的程式碼完成

GitHub Copilot 作為 AI 驅動的配對程式設計師,自動提供建議來完成您的程式碼、註解、測試等等。 它在您編寫程式碼時直接在編輯器中提供這些建議,並且可以與各種程式設計語言和框架一起使用。

Copilot 提供兩種建議

  • 程式碼完成 - 開始在編輯器中輸入,Copilot 會提供符合您的程式碼風格並考慮您現有程式碼的程式碼建議。

  • 下一步編輯建議 - 使用 Copilot 下一步編輯建議 (又名 Copilot NES) 預測您的下一個程式碼編輯。 根據您所做的編輯,Copilot NES 會預測您想要進行下一個編輯的位置以及該編輯應該是什麼。

開始使用

  1. 安裝 GitHub Copilot 擴充功能。

    安裝 GitHub Copilot 擴充功能

  2. 使用您的 GitHub 帳戶登入以使用 Copilot。

    提示

    如果您還沒有 Copilot 訂閱,您可以註冊Copilot 免費方案並獲得每月完成次數和聊天互動次數的限制,即可免費使用 Copilot。

  3. 透過我們的Copilot 快速入門,探索 VS Code 中 Copilot 的主要功能。

內嵌建議

Copilot 會在您輸入時提供程式碼建議:有時是目前行的完成,有時是全新的程式碼區塊。 您可以接受全部或部分建議,也可以繼續輸入並忽略建議。

請注意在以下範例中,Copilot 如何使用變暗的虛影文字建議 calculateDaysBetweenDates JavaScript 函式的實作方式

JavaScript ghost text suggestion.

當您看到內嵌建議時,可以使用 Tab 鍵接受它。

Copilot 嘗試將您程式碼中已有的相同程式碼風格應用於程式碼建議。 請注意在以下範例中,Copilot 將 add 方法中的相同輸入參數命名方案應用於建議的 subtract 方法。

JavaScript ghost text suggestion.

部分接受建議

您可能不想接受 GitHub Copilot 的整個建議。 您可以使用 ⌘→ (Windows、Linux Ctrl+Right) 鍵盤快速鍵來接受建議的下一個字詞或下一行。

替代建議

對於任何給定的輸入,Copilot 可能會提供多個替代建議。 您可以將滑鼠懸停在建議上以查看任何其他建議。

Hovering over inline suggestions enables you to select from multiple suggestions

從程式碼註解產生建議

您可以透過使用程式碼註解來提供您期望的程式碼提示,而不是依賴 Copilot 提供建議。 例如,您可以指定要使用的演算法或概念類型 (例如,「使用遞迴」或「使用單例模式」),或要新增至類別的方法和屬性。

以下範例顯示如何指示 Copilot 在 TypeScript 中建立一個類別來表示學生,並提供有關方法和屬性的資訊

Use code comments to let Copilot generate a Student class in TypeScript with properties and methods.

下一步編輯建議

內嵌建議非常適合自動完成程式碼區段。 但由於大多數程式碼編寫活動都是編輯現有程式碼,因此 Copilot 程式碼完成的自然演進也是協助編輯,無論是在游標處還是在更遠處。 編輯通常不是孤立地進行的 - 在不同情境中需要進行哪些編輯存在邏輯流程。 Copilot 下一步編輯建議 (Copilot NES) 就是這種演進。

根據您所做的編輯,Copilot NES 會預測您想要進行下一個編輯的位置以及該編輯應該是什麼。 Copilot NES 可協助您保持流程,建議與您目前工作相關的未來變更,您只需按 Tab 即可快速導覽並接受 Copilot 的建議。 建議可能會跨越單一符號、整行或多行,具體取決於潛在變更的範圍。

導覽並接受編輯建議

您可以使用 Tab 鍵快速導覽建議的程式碼變更,從而節省您尋找下一個相關編輯的時間 (無需手動搜尋檔案或參考)。 然後您可以再次按 Tab 鍵接受建議。

邊界中的箭頭表示是否有可用的編輯建議。 您可以將滑鼠懸停在箭頭上以探索編輯建議選單,其中包含鍵盤快速鍵和設定組態:Copilot NES 邊界選單已展開

如果編輯建議位於目前編輯器視窗下方,則箭頭將向下而不是向右指向:Copilot NES 箭頭方向變更

重要

如果您正在使用 VS Code vim 擴充功能,您可能需要更新您的 keybindings.json。 請參閱 GitHub issue 以瞭解更多資訊。

下一步編輯建議的使用案例

捕捉和更正錯誤

  • Copilot 有助於處理簡單的錯誤,例如錯字。 它會建議修復遺漏或交換字母的位置,例如 cont x = 5conts x = 5,應該是 const x = 5

    Copilot NES fixing a typo from "conts" to "const"

  • Copilot 也可以協助處理邏輯中更具挑戰性的錯誤,例如反轉的三元運算式

    Copilot NES fixing a fibonacci logic mistake

    或應該使用 && 而不是 || 的比較

    Copilot NES fixing an if statement mistake

變更意圖

  • Copilot 建議對程式碼的其餘部分進行變更,以符合意圖的新變更。 例如,當將類別從 Point 變更為 Point3D 時,Copilot 會建議在類別定義中新增 z 變數。 接受變更後,Copilot NES 接下來建議將 z 新增至距離計算

    Copilot NES gif for updating Point to Point3D

重構

  • 在檔案中重新命名變數一次,Copilot 會建議在其他所有地方更新它。 如果您使用新的名稱或命名模式,Copilot 會建議以類似方式更新後續程式碼。

    Copilot NES suggesting change after updating function name

  • 符合程式碼風格。 複製貼上一些程式碼後,Copilot 會建議如何調整它以符合貼上發生的目前程式碼。

啟用或停用程式碼完成

您可以為所有語言或僅為特定語言啟用或停用程式碼完成。

  • 若要啟用或停用程式碼完成,請選取狀態列中的 Copilot 選單,然後勾選或取消勾選選項以啟用或停用程式碼完成。

    Screenshot of the Copilot menu in the Status Bar with checkboxes to enabled or disable code completions and NES.

  • 或者,修改設定編輯器中的 github.copilot.enable 設定。

    為您要啟用或停用程式碼完成的每種語言新增一個項目。 若要啟用或停用所有語言的程式碼完成,請將 * 的值設定為 truefalse

變更 AI 模型

不同的 LLM (大型語言模型) 接受不同類型的資料訓練,並且可能具有不同的功能和優勢。 請參閱在 VS Code 中選擇不同 AI 語言模型,以瞭解更多資訊。

若要變更用於在編輯器中產生程式碼完成的語言模型

  1. 從 VS Code 標題列中的 Copilot 選單中選取設定程式碼完成...

  2. 選取變更完成模型...,然後從清單中選取其中一個模型。

注意

可用模型的清單可能會有所不同,並且會隨著時間而變更。 如果您是 Copilot Business 或 Enterprise 使用者,您的管理員需要透過在 GitHub.com 上的Copilot 政策設定中選擇加入 Editor Preview Features,來為您的組織啟用某些模型。

提示與技巧

內容

為了給您相關的內嵌建議,Copilot 會查看您編輯器中的目前檔案和開啟的檔案,以分析內容並建立適當的建議。 在使用 Copilot 時,在 VS Code 中開啟相關檔案有助於設定此內容,並讓 Copilot 更全面地了解您的專案。

設定

程式碼完成設定

  • github.copilot.enable - 啟用或停用所有或特定語言的內嵌完成。

  • editor.inlineSuggest.fontFamily - 設定內嵌完成的字型。

  • editor.inlineSuggest.showToolbar - 啟用或停用內嵌完成顯示的工具列。

  • editor.inlineSuggest.syntaxHighlightingEnabled - 啟用或停用內嵌完成的語法醒目提示。

下一步編輯建議設定

  • github.copilot.nextEditSuggestions.enabled - 啟用 Copilot 下一步編輯建議 (Copilot NES)。

  • editor.inlineSuggest.edits.allowCodeShifting - 設定 Copilot NES 是否能夠移動您的程式碼以顯示建議。

  • editor.inlineSuggest.edits.renderSideBySide - 設定 Copilot NES 是否可以盡可能並排顯示較大的建議,或者 Copilot NES 是否應始終在相關程式碼下方顯示較大的建議。

    • auto (預設):如果視窗中空間足夠,則並排顯示較大的編輯建議,否則建議會顯示在相關程式碼下方。
    • never:永遠不要並排顯示建議,始終在相關程式碼下方顯示建議。

後續步驟