編輯

開始使用 VS Code 中的 Copilot Chat

本教學課程將引導您使用 Visual Studio Code 中的 GitHub Copilot Chat 擴充功能。您可以使用 AI 驅動的聊天對話來協助重構程式碼、增進您對程式碼的理解，以及找到設定 VS Code 的方法。

如果您是 VS Code 中 GitHub Copilot 的新手，請參閱 GitHub Copilot 概觀，或在 GitHub Copilot 入門教學課程中設定並探索主要功能。

提示

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

先決條件

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

GitHub Copilot 的存取權
已在 VS Code 中安裝 GitHub Copilot 擴充功能

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

開始您的第一次 Copilot 聊天對話

Copilot Chat 是一個聊天介面，可讓您與 GitHub Copilot 互動，以詢問和接收與程式碼相關問題的解答。聊天介面提供程式碼資訊和支援，而無需您瀏覽文件或在線上論壇中搜尋。

在本教學課程中，您將建立一個簡單的 Node.js Web 應用程式。

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

提示
您可以隨時從命令中心選單存取不同的 Copilot 功能。
在聊天輸入欄位中輸入@workspace /new express with typescript and pug，然後按下 Enter 以傳送請求。

請注意此聊天提示的結構是如何清晰簡潔地向 Copilot 提供指示。讓我們分解一下
- @workspace 是一個聊天參與者，他們是領域專家，可以執行任務或回答特定領域的問題。在此案例中，@workspace 了解 VS Code 工作區和您的程式碼庫。
- /new 是一個斜線命令，它告訴 @workspace 參與者您想要建立新的工作區。斜線命令是常用指示的簡寫。您可以在聊天輸入中輸入 / 符號以取得支援命令的清單。
Copilot 會傳回代表新工作區檔案的檔案樹狀結構，以及建立工作區的按鈕。

您可以選取檔案樹狀結構中的任何檔案來預覽內容，然後再實際建立它。如果您對產生的檔案不滿意，或想要不同的內容，您可以提出後續問題，例如 @workspace use ejs 以使用 EJS 而不是 Pug。
選取建立工作區以建立新的工作區，然後選取磁碟上應建立工作區的資料夾。

工作區建立完成後，VS Code 會重新載入新的工作區。

恭喜！您剛剛透過使用自然語言，使用 Copilot Chat 建立了一個工作區。這種方法的優點是您可以根據自己的喜好調整您的請求。也許您更喜歡將 Express.js 與 EJS 搭配使用，或者完全不使用 Express.js，而是使用純 Node.js 與 Bootstrap。選擇您最喜歡的！

使用聊天參與者

先前，您使用了 @workspace 聊天參與者來產生新的工作區，但您也可以使用它來詢問有關工作區中實際程式碼的問題。

讓我們迭代我們產生的 Express 應用程式，並向其新增一個新頁面。

在「聊天」檢視中，輸入@workspace 如何新增頁面？

Copilot 會傳回逐步說明，說明如何新增特定於您程式碼的新頁面。這是因為您在聊天提示中新增了 @workspace，它具有關於您特定工作區內容的內容資訊。如果您不包含 @workspace，您將獲得更通用的指示。
您可以選擇性地依照指示，將新頁面新增至您的應用程式。

提示
您可以新增更多關於您想要新增的頁面類型的詳細資訊，例如首頁、聯絡頁面或產品頁面。
還有更多您可以使用的聊天參與者，每個參與者都有其自己的領域特定專業知識。選取圖示，或在「聊天」檢視中輸入 @ 以取得可用的聊天參與者清單。

注意
擴充功能也可以貢獻聊天參與者，因此清單可能會因您在 VS Code 中安裝的擴充功能而異。
讓我們使用 @vscode 來詢問關於 VS Code 的問題。在聊天輸入欄位中輸入 @vscode 如何偵錯 node.js app。

您會獲得關於如何在 VS Code 中偵錯 Node.js 應用程式的指示，以及直接存取對應 VS Code 功能的按鈕。

透過內嵌聊天保持流程

雖然「聊天」檢視非常適合與 Copilot 保持對話，但在特定情況下，直接從編輯器存取聊天可能會更有效率。例如，當您檢閱程式碼變更、編寫單元測試或重構程式碼時。

讓我們看看如何使用聊天進行程式碼重構。

在編輯器中開啟 app.ts 檔案，並將游標放在設定連接埠號碼的行 (const port = 3000)。

對於更複雜的程式碼變更，您可以選取程式碼區塊，以向 Copilot 提供更多關於您想要變更的內容資訊。
按下鍵盤上的 ⌘I (Windows、Linux Ctrl+I) 以開啟 Copilot 內嵌聊天，或按一下滑鼠右鍵並選取Copilot > 在編輯器中開始。

Copilot 內嵌聊天讓您可以直接從編輯器向 Copilot 提問。

現在讓我們要求 Copilot 重構程式碼，使連接埠號碼可設定。
在聊天輸入欄位中輸入make configurable，然後按下 Enter。

請注意 Copilot 如何更新選取的程式碼，並建議從環境變數讀取連接埠號碼。

您可以透過選取更多動作 > 切換變更來檢視套用的變更。
選取接受或捨棄以套用或忽略變更。

如果您對建議的程式碼變更不滿意，您可以選取重新執行請求按鈕以取得另一個建議。

提示
使用豎起大拇指和倒豎拇指按鈕，向 Copilot 提供關於建議的回饋。

恭喜您在編輯器中使用 Copilot 內嵌聊天來協助您進行程式碼重構！

使用智慧動作

在某些常見情境中，您可能會直接叫用 Copilot，而無需輸入聊天提示。例如，Copilot 可以協助新增程式碼文件、產生單元測試，或協助您修正程式碼錯誤。

讓我們看看如何使用智慧動作來修正程式碼錯誤。

開啟 app.ts 檔案，並選取其中一個帶有紅色波浪線的符號。
選取閃爍圖示以檢視 Copilot 程式碼動作，然後選取使用 Copilot 修正。
Copilot 內嵌聊天會彈出，預先填入錯誤訊息，以及解決問題的建議。

請注意 Copilot 如何使用 /fix 斜線命令，後接錯誤訊息。您也可以直接在聊天輸入欄位中使用 /fix 命令，以取得修正程式碼錯誤的協助。

除了修正之外，Copilot 還提供更多智慧程式碼動作，例如說明 (/explain)、產生文件 (/doc) 和產生測試 (/tests)。您可以透過編輯器內容選單存取這些動作，然後選取 Copilot。

如果您遇到一些不明確的程式碼區塊，只需選取它並使用 /explain，即可讓 Copilot 為您提供說明，並協助您增進對程式碼的理解。

新增聊天內容

先前，您使用了 @workspace 來詢問關於您工作區的問題。如果您想要詢問 Copilot 關於特定內容的問題，也許是特定檔案或程式碼中的符號？您如何在不必在自然語言中廣泛描述所有內容的情況下，向 Copilot 提供該內容資訊？

讓我們詢問 Copilot 關於工作區中特定檔案的用途。

從命令中心聊天選單開啟「聊天」檢視，或按下 ⌃⌘I (Windows、Linux Ctrl+Alt+I)。
選取聊天輸入欄位旁邊的附加內容按鈕，以開啟內容快速選取。

在內容快速選取中，您可以選取不同類型的內容資訊以新增至您的聊天提示，例如工作區中的檔案、符號、目前選取範圍等等。
開始輸入 index.ts 以尋找對應的檔案，然後選取 src\types\index.ts 檔案。

在您選取檔案後，請注意檔案已新增至「聊天」檢視中。您可以選擇性地將更多檔案或其他內容類型新增至您的聊天提示。
現在在聊天輸入欄位中輸入以下提示：@workspace 這是做什麼用的。然後，按下 Enter 以傳送請求。

Copilot 現在會傳回關於所選檔案中程式碼用途的說明。
除了使用附加內容控制項之外，您也可以直接在聊天輸入欄位中輸入 # 來參考不同類型的內容資訊。

提示
新增 #codebase 以將您的整個工作區作為內容資訊新增至您的聊天提示。如果您想要詢問與專案不同區域相關的問題，這可能會很有用。
若要快速將檔案附加為聊天提示的內容資訊，請將檔案從「檔案總管」檢視拖放到「聊天」檢視中。如果檔案在編輯器中開啟，您也可以將編輯器索引標籤拖放到「聊天」檢視中以附加檔案。

恭喜

恭喜，您已成功使用 GitHub Copilot Chat 擴充功能進行 AI 驅動的對話，以協助重構您的程式碼、修正問題或增進您對程式碼的理解。

其他資源

取得 VS Code 中的 Copilot Chat 概觀
透過提示詞撰寫和內容設定最佳化您的 Copilot 體驗

02/06/2025