開始在 VS Code 中使用 GitHub Copilot

本教學課程將引導您了解 Visual Studio Code 中 GitHub Copilot 的主要功能。學習如何開始使用 GitHub Copilot 擴充功能，以在編輯器中取得 AI 驅動的程式碼建議、使用聊天對話來重構您的程式碼，以及使用智慧動作修正程式碼錯誤。

提示

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

雖然我們在本教學課程中使用 TypeScript，但請注意 Copilot 也接受過多種其他語言和各種框架的訓練。

先決條件

若要在 VS Code 中使用 GitHub Copilot，您需要具備下列項目

依照 GitHub Copilot 設定指南中的步驟，取得 GitHub Copilot 的存取權，並在 VS Code 中安裝 Copilot 擴充功能。

若要開始在 VS Code 中使用 GitHub Copilot，您不必進行任何特殊操作。當您在編輯器中輸入程式碼時，Copilot 會自動在編輯器中顯示程式碼建議，以協助您更有效率地編碼。

開啟 Visual Studio Code 並建立新的 JavaScript 檔案 calculator.js。
在 JavaScript 檔案中，開始輸入下列程式碼
```
class Calculator
```
Copilot 會自動以灰色暗淡文字 (虛影文字) 建議我們的 Calculator 類別的方法。在我們的範例中，建議了 add 和 subtract 方法。您收到的確切建議可能會有所不同。
若要接受建議，請按下 Tab 鍵。

恭喜！您剛剛接受了您的第一個 AI 驅動的內嵌建議。當您繼續輸入時，Copilot 會相應地更新內嵌建議。
對於任何給定的輸入，可能有多個建議。在類別內輸入下列程式碼以新增 factorial 方法
```
factorial(n) {
```
將滑鼠游標停留在編輯器中的建議上，並注意有多個建議。

您可以使用箭頭控制項或使用鍵盤快速鍵來顯示下一個 (⌥] (Windows、Linux Alt+])) 或上一個 (⌥[ (Windows、Linux Alt+[)) 建議。

AI 驅動的程式碼完成可以協助您產生樣板或重複程式碼，讓您保持在開發人員流程中，並專注於更複雜的編碼工作。

透過 Copilot 聊天，您可以開始與 VS Code 中的 Copilot 進行聊天對話，以使用自然語言詢問有關您程式碼的特定工作。

讓我們使用內嵌聊天來協助產生基本的 Express Web 伺服器。

首先，將新的 TypeScript 檔案 server.ts 新增至您的工作區。
現在，按下鍵盤上的 ⌘I (Windows、Linux Ctrl+I) 以啟動 Copilot 內嵌聊天。

Copilot 內嵌聊天為您提供聊天介面，讓您可以詢問有關作用中編輯器中程式碼的問題。
在聊天輸入欄位中輸入「新增一個簡單的 express web 伺服器」，然後按下 Enter 以將提示傳送給 Copilot。

請注意，Copilot 在編輯器中傳回串流回應。回應是簡單 Node.js Express Web 伺服器的實作。
選取接受或按下 ⌘Enter (Windows、Linux Ctrl+Enter) 以套用建議的程式碼變更。

恭喜！您已使用 Copilot 聊天透過聊天和自然語言產生程式碼。

您也可以使用內嵌聊天來重構或改進編輯器中的現有程式碼。

請注意，我們的 Web 伺服器目前正在使用靜態連接埠號碼 3000。讓我們將其變更為使用環境變數作為連接埠號碼。

在編輯器中，選取 server.ts 檔案中的 3000 連接埠號碼，然後按下 ⌘I (Windows、Linux Ctrl+I) 以啟動內嵌聊天。
在聊天輸入欄位中輸入「使用環境變數作為連接埠號碼」，然後按下 Enter 以傳送聊天請求或提示。

請注意 Copilot 如何更新現有程式碼以使用環境變數作為連接埠號碼。
選取接受或按下 ⌘Enter (Windows、Linux Ctrl+Enter) 以套用建議的程式碼變更。
如果您對建議的變更不滿意，您可以修改提示，並要求 Copilot 提供不同的解決方案。

例如，您可以要求 Copilot 為連接埠號碼使用不同的環境變數名稱。

當您在新的程式碼庫中工作，或探索新的程式設計語言時，您可能會遇到更一般的程式設計問題。Copilot 聊天可讓您在側邊開啟聊天對話，並追蹤您的問題記錄。

從命令中心 Copilot 功能表開啟「聊天」檢視，或按下 ⌃⌘I (Windows、Linux Ctrl+Alt+I)。

提示
您可以隨時從命令中心功能表存取不同的 Copilot 功能。
在聊天輸入欄位中輸入「什麼是遞迴？」，然後按下 Enter 以將請求傳送給 Copilot。

請注意，聊天回應包含豐富的結果，包括文字和程式碼區塊。聊天回應中的程式碼區塊支援 IntelliSense，讓您可以透過將滑鼠游標停留在方法和符號上方來取得相關資訊，或前往其定義。
依照 Copilot 聊天教學課程中的步驟，了解您也可以如何使用 Copilot 聊天來詢問有關您特定程式碼庫的問題。

較大的程式碼變更可能涉及編輯多個檔案。透過 Copilot 編輯，您可以在編輯器中取得 AI 驅動的建議，跨越工作區中的多個檔案。Copilot 編輯會跨工作區進行編輯，而不是套用個別的程式碼區塊。

讓我們使用 Copilot 編輯來傳回 Web 伺服器回應中 HTML 檔案的內容。

從命令中心 Copilot 功能表選取開啟 Copilot 編輯，或按下 ⇧⌘I (Windows Ctrl+Shift+I、Linux Ctrl+Shift+Alt+I)。
「Copilot 編輯」檢視隨即開啟。請注意，server.ts 檔案已新增至工作集。

工作集包含可由 Copilot 編輯修改的檔案。如果檔案未新增，請使用 *新增檔案... 將檔案新增至工作集。
在聊天輸入欄位中輸入傳回靜態 html 頁面作為首頁並實作它。，然後按下 Enter 以開始新的編輯工作階段。

請注意，Copilot 編輯會進行多項編輯：它會更新 server.ts 檔案以傳回靜態 HTML 頁面，並且還會新增一個新的檔案 index.html。
如果您對結果感到滿意，請選取接受以套用所有建議的變更。

您也可以使用編輯器覆疊控制項，在不同的已編輯檔案之間導覽，並接受/捨棄它們。

除了內嵌完成和聊天對話之外，GitHub Copilot 也可在 VS Code 中不同的位置和整個開發人員流程中使用。每當因為編譯器錯誤而出現紅色波浪線時，您可能會注意到編輯器中 Copilot 功能透過閃爍圖示呈現。

其中一個位置是編輯器中的 Copilot 程式碼動作，每當因為編譯器錯誤而出現紅色波浪線時。讓我們看看 Copilot 如何協助解決程式碼錯誤。

開啟您稍早在編輯器中建立的 server.ts TypeScript 檔案。

請注意，import express from 'express'; 陳述式包含紅色波浪線。如果您將游標放在紅色波浪線上，您可以看到 Copilot 閃爍圖示出現。
選取閃爍圖示以檢視 Copilot 程式碼動作，然後選取使用 Copilot 修正。
請注意，Copilot 內嵌聊天隨即出現，預先填入錯誤訊息和修正問題的解決方案。

您可以選擇性地直接從聊天回應中選取插入到終端機按鈕，將建議的命令複製到您的終端機中。