現已釋出!閱讀關於 11 月新增功能和修復的內容。

在 VS Code 中開始使用聊天功能

本教程將指導您在 Visual Studio Code 中使用聊天功能。您將使用 AI 驅動的聊天對話來幫助重構程式碼、提高對程式碼的理解以及配置 VS Code。

如果您是 VS Code 中 Copilot 的新使用者,請參閱Copilot 概述,或者在Copilot 快速入門中進行設定並瞭解主要功能。

提示

如果你還沒有 Copilot 訂閱,可以透過註冊 Copilot 免費計劃 免費使用 Copilot,並獲得每月限量的補全和聊天互動次數。

先決條件

要在 VS Code 中使用 GitHub Copilot,您需要具備以下條件:

  • 訪問 GitHub Copilot
  • 在 VS Code 中安裝 GitHub Copilot 擴充套件

按照GitHub Copilot 設定指南中的步驟獲取 GitHub Copilot 訪問許可權並在 VS Code 中安裝 Copilot 擴充套件。

進行首次聊天對話

聊天功能允許您使用自然語言與 GitHub Copilot 互動,以提問並接收與編碼相關問題的答案。

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

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

  2. 從標題欄中的“聊天”選單中選擇開啟聊天,或者使用⌃⌘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. 在“聊天”檢視中,從聊天模式下拉選單中選擇提問

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

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

  4. 讓我們來詢問流行的 Web 框架。在聊天輸入欄位中輸入“最流行的 Web 框架有哪些?”。

    VS Code 會返回一個流行 Web 框架列表。嘗試提出後續問題以獲取有關特定框架的更多資訊,或比較框架。例如,您可以問“Express 和 Fastify 之間有什麼區別?”或“如何進行伺服器端渲染?”。

  5. 要搭建一個新的 Web 應用,請在聊天輸入欄位中輸入“使用 typescript 和 pug 建立一個新的 express 應用”。

    請注意 VS Code 如何返回代表新工作區檔案的檔案樹。選擇檔案樹中的任何檔案以預覽其內容。

    Screenshot of 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 詢問編輯器中的程式碼。

    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. 選擇接受關閉以應用或忽略更改。

    如果您對建議的程式碼更改不滿意,可以選擇重新執行請求控制元件或提出後續問題以獲取另一個建議。

提示

在編輯器中右鍵單擊以訪問常用 AI 命令,例如修復或解釋程式碼或生成測試。

在多個檔案之間進行編輯

使用內聯聊天,您對單個檔案進行了更改。您也可以透過切換到“聊天”檢視中的編輯模式,使用 Copilot 在工作區中的多個檔案之間進行更改。

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

  1. 開啟“聊天”檢視,從聊天模式下拉選單中選擇編輯

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

  2. 為了幫助 Copilot 理解您的請求範圍,讓我們將 package.jsonapp.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。

其他資源

© . This site is unofficial and not affiliated with Microsoft.