參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

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 聊天功能提出問題並對工作區中的程式碼進行編輯。繼續嘗試不同的提示和聊天模式,以充分利用 Copilot 聊天功能。

其他資源