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

在 VS Code 中使用編輯模式

藉助 Visual Studio Code 中的聊天編輯模式,您可以使用自然語言在專案中的多個檔案之間進行編輯。這些編輯會直接應用在編輯器中,您可以在有完整上下文程式碼的環境下,原地審查這些更改。

透過選擇特定檔案並提供清晰的上下文,您可以引導編輯模式進行有針對性的程式碼更改和改進。

先決條件

為什麼要使用編輯模式?

編輯模式專為在專案中跨多個檔案進行程式碼編輯而最佳化。VS Code 將程式碼更改直接應用到編輯器中,您可以在原地進行審查。您可以使用編輯模式來:

  • 重構程式碼庫的部分內容,例如“使用 async/await 重構此程式碼”或“為資料庫連線使用單例模式”。
  • 為您的程式碼庫新增新功能,例如“嚮應用新增一個登入表單”。
  • 修復程式碼庫中的錯誤,例如“當輸入為空時,排序函式會失敗,請修復它”。
  • 為您的程式碼編寫單元測試,例如“使用 vitest 為計算器類新增單元測試”。
  • 提高程式碼的效能,例如“最佳化計算函式,使其更高效”。

當您對要進行的更改以及要編輯的檔案有清晰的瞭解時,編輯模式對於編碼任務特別有用。如果您有一個定義不太明確的任務、一個高級別的需求,或者更改還需要執行終端命令和工具,您可能需要改用代理模式

使用編輯模式

在編輯模式下,您可以選擇要編輯的檔案,並提供相關的上下文和提示。VS Code 將根據您的提示建議程式碼編輯。

  1. 開啟聊天檢視 (⌃⌘I (Windows、Linux 為 Ctrl+Alt+I)) 並從聊天模式選擇器中選擇編輯

    Screenshot showing the Chat view, highlighting edit mode selected.

    直接在 VS Code 穩定版Insiders 版中開啟編輯模式。

  2. 選擇新增上下文或使用 #-提及特定的工作區檔案或上下文項,為您的提示提供額外的上下文。

    透過新增上下文,您可以獲得更相關的響應。例如,要提出特定於您當前專案的問題,您可以使用 #codebase 上下文項。在聊天輸入欄位中鍵入 # 以檢視可用的上下文項列表。

    活動編輯器會自動新增為上下文。當您新增檔案時,可能會建議其他相關檔案。

  3. 在聊天輸入欄位中輸入您的提示,以說明您想要進行的編輯型別。

    嘗試以下示例問題以開始使用:

    • 重構計算函式,使其更高效。
    • 嚮應用新增一個登入表單。使用 OAuth 進行身份驗證。
    • 為計算器類新增單元測試。使用 vitest 作為測試框架。
  4. 請注意,VS Code 會將建議的編輯直接流式傳輸到編輯器中。

    聊天檢視會以粗體文字顯示被編輯的檔案列表。編輯器浮層控制元件使您能夠在建議的編輯之間導航。

    Screenshot that shows the Chat view, highlighting the changed files list and the indicator in the Explorer view and editor tabs.

    注意

    AI 生成的程式碼編輯僅限於您當前工作區中的檔案。

  5. 審查建議的編輯,並接受或放棄建議的編輯

  6. 繼續迭代程式碼更改,以完善編輯或實現其他功能。

接受或放棄編輯

VS Code 會在聊天檢視的已更改檔案列表中列出被編輯的檔案。有待處理編輯的檔案在資源管理器檢視和編輯器選項卡中也會有指示符。

Screenshot that shows the Chat view, highlighting the changed files list and the indicator in the Explorer view and editor tabs.

透過編輯器浮層控制元件,您可以使用向上向下控制元件在建議的編輯之間導航。使用保留撤銷按鈕來接受或拒絕給定檔案的編輯。

Screenshot showing the Editor with proposed changes, highlighting the review controls in the editor overlay controls.

如果您在原始碼管理檢視中暫存更改,任何待處理的編輯都會被自動接受。另一方面,如果您放棄更改,任何待處理的編輯也會被放棄。

當您關閉 VS Code 時,待處理編輯的狀態會被記住,並在您重新開啟 VS Code 時恢復。

要在一個特定的延遲後自動接受所有建議的編輯,請配置 chat.editing.autoAccept 設定。透過將滑鼠懸停在編輯器浮層控制元件上,您可以取消自動接受的倒計時。如果您自動接受所有編輯,建議在提交到原始碼管理之前仍然審查這些更改。

管理檔案編輯批准

您可以使用 chat.tools.edits.autoApprove 設定來管理 AI 可以在未經使用者明確批准的情況下編輯哪些檔案。此設定可以幫助防止對包含敏感資訊的檔案(如工作區配置設定或環境設定)進行無意編輯。

chat.tools.edits.autoApprove 設定接受 glob 模式與布林值的配對,用於指示哪些檔案被自動批准進行編輯。例如:

"chat.tools.edits.autoApprove": {
  "**/*": true,
  "**/.vscode/*.json": false,
  "**/.env": false
}

編輯上一個聊天請求

您可以在當前聊天會話中編輯上一個聊天請求。如果您想完善提示或糾正錯誤,這會很有用。編輯聊天請求相當於撤銷該請求,然後用編輯後的提示提交一個新請求。瞭解更多關於編輯上一個聊天請求的資訊。

使用檢查點回滾聊天請求

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

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

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

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

瞭解更多關於在聊天中使用檢查點的資訊。

使用指令讓 AI 編輯遵循您的編碼風格

要讓 AI 生成的程式碼編輯遵循您的編碼風格、偏好的框架和其他偏好,您可以使用指令檔案。指令檔案允許您在 Markdown 檔案中描述您的編碼風格和偏好,AI 會使用這些檔案來生成符合您要求的程式碼編輯。

您可以手動將指令檔案作為上下文附加到您的聊天提示中,也可以配置指令檔案使其自動應用。

以下程式碼片段展示了一個描述您的編碼風格和偏好的指令檔案示例:

---
applyTo: "**"
---
# Project general coding standards

## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants

## Error Handling
- Use try/catch blocks for async operations
- Implement proper error boundaries in React components
- Always log errors with contextual information

瞭解更多關於使用指令檔案的資訊。

設定

以下列表包含與編輯模式相關的設定。您可以透過設定編輯器 (⌘, (Windows、Linux 為 Ctrl+,)) 配置設定。

常見問題

我為什麼應該使用編輯模式而不是代理模式?

考慮以下標準來選擇編輯模式和代理模式:

  • 編輯範圍:如果您的請求只涉及程式碼編輯,並且您知道更改的精確範圍,您可能會使用編輯模式。
  • 耗時:代理模式處理請求涉及多個步驟,因此可能需要更長的時間才能得到響應。例如,確定相關的上下文和要編輯的檔案,確定行動計劃等。
  • 非確定性:代理模式會評估生成的編輯結果,並可能進行多次迭代。因此,代理模式可能比編輯模式更具非確定性。
  • 請求配額:在代理模式下,根據任務的複雜性,一個提示可能會導致對後端的多次請求。