参加你附近的 ,了解 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+,)) 配置设置。

常见问题

我为什么应该使用编辑模式而不是代理模式?

考虑以下标准来选择编辑模式和代理模式:

  • 编辑范围:如果您的请求只涉及代码编辑,并且您知道更改的精确范围,您可能会使用编辑模式。
  • 耗时:代理模式处理请求涉及多个步骤,因此可能需要更长的时间才能得到响应。例如,确定相关的上下文和要编辑的文件,确定行动计划等。
  • 非确定性:代理模式会评估生成的编辑结果,并可能进行多次迭代。因此,代理模式可能比编辑模式更具非确定性。
  • 请求配额:在代理模式下,根据任务的复杂性,一个提示可能会导致对后端的多次请求。