🚀 在 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 如何對建議的 subtract 方法應用與 add 方法相同的輸入參數命名慣例。

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 的建議。建議可能跨越單一符號、整行或多行，具體取決於潛在變更的範圍。

啟用編輯建議

Copilot NES 目前為預覽版。您可以透過 VS Code 設定 github.copilot.nextEditSuggestions.enabled 啟用它

  1. 開啟 VS Code 設定編輯器 (⌘, (Windows、Linux Ctrl+,))
  2. 搜尋 github.copilot.nextEditSuggestions.enabled
  3. 啟用設定

如果您是 Copilot Business 或 Enterprise 使用者，除了在您的編輯器中設定 github.copilot.nextEditSuggestions.enabled 之外，您組織的系統管理員也必須選擇加入使用 Copilot「編輯器預覽功能」。

您可以深入了解 管理組織中 Copilot 的政策。

導覽並接受編輯建議

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

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

如果編輯建議在目前的編輯器檢視下方，箭頭將指向下方而不是右方：Copilot NES 箭頭方向變更

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

捕捉並更正錯誤

  • Copilot 協助處理簡單的錯誤，例如錯字。 它會建議修復遺漏或交換字母的地方，例如 cont x = 5 或 conts 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 NES，您必須設定 github.copilot.nextEditSuggestions.enabled。您也可以使用一些其他設定來設定您的 Copilot NES 體驗

  • editor.inlineSuggest.edits.codeShifting：如果您永遠不希望 Copilot NES 移動您的程式碼以顯示建議，您可以停用此設定。

  • editor.inlineSuggest.edits.renderSideBySide:

    • auto (預設)：如果視口中有足夠的空間，則並排顯示較大的建議，否則建議會顯示在相關程式碼下方。
    • never：一律在相關程式碼下方顯示較大的建議。

提示與訣竅

內容

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

啟用或停用程式碼完成

您可以暫時啟用或停用所有語言或僅針對特定語言的程式碼完成。

  1. VS Code 狀態列中的 GitHub Copilot 狀態圖示表示 GitHub Copilot 是否已啟用或停用。

    Screenshot showing the VS Code status bar, highlighting the Copilot icon that indicates Copilot is active.

  2. 若要啟用或停用 Copilot 完成功能，請先選取狀態列中的 GitHub Copilot 圖示。

  3. 如果您要停用 GitHub Copilot，系統會詢問您是否要全域停用建議，還是針對您目前正在編輯的檔案的語言停用建議。

    • 若要全域停用 GitHub Copilot 的建議，請選取全域停用。
    • 若要針對指定的語言停用 GitHub Copilot 的建議，請選取針對 <語言> 停用。

    Screenshot showing the VS Code command menu for Copilot, highlighting the options to disable completions.

設定

  • editor.inlineSuggest.enabled - 啟用或停用內嵌完成。

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

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

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

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

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

  • editor.inlineSuggest.edits.renderSideBySide - 設定 Copilot NES 是否可以在可能的情況下並排顯示較大的建議，或者 Copilot NES 是否應該一律在相關程式碼下方顯示較大的建議。

後續步驟

其他資源

您可以在 Copilot 以及如何在 VS Code 中使用它的 GitHub Copilot 文件中閱讀更多資訊。

或者查看 YouTube 上的 VS Code Copilot 系列，您可以在其中找到更多關於將 Copilot 與 Python、C#、Java、PowerShell、C++ 等等搭配使用的入門內容和程式設計特定影片。

02/06/2025