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 應用程式。
-
開啟一個新的 VS Code 視窗。您將在後續步驟中建立一個新的工作區。
-
從標題欄的“聊天”選單中選擇開啟聊天,或使用鍵盤快捷鍵 ⌃⌘I (Windows, Linux Ctrl+Alt+I)。
請注意,聊天檢視在輔助側邊欄中開啟。將聊天檢視放在側邊欄可以讓您在編寫程式碼時保持對話的進行。
-
在聊天檢視中,從聊天模式下拉選單中選擇提問。
使用提問模式可以提出有關編碼和技術主題的問題、解釋程式碼或集思廣益。
-
我們來問問流行的 Web 框架。在聊天輸入欄位中輸入“最流行的 Web 框架有哪些?”。
VS Code 返回一個流行 Web 框架列表。嘗試提出後續問題以獲取有關特定框架的更多資訊,或比較框架。例如,您可以問“Express 和 Fastify 有什麼區別?”或“如何進行伺服器端渲染?”。
-
要搭建一個新的 Web 應用程式,請在聊天輸入欄位中輸入“使用 TypeScript 和 Pug 建立新的 Express 應用程式”。
請注意 VS Code 如何返回一個代表新工作區檔案的檔案樹。選擇檔案樹中的任何檔案以預覽其內容。
-
選擇建立工作區以建立應用程式,並選擇磁碟上的一個資料夾作為工作區的建立位置。
在對話方塊中選擇開啟,以在 VS Code 中開啟新建立的工作區。
注意VS Code 可能會詢問您是否信任新的工作區。選擇是,我信任內容以信任工作區。獲取有關工作區信任的更多詳細資訊。
透過行內聊天保持高效工作
雖然聊天檢視非常適合保持對話,但編輯器行內聊天則針對您想要向 Copilot 提問您正在編輯器中積極處理的程式碼的情況進行了最佳化。例如,重構特定程式碼片段,或解釋複雜演算法。
我們來看看如何使用編輯器行內聊天進行程式碼重構。
-
開啟
app.ts
檔案,並使用鍵盤快捷鍵 ⌘I (Windows, Linux Ctrl+I) 調出行內聊天。或者,從標題欄的“聊天”選單中選擇開啟行內聊天。編輯器中會顯示一個行內聊天輸入欄位,您可以在其中輸入聊天提示並向 Copilot 提問編輯器中的程式碼。
-
在聊天輸入欄位中輸入“新增 JSON 輸出支援”並按 Enter。
請注意 Copilot 如何提供程式碼建議,以在 Express 中新增 JSON 輸出支援。
-
選擇接受或關閉以應用或忽略更改。
如果您對建議的程式碼更改不滿意,可以選擇重新執行請求控制元件或提出後續問題以獲得其他建議。
在編輯器中右鍵單擊以訪問常用的 AI 命令,例如修復或解釋程式碼或生成測試。
跨多個檔案進行編輯
使用行內聊天,您只能對單個檔案進行更改。您還可以透過在聊天檢視中切換到編輯模式,使用 Copilot 對工作區中的多個檔案進行更改。
我們使用編輯模式來使用.env
檔案儲存您的 Web 應用程式的配置。
-
開啟聊天檢視,從聊天模式下拉選單中選擇編輯。
-
為了幫助 Copilot 理解您請求的範圍,我們將
package.json
和app.ts
作為上下文新增到提示中。-
在聊天檢視中選擇新增上下文,在搜尋欄位中輸入
package
,然後從檔案列表中選擇package.json
檔案。請注意,您可以新增多種型別的上下文。 -
在編輯器中開啟
app.ts
檔案,請注意 Copilot 會自動將活動檔案新增到聊天上下文中。
-
-
在聊天輸入欄位中輸入“使用 .env 檔案進行配置”並按 Enter。
-
請注意 Copilot 如何跨多個檔案進行更新,並向您的工作區新增一個新的
.env
檔案。聊天檢視中以粗體文字顯示了已更改的檔案。
-
在聊天檢視中選擇保留以確認所有建議的更改。
使用編輯器中的覆蓋控制元件,可以輕鬆導航和檢視檔案中各個更改。
開始一個代理編碼流程
對於更復雜的請求,您可以使用代理模式讓 Copilot 自主規劃並執行完成請求所需的任務。這些任務可能涉及編輯程式碼,但也包括在終端中執行命令。在代理模式下,Copilot 可能會呼叫不同的工具來完成任務。
我們使用代理模式將 Web 應用程式改為分享旅行小貼士,並新增測試。
-
開啟聊天檢視,從聊天模式下拉選單中選擇代理。
-
在聊天輸入欄位中輸入“將應用程式改為旅行部落格。新增測試以避免程式碼迴歸。”並按 Enter。
請注意,您無需向提示新增上下文。代理模式會自動分析工作區中的程式碼。
-
Copilot 迭代應用程式碼更改並執行測試等命令。在聊天檢視中選擇繼續以確認終端命令。
根據您請求的複雜性,Copilot 可能需要幾分鐘才能完成所有任務。如果在此過程中遇到問題,它會迭代修復它們。
-
一旦 Copilot 完成任務,請審查更改並測試應用程式。
您還可以透過提示 Copilot 執行應用程式,例如“執行應用程式”或“啟動伺服器”。
恭喜
恭喜,您已成功在 VS Code 中使用 Copilot 聊天功能提出問題並對工作區中的程式碼進行編輯。繼續嘗試不同的提示和聊天模式,以充分利用 Copilot 聊天功能。