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

在 VS Code 中使用聊天功能

在 Visual Studio Code 中使用聊天功能,透過自然語言來詢問有關您的程式碼庫的問題或在整個專案中進行編輯。聊天功能可以在不同模式下執行,針對您的用例進行最佳化,從提問到進行多檔案編輯或啟動自主編碼工作流。

為何在 VS Code 中使用聊天功能?

聊天功能使您能夠與 AI 進行持續的對話。您可以提出後續問題並迭代您的請求。以下是您可以在 VS Code 中使用聊天功能的一些示例:

  • 搭建新應用 - “建立一個使用 TypeScript 和 Tailwind CSS 的新 React 應用”
  • 新增功能 - “新增一個登入頁面,並根據 #styles.css 對其進行樣式設定”
  • 理解您的程式碼 - “解釋這個身份驗證中介軟體是如何工作的”
  • 除錯問題 - “為什麼我在此迴圈中遇到了空引用?”
  • 最佳化效能 - “幫我提高這個資料庫查詢的效率”
  • 生成測試 - “為 calculateTotal 函式建立單元測試”

先決條件

  • 您的計算機上已安裝 VS Code。請從 Visual Studio Code 網站下載。

  • 擁有 GitHub Copilot 的訪問許可權。請按照在 VS Code 中設定 GitHub Copilot的步驟操作。

    提示

    如果您沒有 Copilot 訂閱,可以直接在 VS Code 內註冊免費使用 Copilot,並獲得每月限量的程式碼補全和聊天互動次數。

在 VS Code 中訪問聊天功能

您可以在 VS Code 中以不同方式使用自然語言聊天,每種方式都針對特定的用例和任務進行了最佳化。

體驗 用例 使用者體驗
聊天檢視
⌃⌘I (Windows、Linux 為 Ctrl+Alt+I)
在側邊欄的專用檢視中進行持續、多輪的聊天對話。在不同的聊天模式之間切換,以提出問題、跨檔案進行程式碼編輯或啟動自主編碼工作流。 Screenshot of the Chat view
行內聊天
⌘I (Windows、Linux 為 Ctrl+I)
直接從編輯器(編輯器行內聊天)或整合終端(終端行內聊天)開始聊天對話,以在原地獲得建議。 Screenshot of the Inline chat
快速聊天
⇧⌥⌘L (Windows、Linux 為 Ctrl+Shift+Alt+L)
快速提問,然後回到您正在做的事情中。 Screenshot of the Quick Chat

透過使用相應的鍵盤快捷鍵或 VS Code 標題欄中的“聊天”選單來訪問每種聊天體驗。

Screenshot of the Copilot Chat menu in the VS Code Command Center

選擇一種聊天模式

聊天模式是預定義的配置或角色,用於為特定任務(如規劃、提問或執行自主編碼任務)定製 VS Code 中的聊天功能。

要切換聊天模式,請開啟聊天檢視(⌃⌘I (Windows、Linux 為 Ctrl+Alt+I)),然後從聊天模式下拉列表中選擇所需的模式。

Screenshot showing the Chat view, highlighting the chat mode dropdown list.

VS Code 自帶三種內建聊天模式:詢問 (Ask)編輯 (Edit)代理 (Agent)。您可以為特定場景定義自己的聊天模式,例如規劃新功能或研究實現方案。瞭解更多關於VS Code 中的聊天模式的資訊。

更改語言模型

VS Code 提供了多種內建語言模型供選擇。一些模型針對快速編碼任務進行了最佳化,而另一些則更適合較慢的規劃和推理任務。使用聊天輸入欄位中的模型選擇器來更改 Copilot 用於生成響應的模型。

Screenshot of the chat model picker in the Chat view, showing a dropdown list of available models.

您還可以新增來自其他模型提供商的模型並在聊天中使用它們。獲取有關如何使用其他提供商的模型的更多詳細資訊。

注意

可用模型的列表可能會根據您的 Copilot 訂閱而有所不同,並且可能會隨時間變化。有關可用語言模型的更多資訊,請參閱 GitHub Copilot 文件。

提交聊天提示

在聊天輸入欄位中輸入自然語言提示,以在 VS Code 中發出聊天請求。根據您選擇的聊天模式,您的提示將得到相應的處理。例如,在詢問模式下,響應

聊天響應可能包含富內容的組合,例如 Markdown 文字、程式碼塊、按鈕、檔案樹等。

Screenshot of the Chat view in the Secondary Side Bar showing the response to 'explain recursion'.

要獲得更相關的響應或引用工作區中的特定檔案或產物(例如測試失敗或終端輸出),請透過 #-提及相關上下文項來向您的聊天提示新增上下文

提示

透過 chat.math.enabled 設定(預覽版)啟用在聊天響應中渲染數學方程式。

新增聊天上下文

VS Code 會嘗試根據您的自然語言提示來確定聊天請求的意圖和範圍。為了幫助獲得更相關的響應,請在您的聊天提示中提供額外的上下文,例如檔案、測試結果、終端輸出等。

使用聊天檢視中的 新增上下文 按鈕或輸入 #-提及來為您的聊天提示新增上下文。例如,輸入 #codebase 來執行完整的程式碼庫搜尋,或輸入 #<檔案|資料夾|符號> 來引用工作區中的特定檔案、資料夾或符號。在聊天輸入欄位中輸入 # 以檢視上下文項列表。

Screenshot of the Chat view with the context menu open.

如果您安裝了提供工具的 MCP 伺服器或擴充套件,您也可以透過在聊天提示中 #-提及這些工具來直接引用它們。例如:

  • summarize #fetch code.visualstudio.com/updates:使用 fetch 內建工具檢索網頁內容
  • what is terminal suggest #githubRepo microsoft/code:使用 githubRepo 內建工具在 GitHub 倉庫中執行程式碼搜尋。

您還可以透過輸入 # 後跟工具名稱來直接在提示中引用代理模式工具。您可以在所有聊天模式(詢問、編輯和代理模式)中執行此操作。例如,使用 #fetch 工具將網頁內容新增為聊天提示的上下文,或使用 #githubRepo 在 GitHub 倉庫中執行程式碼搜尋。

獲取有關向聊天提示新增上下文的更多詳細資訊。

提示示例

詢問一般技術主題
  • “什麼是連結串列?”
  • “排名前 10 的熱門 web 框架”
理解程式碼庫
  • “解釋一下 #codebase 中的身份驗證是如何工作的”
  • “資料庫連線字串在哪裡配置的? #codebase”
  • “如何構建這個 #codebase?”
  • “#getUser 在哪裡被使用了? #usages”
為您的應用新增新功能
  • “建立一個關於頁面並將其包含在導航欄中 #codebase”
  • “為更新地址資訊新增一個新的 API 路由 #codebase”
  • “新增一個登入按鈕並根據 #styles.css 設定其樣式”
修復工作區中的問題
  • “修復 #problems 中的問題”
  • “修復失敗的測試 #testFailure”
引用網路內容
  • “如何在 React 18 中使用 'useState' 鉤子? #fetch https://18.react.dev/reference/react/useState#usage”
  • “構建一個 API 端點來獲取地址資訊,使用來自 #githubRepo contoso/api-templates 的模板”

有關更多提示示例,請參閱 GitHub 文件中的 Copilot 聊天手冊

提示

在聊天輸入欄位中輸入 /help 以獲取有關 Copilot 以及如何與聊天進行互動的幫助。

視覺

聊天支援視覺功能,這意味著您可以將影像作為上下文附加到聊天提示中,並就其提問。例如,附加一段程式碼的螢幕截圖並要求解釋它,或者附加一個 UI 草圖並要求代理模式實現它。

提示

您可以將影像從 Web 瀏覽器拖放到聊天檢視中,以將其新增為上下文。

聊天曆史記錄

當您在聊天會話中迭代併發送多個聊天提示時,VS Code 會使用聊天提示和響應的歷史記錄作為當前聊天提示的上下文。這意味著您可以提出後續問題或澄清您之前的問題,而無需重複上下文。例如,您可以問“這個和...有什麼不同?”,“現在新增一個測試用例”,“更詳細地解釋一下”等等。

您可以隨時使用聊天檢視中的新建聊天 (+) 按鈕 (⌘N (Windows、Linux 為 Ctrl+N)) 建立一個新的聊天會話。如果您想切換到不同的話題並避免之前的上下文和歷史記錄,這會很有用。

要檢視聊天會話的歷史記錄,請選擇聊天檢視中的顯示聊天... 按鈕,或透過命令面板中的聊天: 顯示聊天... 命令。選擇一個歷史記錄條目以在聊天檢視中開啟該聊天會話並繼續對話。

Screenshot of the Chat view with the Show Chats... button highlighted

您可以使用命令面板中的聊天: 匯出聊天... 命令將聊天會話的所有提示和響應匯出為 JSON 檔案。要以 Markdown 格式將特定的聊天提示或響應複製到剪貼簿,請右鍵單擊訊息並選擇複製。要複製整個聊天會話,請右鍵單擊聊天檢視並選擇全部複製

編輯上一個聊天請求

注意

編輯聊天請求的功能自 VS Code 1.102 版本起可用。

您可以在當前聊天會話中編輯之前的聊天請求。這在您想要最佳化提示或糾正錯誤時非常有用。編輯聊天請求相當於撤銷該請求,然後用編輯後的提示提交一個新的請求。

當您編輯之前的聊天請求時,會執行以下步驟:

  1. 編輯後的請求以及所有後續的請求和響應都將從對話歷史中移除。
  2. 由這些請求所做的任何編輯都將被恢復到請求發出之前的狀態。
  3. 編輯後的請求被新增到對話歷史中,並提交給語言模型以獲得新的響應。

您可以使用 chat.editRequests 設定來配置編輯之前聊天請求的方式:

  • inline:在聊天檢視中選擇請求,使其可進行原地編輯。使用 Escape 退出編輯模式。
  • hover:將滑鼠懸停在聊天請求上,然後選擇編輯圖示(鉛筆)以使其可進行原地編輯。使用 Escape 退出編輯模式。
  • input:將滑鼠懸停在聊天請求上,然後選擇編輯圖示(鉛筆)以在聊天輸入欄位中編輯請求。
  • none:停用在聊天檢視中編輯聊天請求。

使用檢查點恢復聊天請求

注意

檢查點功能自 VS Code 1.103 版本起可用。

聊天檢查點提供了一種將工作區狀態恢復到先前時間點的方法,當聊天互動導致多個檔案發生更改時尤其有用。

當啟用檢查點時,VS Code 會在聊天互動的關鍵點自動建立檔案的快照,這樣如果聊天請求所做的更改不符合您的預期,或者您想嘗試不同的方法,您可以返回到一個已知的良好狀態。

要啟用檢查點,請配置 chat.checkpoints.enabled 設定。

恢復檢查點

當您恢復一個檢查點時,VS Code 會將工作區恢復到該檢查點時的狀態。這意味著在該檢查點之後對檔案所做的所有更改都將被撤銷。

要將您的工作區恢復到之前的檢查點:

  1. 在聊天檢視中,導航到聊天會話中之前的聊天請求。

  2. 將滑鼠懸停在聊天請求上,然後選擇恢復檢查點

    Screenshot of the Chat view, showing the Restore Checkpoint action in the Chat view.

  3. 確認您要恢復檢查點並撤銷該時間點之後所做的任何檔案更改。

    請注意,聊天請求已從對話歷史中移除,並且工作區檔案已恢復到檢查點時的狀態。

恢復後重做

恢復到之前的檢查點後,您可以重做被撤銷的更改。如果您不小心恢復到了某個檢查點,這可能會很有用。

要在恢復檢查點後重做更改,請在聊天檢視中選擇重做

Screenshot of the Chat view, showing the Redo button to redo the changes after restoring a checkpoint to a previous state.

檢視檢查點中的檔案更改

為了幫助您瞭解每個聊天請求的影響,並更容易決定要恢復到哪個檢查點,請啟用 chat.checkpoints.showFileChanges 設定。這會顯示在每個聊天請求結束時被修改的檔案列表,以及每個檔案中新增和刪除的行數。

Screenshot of the Chat view, showing the file changes at the end of a chat request.

在編輯器選項卡或單獨的視窗中開啟聊天

您可以將聊天會話作為單獨的編輯器選項卡開啟,甚至可以作為單獨的浮動視窗開啟。此功能使您可以同時開啟多個聊天會話。

在聊天檢視中,選擇右上角的 ... 圖示,然後選擇在編輯器中開啟聊天在新視窗中開啟聊天。以下螢幕截圖顯示了在浮動視窗中執行的聊天檢視:

Screenshot of the Chat view, highlighting the three-dot menu that contains the Open in Editor and Open in New Window options. The desktop shows a floating window with a chat session.

預設情況下,聊天會話以緊湊模式開啟,該模式會隱藏標題欄和其他 UI 元素。選擇浮動視窗標題欄中的緊湊模式圖示,可以在緊湊模式和普通模式之間切換。

或者,啟用始終置頂模式,以始終將聊天檢視保持在其他視窗之上。

瞭解更多關於 VS Code 中的浮動視窗

使用語音互動

藉助 VS Code 中的語音控制功能(由 VS Code Speech 擴充套件提供),您可以使用語音發起聊天對話:

  • 使用您的聲音來口述您的聊天提示
  • 使用“Hey Code”語音命令與 Copilot Chat 開始語音會話
  • 使用“按住說話”模式加速聊天的語音輸入

瞭解更多關於如何在 VS Code 中使用語音互動的資訊。

聊天除錯檢視

聊天除錯檢視是一個專用檢視,您可以在其中檢視 AI 請求和響應的詳細資訊。對於每個聊天請求,您可以看到系統提示、使用者提示以及傳送給語言模型的上下文的詳細資訊。您可以檢視語言模型的詳細響應,以及作為聊天請求一部分被呼叫的工具的響應。

要開啟聊天除錯檢視,請從命令面板(⇧⌘P (Windows、Linux 為 Ctrl+Shift+P))執行開發者: 顯示聊天除錯檢視命令。

Screenshot of the Chat Debug view, showing the details of a chat request and response.

從命令列啟動聊天

您可以使用 VS Code CLI 中的 chat 子命令直接從命令列啟動聊天會話。這使您可以在當前工作目錄中開啟一個聊天會話,並附帶您提供的提示。

例如,以下命令為當前目錄開啟聊天並詢問“查詢並修復所有未指定型別的變數”

code chat Find and fix all untyped variables

chat 子命令具有以下命令列選項:

  • -m, --mode <模式>:用於聊天會話的聊天模式。可用選項:askeditagent 或自定義模式的識別符號。預設為 agent
  • -a, --add-file <路徑>:將檔案作為上下文新增到聊天會話中。
  • --maximize:最大化聊天會話檢視。
  • -r, --reuse-window:使用最後一個活動視窗進行聊天會話。
  • -n, --new-window:為聊天會話開啟一個空視窗。

chat 子命令還支援透過在命令末尾傳遞 - 來從 stdin 管道輸入。例如:

python app.py | code chat why does it fail -

隱私與透明度

為了給私有倉庫啟用更多的工作區搜尋功能,我們需要額外的許可權。如果我們檢測到尚未擁有這些許可權,我們將在啟動時請求它們。一旦授予,我們將為將來安全地儲存會話。

Modal window asking for additional authentication for a private repository.

GitHub Copilot 信任中心瞭解更多關於安全性、隱私和透明度的資訊。

常見問題

如何防止聊天檢視自動開啟?

預設情況下,聊天檢視在輔助側邊欄中開啟。當您為某個工作區關閉聊天檢視時,VS Code 會記住此設定,並且在下次開啟該工作區時不會自動開啟聊天檢視。

您可以直接從聊天檢視更改預設可見性:

  1. 開啟聊天檢視(⌃⌘I (Windows、Linux 為 Ctrl+Alt+I))。
  2. 選擇聊天檢視右上角的 ... 圖示。
  3. 選擇預設顯示檢視以啟用或停用聊天檢視的自動開啟。

您還可以使用 workbench.secondarySideBar.defaultVisibility 設定來控制輔助側邊欄的預設可見性。將其設定為 hidden 以防止聊天檢視自動開啟。

如何在不同的聊天模式之間進行選擇?

不同的聊天模式針對不同的用例進行了最佳化:

  • 使用編輯器行內聊天直接在活動編輯器中提問或進行編輯。這對於進行程式碼更改或提出僅限於活動檔案範圍的問題非常有用。

  • 使用詢問模式來詢問有關您的程式碼庫或技術概念的問題。響應可能包含程式碼建議,您可以手動、逐個地應用到您的程式碼庫中。更改不會自動應用於您的程式碼庫。

  • 使用編輯模式根據您的聊天提示直接在程式碼庫的多個檔案中應用編輯。您為您的提示提供相關的上下文和檔案。

  • 使用代理模式來啟動一個自主編碼工作流,AI 會自主確定相關的上下文和檔案,並決定需要執行哪些任務來完成請求。然後它會獨立迭代以實現期望的結果,並在出現問題時進行修復。代理模式可以呼叫擴充套件或 MCP 伺服器中的工具來執行專門的任務,例如執行終端命令、驗證測試用例或訪問 API。

其他資源

您可以在 GitHub Copilot 文件中閱讀更多關於 GitHub Copilot 以及如何在 VS Code 中使用它的資訊。

或者檢視 YouTube 上的 VS Code Copilot 系列影片,您可以在其中找到更多入門內容和針對特定程式語言(如 PythonC#JavaPowerShellC++ 等)使用 Copilot 的影片。

後續步驟