🚀 在 VS Code 中！

開始使用 VS Code 中的 Copilot Chat

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

如果您是 Copilot 的 VS Code 新手使用者，請參閱Copilot 概觀，或參閱Copilot 快速入門以設定並探索主要功能。

提示

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

先決條件

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

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

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

開始您的第一次聊天對話

Copilot Chat 可讓您使用自然語言與 GitHub Copilot 互動，以提出與程式碼相關的問題並接收答案。

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

  1. 開啟新的 VS Code 視窗。您將在後續步驟中建立新的工作區。

  2. 從標題列的 Copilot 功能表中選取 [開啟聊天]，或使用 ⌃⌘I (Windows、Linux Ctrl+Alt+I) 鍵盤快速鍵。

    Screenshot of VS Code editor, showing the Copilot Chat view, highlighting the chat menu in the Command Center.

    請注意，「聊天」檢視會在次要側邊欄中開啟。將「聊天」檢視放在側邊可讓您在處理程式碼時保持對話進行。

  3. 在「聊天」檢視中，從聊天模式下拉式選單中選取 [詢問]。

    使用詢問模式向 Copilot 詢問有關程式碼和技術主題的問題、解釋程式碼或集思廣益。

    Screenshot of VS Code Copilot Chat view, showing the Ask mode dropdown.

  4. 讓我們向 Copilot 詢問熱門的 Web 框架。在聊天輸入欄位中輸入「什麼是最熱門的 Web 框架？」。

    Copilot 會傳回熱門 Web 框架的清單。嘗試詢問後續問題，以取得有關特定框架的更多資訊，或比較框架。例如，您可以詢問「Express 和 Fastify 之間有什麼差異？」或「如何進行伺服器端轉譯？」。

  5. 若要建立新的 Web 應用程式骨架，請在聊天輸入欄位中輸入「具有 typescript 和 pug 的新 express 應用程式」。

    請注意，Copilot 會傳回代表新工作區檔案的檔案樹狀結構。選取檔案樹狀結構中的任何檔案以預覽其內容。

    Screenshot of VS Code Copilot Chat view, showing a file tree for a new workspace and a 'Create Workspace' button.

  6. 選取 [建立工作區] 以建立應用程式，並在磁碟上選取應建立工作區的資料夾。

    在對話方塊中選取 [開啟]，以在 VS Code 中開啟新建立的工作區。

    注意

    VS Code 可能會詢問您是否要信任新的工作區。選取 [是，我信任內容] 以信任工作區。取得有關工作區信任的更多詳細資訊。

透過內嵌聊天保持流程順暢

雖然「聊天」檢視非常適合保持對話進行，但編輯器內嵌聊天針對您想要向 Copilot 詢問有關您在編輯器中主動處理的程式碼的情況進行最佳化。例如，重構特定程式碼片段，或解釋複雜演算法。

讓我們看看如何使用編輯器內嵌聊天進行程式碼重構。

  1. 開啟 app.ts 檔案，並使用 ⌘I (Windows、Linux Ctrl+I) 鍵盤快速鍵來開啟編輯器內嵌聊天。或者，從標題列的 Copilot 功能表中選取 [編輯器內嵌聊天]。

    聊天輸入欄位會內嵌在編輯器中顯示，您可以在其中輸入聊天提示，並向 Copilot 詢問有關編輯器中程式碼的問題。

    Screenshot of VS Code editor, highlighting the Inline Chat popup control.

  2. 在聊天輸入欄位中輸入「新增 JSON 輸出支援」，然後按下 Enter。

    請注意，Copilot 會提供程式碼建議，以在 Express 中新增 JSON 輸出支援。

    Screenshot of VS Code editor with the suggested code change.

  3. 選取 [接受] 或 [關閉] 以套用或忽略變更。

    如果您對建議的程式碼變更不滿意，您可以選取 [重新執行要求] 控制項，或詢問後續問題以取得另一個建議。

提示

在編輯器中按一下滑鼠右鍵，然後選取 [Copilot] 內容功能表，以存取常用的 Copilot 命令，例如修正或說明程式碼或產生測試。

跨多個檔案進行編輯

透過內嵌聊天，您對單一檔案進行了變更。您也可以透過切換至「聊天」檢視中的編輯模式，使用 Copilot 跨工作區中的多個檔案進行變更。

讓我們使用編輯模式來使用 .env 檔案來儲存 Web 應用程式的組態。

  1. 開啟「聊天」檢視，然後從聊天模式下拉式選單中選取 [編輯]。

    Screenshot of VS Code Copilot Chat view, showing the Edit mode dropdown.

  2. 為了協助 Copilot 瞭解您的要求的範圍，讓我們將 package.json 和 app.ts 新增為提示的內容。

    1. 在「聊天」檢視中選取 [新增內容]，在搜尋欄位中輸入 package，然後從檔案清單中選取 package.json 檔案。請注意，您可以新增許多類型的內容。

    2. 在編輯器中開啟 app.ts 檔案，並注意 Copilot 會自動將作用中檔案新增至聊天內容。

  3. 在聊天輸入欄位中輸入「使用 .env 檔案進行組態」，然後按下 Enter。

  4. 請注意，Copilot 會跨多個檔案進行更新，並將新的 .env 檔案新增至您的工作區。

    「聊天」檢視會以粗體文字在「聊天」檢視中顯示已變更的檔案。

    Screenshot of VS Code editor, showing the suggested code change in the app.ts file.

  5. 在「聊天」檢視中選取 [保留] 以確認所有建議的變更。

    使用編輯器中的重疊控制項，輕鬆導覽和檢閱檔案中的個別變更。

開始代理人式編碼流程

對於更複雜的要求，您可以使用代理人模式，讓 Copilot 自主規劃和執行完成您的要求所需的任務。這些任務可能涉及編輯程式碼，但也包括在終端機中執行命令。在代理人模式中，Copilot 可能會叫用不同的工具來完成任務。

讓我們使用代理人模式，讓 Web 應用程式成為分享旅遊秘訣的應用程式，並新增測試。

  1. 開啟「聊天」檢視，然後從聊天模式下拉式選單中選取 [代理人]。

    Screenshot of VS Code Copilot Chat view, showing the Agent mode dropdown.

  2. 在聊天輸入欄位中輸入「讓應用程式成為旅遊部落格。新增測試以避免程式碼迴歸。」，然後按下 Enter。

    請注意，您不需要將內容新增至提示。代理人模式會自動分析工作區中的程式碼。

  3. Copilot 會重複執行以套用程式碼變更並執行命令，例如執行測試。選取「聊天」檢視中的 [繼續] 以確認終端機命令。

    Screenshot of VS Code editor, showing the Chat view asking to confirm running tests in the terminal.

    根據您要求的複雜程度，Copilot 可能需要幾分鐘才能完成所有任務。如果在此過程中遇到問題，它會重複執行以修正問題。

  4. Copilot 完成任務後，請檢閱變更並測試應用程式。

    您也可以要求 Copilot 執行應用程式，方法是提供提示，例如「執行應用程式」或「啟動伺服器」。

恭喜

恭喜，您已成功在 VS Code 中使用 Copilot Chat 來提出問題，並跨工作區進行程式碼編輯。繼續試驗不同的提示和聊天模式，以充分利用 Copilot Chat。

其他資源

04/03/2025