在 VS Code 中使用 Claude Code:一个图形化的 AI 编程助手

在 VS Code 中使用 Claude Code:一个图形化的 AI 编程助手svg xmlns http www w3 org 2000 svg style display none svg

大家好,我是讯享网,很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



 
  
    
     
      
     

Visual Studio Code 里现在可以直接用 Claude Code 了。不是通过终端,而是以一个原生扩展的形式,像其他插件一样安装在 IDE 里。这是官方推荐的在 VS Code 中使用 Claude Code 的方式。

装上之后,开发者可以在一个图形界面里和 Claude 对话,查看它建议的代码修改,接受或拒绝,还能在同一个面板里管理多个对话会话。对于已经习惯 VS Code 工作流的人来说,这比切换到终端要自然得多。

在安装这个扩展之前,需要确认几件事:

  • VS Code 版本 1.98.0 或更高
  • 有一个 Anthropic 账户。第一次打开扩展的时候会要求登录。如果使用的是第三方提供商(比如 Amazon Bedrock 或 Google Vertex AI),则另有配置方式。
  • 扩展本身已经包含了 Claude Code 的命令行工具(CLI),在 VS Code 的集成终端里也可以直接调用。这一点后面会详细说明。

安装方式有好几种:

  • 点击这个链接直接安装:Install for VS Code(针对 Cursor 编辑器也有对应的链接)。
  • 或者在 VS Code 里按 Cmd+Shift+X(Mac)或 Ctrl+Shift+X(Windows/Linux)打开扩展面板,搜索 “Claude Code”,然后点击 Install。

如果安装后扩展没有出现,可以尝试重启 VS Code,或者从命令面板(Command Palette)里运行 “Developer: Reload Window”。

1. 打开 Claude Code 面板

在整个 VS Code 界面中,一个火花图标代表 Claude Code。最快速的打开方式是在编辑器工具栏(Editor Toolbar,位于编辑器窗口的右上角)点击这个火花图标。但这个图标只在有文件打开的时候才会显示。

其他打开方式:

  • 活动栏(Activity Bar,左侧边栏):点击火花图标会打开会话列表,可以点击任意会话作为完整编辑器标签页打开,或者开始一个新会话。这个图标始终可见。
  • 命令面板:按 Cmd+Shift+PCtrl+Shift+P,输入 “Claude Code”,然后选择 “Open in New Tab” 等选项。
  • 状态栏(窗口右下角):点击 “✱ Claude Code”。即使没有打开任何文件,这个按钮也能用。

第一次打开面板时,会出现一个 “Learn Claude Code” 的检查清单。点击每个项目旁边的 “Show me” 可以逐步学习,或者直接关掉。如果想重新打开这个清单,可以在 VS Code 设置里找到 Extensions → Claude Code,取消勾选 “Hide Onboarding”。

这个 Claude 面板可以拖动,随意摆放到 VS Code 的任何位置——左侧边栏、右侧边栏、或者作为编辑器区域的一个标签页。

2. 发送提示词

在提示框里输入问题或指令,让 Claude 帮忙解释代码、调试问题、或者直接修改文件。

Claude 会自动看到当前选中的代码。按下 Option+K(Mac)或 Alt+K(Windows/Linux)可以在提示词里插入一个 @-mention 引用,比如 @file.ts#5-10 这样的格式,表示引用某个文件的特定行范围。

举个例子:选中一个 Python 文件里的第 2-3 行,然后在提示框里问 “这几行是做什么的?” Claude 会结合上下文回答。

3. 审查修改

当 Claude 想要修改文件时,它会显示一个并排对比视图(diff),左边是原始内容,右边是建议的改动,然后询问是否允许。用户可以接受、拒绝,或者告诉 Claude 改成别的样子。

提示框支持多个实用特性:

  • 权限模式:点击提示框底部的模式指示器可以切换。在普通模式下,Claude 每次操作前都会询问。在 Plan 模式下,Claude 会先描述它打算做什么,等用户批准后才动手。VS Code 会自动把计划显示为一个完整的 Markdown 文档,用户可以在里面添加行内评论来反馈。在 auto-accept 模式下,Claude 直接修改文件,不再询问。默认模式可以在 VS Code 设置里的 claudeCode.initialPermissionMode 中修改。
  • 命令菜单:输入 / 或直接按 / 键可以打开命令菜单。选项包括附加文件、切换模型、切换扩展思考(Extended Thinking)、查看计划使用量(/usage)、启动远程控制会话(/remote-control)等。还有自定义部分,可以访问 MCP 服务器、钩子、内存设置、权限和插件。带有终端图标的命令会在集成终端里打开。
  • 上下文指示器:提示框会显示当前用了多少 Claude 的上下文窗口。Claude 会在需要时自动压缩,用户也可以手动运行 /compact
  • 扩展思考:让 Claude 在面对复杂问题时花更多时间推理。可以通过命令菜单(/)切换。
  • 多行输入:按 Shift+Enter 可以换行而不发送消息。这在问答对话框的其他自由文本输入框里同样有效。

使用 @-mention 可以给 Claude 提供关于特定文件或文件夹的上下文。输入 @ 后跟文件或文件夹名称,Claude 会读取该内容,然后回答问题或进行修改。Claude Code 支持模糊匹配,所以只输入部分名称也能找到想要的东西。

例如:

  • “解释一下 @auth 里的逻辑”——会模糊匹配到 auth.js、AuthService.ts 等文件。
  • “@src/components/ 里有什么?”——末尾带斜杠表示这是一个文件夹。

对于大型 PDF 文件,可以让 Claude 只读取特定页面:单页、一个范围如 pages 1-10,或者从某一页开始往后直到结束。

选中的代码会自动被 Claude 看到。提示框底部会显示当前选中了多少行。按下 Option+K(Mac)或 Alt+K(Windows/Linux)可以在提示词中插入带行号的文件引用,比如 @app.ts#5-10。点击选中指示器可以切换是否让 Claude 看到高亮的代码——眼睛带斜杠的图标表示该选中内容对 Claude 隐藏。

另外,按住 Shift 键把文件拖入提示框,可以将其作为附件添加。点击附件上的 X 可以把它从上下文中移除。

点击 Claude Code 面板顶部的下拉菜单可以访问对话历史。可以按关键词搜索,也可以按时间浏览(今天、昨天、过去 7 天等)。点击任意对话可以恢复它,并保留完整的消息历史。新会话会根据第一条消息自动生成一个标题。鼠标悬停在某个会话上会出现重命名和删除按钮。

如果之前在网页版 Claude Code 上工作过,可以直接在 VS Code 里恢复那些远程会话。这需要用 claude.ai 的订阅账户登录,而不是 Anthropic Console

  1. 点击面板顶部的 “Past Conversations” 下拉菜单。
  2. 在弹出的对话框中,有两个标签页:Local(本地)和 Remote(远程)。点击 Remote。
  3. 浏览或搜索远程会话。点击任意一个,会将其下载到本地并继续对话。

需要注意:只有那些从 GitHub 仓库启动的网页会话才会出现在 Remote 标签页中。恢复会话只是把历史记录加载到本地,修改不会同步回 claude.ai。

选择 Claude 的位置

拖动 Claude 面板的标签页或标题栏,可以把它放到:

  • 次级侧边栏(窗口右侧):边写代码边让 Claude 保持可见。
  • 主侧边栏(左侧,与资源管理器、搜索等图标在一起)。
  • 编辑器区域:像普通文件标签页一样打开,适合处理临时任务。

主侧边栏用于主要的 Claude 会话,可以额外打开多个标签页处理子任务。Claude 会记住用户偏好的位置。活动栏里的会话列表图标和 Claude 面板是分开的:会话列表始终显示在活动栏,而 Claude 面板图标只在面板停靠在左侧边栏时才会出现在那里。

运行多个对话

从命令面板中选择 “Open in New Tab” 或 “Open in New Window” 可以开启额外的对话。每个对话都有自己的历史记录和上下文,可以并行处理不同的任务。

使用标签页时,火花图标上会出现一个彩色小点:蓝色表示有权限请求正在等待,橙色表示 Claude 在标签页被隐藏的状态下完成了工作。

切换到终端模式

默认情况下,扩展打开的是一个图形聊天面板。如果更喜欢命令行风格的界面,可以打开 “Use Terminal” 设置并勾选。也可以在 VS Code 设置(按 Cmd+,Ctrl+,)中,找到 Extensions → Claude Code,勾选 “Use Terminal”。

管理插件

VS Code 扩展包含一个图形界面用于安装和管理插件。在提示框中输入 /plugins 可以打开管理插件界面。

安装插件:插件对话框有两个标签页:Plugins 和 Marketplaces。在 Plugins 标签页中,已安装的插件显示在顶部,带有开关可以启用或禁用;下方是来自已配置市场(marketplaces)的可用插件。可以搜索过滤,点击 Install 安装。安装时会选择作用范围:

  • Install for you:在所有项目中可用(用户级别)。
  • Install for this project:与项目协作者共享(项目级别)。
  • Install locally:仅自己、仅当前仓库(本地级别)。

管理市场:切换到 Marketplaces 标签页可以添加或移除插件源。输入 GitHub 仓库地址、URL 或本地路径来添加新市场。点击刷新图标更新插件列表,点击垃圾桶图标移除市场。修改后会有横幅提示重启 Claude Code 以应用更新。

插件管理在 VS Code 扩展和 CLI 之间是共通的——在扩展中配置的插件和市场在 CLI 中同样可用,反之亦然。

将 Claude 连接到 Chrome 浏览器,可以在不离开 VS Code 的情况下测试 Web 应用、调试控制台日志、自动化浏览器工作流。这需要 Claude in Chrome 扩展 1.0.36 或更高版本

在提示框中输入 @browser 然后告诉 Claude 要做什么:

@browser go to localhost:3000 and check the console for errors

也可以打开附件菜单选择特定的浏览器工具,比如打开新标签页或读取页面内容。

Claude 会为浏览器任务打开新标签页,并共享浏览器的登录状态,因此可以访问用户已经登录的任何网站。

打开命令面板(Cmd+Shift+PCtrl+Shift+P),输入 “Claude Code” 可以看到所有可用的 VS Code 命令。

有些快捷键取决于哪个面板当前处于“聚焦”状态(即接收键盘输入)。当光标在代码文件中时,编辑器处于聚焦状态;当光标在 Claude 的提示框中时,Claude 处于聚焦状态。按 Cmd+Esc / Ctrl+Esc 可以在两者之间切换。

命令 快捷键 描述 Focus Input Cmd+Esc (Mac) / Ctrl+Esc (Windows/Linux) 在编辑器和 Claude 之间切换焦点 Open in Side Bar - 在左侧边栏打开 Claude Open in Terminal - 以终端模式打开 Claude Open in New Tab Cmd+Shift+Esc (Mac) / Ctrl+Shift+Esc (Windows/Linux) 以编辑器标签页形式打开新对话 Open in New Window - 在新窗口中打开新对话 New Conversation Cmd+N (Mac) / Ctrl+N (Windows/Linux) 开始新对话(需要 Claude 处于聚焦状态) Insert @-Mention Reference Option+K (Mac) / Alt+K (Windows/Linux) 插入当前文件和选区的引用(需要编辑器聚焦) Show Logs - 查看扩展调试日志 Logout - 退出 Anthropic 账户

扩展注册了一个 URI 处理器:vscode://anthropic.claude-code/open。可以用它从自己的工具(shell 别名、浏览器书签或任何能打开 URL 的脚本)中启动一个新的 Claude Code 标签页。如果 VS Code 尚未运行,打开该 URL 会先启动 VS Code;如果已经运行,会在当前聚焦的窗口中打开。

使用操作系统的 URL 打开器调用它。在 macOS 上:

open "vscode://anthropic.claude-code/open" 

Linux 上使用 xdg-open,Windows 上使用 start

该处理器接受两个可选查询参数:

参数 描述 prompt 预填到提示框中的文本,需要 URL 编码。只是预填,不会自动提交。 session 要恢复的会话 ID(而不是开始新对话)。该会话必须属于当前 VS Code 打开的工作区。如果找不到该会话,则开始新对话。如果该会话已经在一个标签页中打开,则聚焦该标签页。

例如,打开一个预填了 “review my changes” 的标签页:

vscode://anthropic.claude-code/open?prompt=review%20my%20changes 

扩展有两类设置:

  1. VS Code 中的扩展设置:控制扩展在 VS Code 内的行为。通过 Cmd+,Ctrl+, 打开设置,然后转到 Extensions → Claude Code。也可以在提示框中输入 / 并选择 “General Config” 来打开设置。
  2. Claude Code 设置(~/.claude/settings.json:在扩展和 CLI 之间共享。用于配置允许的命令、环境变量、钩子和 MCP 服务器。

settings.json 中添加 "$schema": "https://json.schemastore.org/claude-code-settings.json" 可以获得所有可用设置的自动补全和内联校验。

扩展设置一览

设置 默认值 描述 selectedModel default 新对话使用的模型。可以在会话中通过 /model 更改。 useTerminal false 是否以终端模式启动 Claude(而不是图形面板) initialPermissionMode default 新对话的批准提示控制:default、plan、acceptEdits 或 bypassPermissions preferredLocation panel Claude 打开的位置:sidebar(右侧)或 panel(新标签页) autosave true 在 Claude 读取或写入文件前自动保存文件 useCtrlEnterToSend false 使用 Ctrl/Cmd+Enter 而不是 Enter 发送提示词 enableNewConversationShortcut true 启用 Cmd/Ctrl+N 开始新对话 hideOnboarding false 隐藏入门检查清单(毕业帽图标) respectGitIgnore true 文件搜索时排除 .gitignore 模式 environmentVariables [] 为 Claude 进程设置环境变量(建议使用 Claude Code 设置代替) disableLoginPrompt false 跳过身份验证提示(用于第三方提供商配置) allowDangerouslySkipPermissions false 在模式选择器中添加 Auto 模式和 Bypass permissions。Auto 模式有 plan、admin、model 和 provider 要求,即使打开此开关也可能不可用。Bypass permissions 仅在没有互联网访问的沙箱中使用。 claudeProcessWrapper - 用于启动 Claude 进程的可执行文件路径

Claude Code 既提供 VS Code 扩展(图形面板),也提供 CLI(终端中的命令行界面)。有些功能只在 CLI 中可用。如果需要 CLI 特有的功能,可以在 VS Code 的集成终端中直接运行 claude

功能 CLI VS Code 扩展 命令和技能 全部 子集(输入 / 查看可用项) MCP 服务器配置 支持 部分支持(可通过 CLI 添加服务器;在聊天面板中用 /mcp 管理已有服务器) 检查点(Checkpoints) 支持 支持 ! bash 快捷方式 支持 不支持 Tab 补全 支持 不支持

VS Code 扩展支持检查点功能,可以追踪 Claude 的文件修改并回退到之前的状态。鼠标悬停在任意消息上会出现回退按钮,然后有三个选项:

  • 从当前位置分叉对话:从此消息开始创建新的对话分支,同时保留所有代码修改。
  • 将代码回退到这里:将文件修改回退到对话中的这个时间点,同时保留完整的对话历史。
  • 分叉对话并回退代码:同时创建新对话分支并回退文件修改。

如果想在 VS Code 里使用命令行界面而不离开窗口,可以打开集成终端(Ctrl+`` 或 Cmd+``)然后运行 claude。CLI 会自动与 IDE 集成,支持 diff 查看和诊断信息共享。

如果使用外部终端,可以在 Claude Code 中运行 /ide 将其连接到 VS Code。

扩展和 CLI 共享同一套对话历史。如果想在 CLI 中继续一个扩展中的对话,可以在终端中运行 claude --resume。这会打开一个交互式选择器,可以搜索并选择要恢复的对话。

使用 @terminal:name 可以在提示词中引用终端输出,其中 name 是终端的标题。这样 Claude 可以看到命令的输出、错误信息或日志,而无需复制粘贴。

当 Claude 运行长时间命令时,扩展会在状态栏显示进度。不过,与 CLI 相比,后台任务的可见性有限。为了更好的可见性,可以让 Claude 输出命令,然后自己在 VS Code 的集成终端中运行它。

MCP(Model Context Protocol)服务器为 Claude 提供外部工具、数据库和 API 的访问能力。

要添加 MCP 服务器,打开集成终端(Ctrl+`` 或 Cmd+``)并运行:

claude mcp add --transport http github https://api.githubcopilot.com/mcp/ 

配置完成后,直接让 Claude 使用这些工具,比如 “Review PR #456”。

如果想在不离开 VS Code 的情况下管理 MCP 服务器,可以在聊天面板中输入 /mcp。MCP 管理对话框可以启用或禁用服务器、重新连接、以及管理 OAuth 认证。

Claude Code 与 git 集成,帮助直接在 VS Code 中完成版本控制工作流。可以让 Claude 提交更改、创建拉取请求或跨分支工作。

创建提交和拉取请求

Claude 可以暂存更改、编写提交消息,并根据当前工作创建拉取请求:

创建拉取请求时,Claude 会根据实际代码更改生成描述,并可以添加关于测试或实现决策的上下文。

使用 git worktrees 进行并行任务

使用 --worktree(或 -w)标志可以在一个隔离的 worktree 中启动 Claude,拥有独立的文件和分支:

claude --worktree feature-auth 

每个 worktree 在共享 git 历史的同时保持独立的文件状态。这样可以防止不同任务的 Claude 实例相互干扰。

默认情况下,Claude Code 直接连接到 Anthropic 的 API。如果所在组织使用 Amazon Bedrock、Google Vertex AI 或 Microsoft Foundry 来访问 Claude,可以将扩展配置为使用这些提供商。

  1. 关闭登录提示:打开 “Disable Login Prompt” 设置并勾选。也可以在 VS Code 设置中搜索 “Claude Code login”,然后勾选 Disable Login Prompt。
  2. 配置提供商:按照对应提供商的设置指南操作。这些指南会说明如何在 ~/.claude/settings.json 中配置,确保设置同时在 VS Code 扩展和 CLI 之间共享。

代码保持私有。Claude Code 处理代码是为了提供帮助,但不会用于训练模型

启用了自动编辑权限后,Claude Code 可以修改 VS Code 配置文件(如 settings.jsontasks.json),而这些文件可能会被 VS Code 自动执行。为了降低处理不受信任代码时的风险:

  • 对不受信任的工作区启用 VS Code 的受限模式(Restricted Mode)
  • 使用手动批准模式而不是自动接受模式
  • 在接受修改前仔细审查更改

当扩展激活时,它会运行一个本地 MCP 服务器,CLI 会自动连接。这就是为什么 CLI 能够在 VS Code 的原生 diff 查看器中打开差异、读取当前选中的内容用于 @-mention、以及在处理 Jupyter notebook 时让 VS Code 执行单元格。

这个服务器名为 ide,在 /mcp 中隐藏,因为没有什么需要配置的。但如果所在组织使用 PreToolUse 钩子来允许列表 MCP 工具,则需要知道它的存在。

传输和认证:服务器绑定到 127.0.0.1 上的一个随机高位端口,无法从其他机器访问。每次扩展激活都会生成一个新的随机认证令牌,CLI 必须提供该令牌才能连接。令牌写入 ~/.claude/ide/ 下的锁文件,权限为 0600,目录权限为 0700,只有运行 VS Code 的用户能读取。

向模型暴露的工具:该服务器托管了十几个工具,但只有两个对模型可见。其余的是 CLI 用于自身 UI 的内部 RPC(打开 diff、读取选中内容、保存文件),在工具列表传给 Claude 之前就被过滤掉了。

工具名称(钩子所见) 功能 是否写入 mcp__ide__getDiagnostics 返回语言服务器诊断信息——即 VS Code 问题面板中的错误和警告。可以选择限定到单个文件。 否 mcp__ide__executeCode 在活动 Jupyter notebook 的内核中运行 Python 代码。 是

Jupyter 执行总是先询问mcp__ide__executeCode 不会静默运行任何东西。每次调用时,代码会**入为活动 notebook 末尾的一个新单元格,VS Code 会滚动到该单元格,并弹出一个原生 Quick Pick,要求选择 Execute 或 Cancel。取消(或按 Esc 关闭选择器)会向 Claude 返回一个错误,不会运行任何代码。如果没有活动 notebook、没有安装 Jupyter 扩展(ms-toolsai.jupyter)、或者内核不是 Python,该工具也会直接拒绝。

Quick Pick 确认与 PreToolUse 钩子是分开的。mcp__ide__executeCode 出现在允许列表中只是让 Claude 可以提议运行一个单元格;真正让它实际运行的是 VS Code 内部的 Quick Pick。

扩展无法安装

  • 确认 VS Code 版本是否 ≥ 1.98.0
  • 检查 VS Code 是否有安装扩展的权限
  • 尝试直接从 VS Code Marketplace 安装

火花图标不显示

  • 火花图标只在有文件打开时才出现在编辑器工具栏。如果没看到,先打开一个文件。
  • 检查 VS Code 版本(帮助 → About 确认 ≥ 1.98.0)
  • 重启 VS Code,或从命令面板运行 “Developer: Reload Window”
  • 临时禁用其他 AI 扩展(Cline、Continue 等)
  • 检查工作区信任状态:扩展在受限模式下不工作

替代方案:点击状态栏(窗口右下角)的 “✱ Claude Code”,即使没有打开文件也能用。或者用命令面板(Cmd+Shift+P / Ctrl+Shift+P)输入 “Claude Code”。

Claude Code 一直没有响应

  • 检查网络连接是否稳定
  • 尝试开始一个新对话,看问题是否依然存在
  • 在终端中运行 claude,看是否有更详细的错误信息

如果问题持续,可以在 GitHub 上提交 issue,附上错误详情。

  1. 打开扩展视图(Cmd+Shift+XCtrl+Shift+X
  2. 搜索 “Claude Code”
  3. 点击 Uninstall

如果想同时删除扩展数据和所有设置:

rm -rf ~/.vscode/globalStorage/anthropic.claude-code 

小讯
上一篇 2026-04-09 20:23
下一篇 2026-04-09 20:21

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/253160.html