Skip to content
FunCoding

Search

Search docs, agents, posts, Skills and MCP servers

VS Code

在 VS Code 里安装和使用 Claude Code 扩展:提示框、@ 提及、计划审阅、会话管理、命令快捷键、设置、检查点和第三方提供商。

VS Code 扩展为 Claude Code 提供原生图形界面,直接集成在你的 IDE 里,是在 VS Code 中使用 Claude Code 的推荐方式。用它可以在接受之前审阅和编辑 Claude 的计划、自动接受边做边改的编辑、用选区里指定的行范围 @ 提及文件、访问对话历史,并在不同标签页或窗口里打开多个对话。

前置条件

  • VS Code 1.94.0 或更新版本
  • Anthropic 账号:任何付费 Claude 订阅(Pro、Max、Team、Enterprise)或 Claude Console 账号都行,不需要 API Key。首次打开扩展时用这个账号登录

扩展为聊天面板自带一份 CLI。要在 VS Code 的集成终端里运行 claude,还需要独立安装 CLI。

安装扩展

点击链接直接安装(VS Code 或 Cursor);或在 VS Code 里按 Cmd+Shift+X(Mac)/ Ctrl+Shift+X(Windows/Linux)打开扩展视图,搜索「Claude Code」并点 Install。扩展也能装在 Devin Desktop、Kiro 等其他 VS Code 分支里,可在编辑器的扩展视图搜索,或从 Open VSX 注册表安装。

开始使用

在整个 VS Code 里,Spark 图标代表 Claude Code。

  1. 打开 Claude:最快的方式是点编辑器工具栏(编辑器右上角)里的 Spark 图标(只有打开了文件时才显示)。其他方式:活动栏里的 Spark 图标(打开会话列表)、命令面板(Cmd+Shift+P / Ctrl+Shift+P,输入「Claude Code」,选「Open in New Tab」之类)、状态栏右下角的 ✻ Claude Code(没有打开文件时也可用)
  2. 登录:第一次打开面板会出现登录界面,点 Sign in 并在浏览器里完成授权。如果你在 shell 里设置了 ANTHROPIC_API_KEY 却仍看到登录提示,可能是 VS Code 没有继承 shell 环境:从终端用 code . 启动 VS Code,或改用 Claude 账号登录
  3. 发送提示:让 Claude 帮你处理代码或文件,无论是解释工作原理、调试问题还是做修改。Claude 会自动看到你选中的文本,按 Option+K(Mac)/ Alt+K(Windows/Linux)还能在提示里插入 @ 提及引用(如 @file.ts#5-10)
  4. 审阅改动:你看到的取决于提示框底部显示的权限模式——在 Auto 或 Edit automatically 模式下,Claude 不经询问就编辑工作区的多数文件;在 Manual 模式下,Claude 想编辑文件时会显示原文与建议改动的并排对比并请求权限,你可以接受、拒绝,或告诉 Claude 改做什么。可以用 diff 下每处改动的 Accept this change / Reject this change 按钮逐处审阅

命令面板里运行「Claude Code: Open Walkthrough」可以获得基础功能的引导式介绍。

使用提示框

  • 权限模式:点提示框底部的模式指示器切换:Auto(分类器审查多数动作,而不是问你)、Manual(文件编辑和多数 shell 命令前询问)、Plan(Claude 先描述要做什么并等待批准,VS Code 会自动把计划作为完整的 Markdown 文档打开,你可以在 Claude 开始前加行内评论给出反馈;也可以输入 /plan)、Edit automatically(不经询问就编辑)
  • 模型:从命令菜单选 Switch model…,或点提示框底部的模型名,在会话中途切换模型;当前模型支持努力等级时,选择器还会显示 Effort 行
  • 命令菜单:点 / 或输入 / 打开,选项包括附加文件、切换模型和切换扩展思考。Customize 区域有 MCP 服务器、命令、输出风格、Hook、记忆、指令、权限和插件等入口

引用文件和文件夹

用 @ 提及给 Claude 具体文件或文件夹的上下文。输入 @ 加文件或文件夹名,Claude 会读取内容并回答或修改。支持模糊匹配:

Explain the logic in @auth (fuzzy matches auth.js, AuthService.ts, etc.)
What's in @src/components/ (include a trailing slash for folders)

在编辑器里选中文本时,Claude 能自动看到你高亮的代码,提示框页脚显示选了多少行。Claude 还会看到你在编辑器里打开的文件(即使没有选中任何东西),提示框里会显示它的名字;想只添加选中的文本,关掉 Attach Open File 设置。扩展会对某些文件隐去选中的文本:文件在工作区内且匹配你的 files.exclude 或 search.exclude 设置时,Claude 最多只收到文件路径。

附加图片:从剪贴板粘贴到提示框;附加文件:按住 Shift 把文件拖进提示框;移除附件:点它上面的 X。

恢复过去的对话

点 Claude Code 面板顶部的 Session history 按钮访问对话历史,可以按关键词搜索或按时间浏览。点任一对话以完整消息历史恢复它。新会话会根据你的第一条消息获得 AI 生成的标题;悬停在会话上可以重命名或归档。默认情况下,14 天没有活动的会话会自动移入 Archived sessions(需要 v2.1.265 或更新版本)。

自定义你的工作流

选择 Claude 放在哪里

可以拖动 Claude 面板重新定位到 VS Code 的任何地方:辅助侧边栏(窗口右侧,写代码时保持 Claude 可见)、主侧边栏(左侧,有资源管理器、搜索等图标)、编辑器区域(把 Claude 作为标签页和文件并排打开,适合旁支任务)。

运行多个对话

用命令面板的 Open in New Tab 或 Open in New Window 开启更多对话,每个对话保持自己的历史和上下文,让你并行处理不同任务。用标签页时,Spark 图标上的小彩点指示状态:蓝色表示有待处理的权限请求,橙色表示 Claude 在标签页被隐藏时完成了。

切换到终端模式

默认扩展打开图形聊天面板。如果你偏好 CLI 风格的界面,打开 Use Terminal 设置并勾选。

VS Code 命令与快捷键

打开命令面板输入「Claude Code」可以看到所有可用命令。主要的:

命令快捷键说明
Focus InputCmd+Esc / Ctrl+Esc在编辑器和 Claude 之间切换焦点
Open in New TabCmd+Shift+Esc / Ctrl+Shift+Esc把新对话作为编辑器标签页打开
New ConversationCmd+N / Ctrl+N开始新对话(需 Claude 获得焦点,且 enableNewConversationShortcut 为 true)
Insert @-Mention ReferenceOption+K / Alt+K插入对当前文件和选区的引用(需要编辑器获得焦点)
Toggle Focus viewCtrl+Option+F / Ctrl+Alt+F隐藏或显示对话中的工具活动

配置设置

扩展有两类设置:VS Code 里的扩展设置(控制扩展在 VS Code 内的行为;用 Cmd+, 或 Ctrl+, 打开,进入 Extensions → Claude Code)和 ~/.claude/settings.json 里的 Claude Code 设置(扩展与 CLI 共享,用于允许的命令、环境变量、Hook 和 MCP 服务器)。给 settings.json 加上 "$schema": "https://json.schemastore.org/claude-code-settings.json" 能在 VS Code 里获得自动补全和行内校验。

常用的扩展设置:

设置默认值说明
useTerminalfalse以终端模式而非图形面板启动 Claude
initialPermissionMode-控制新对话的批准提示:default、plan、acceptEdits 或 bypassPermissions;VS Code 从用户设置读取它并忽略工作区的值
preferredLocationpanelClaude 在哪里打开:sidebar(右侧)或 panel(新标签页)
autosavetrueClaude 读写文件之前自动保存文件
useCtrlEnterToSendfalse用 Ctrl/Cmd+Enter 而不是 Enter 发送提示
respectGitIgnoretrue从文件搜索和选区上下文里排除 .gitignore 的模式
environmentVariables[]为 Claude 进程设置环境变量;共享配置请改用 Claude Code 设置
disableLoginPromptfalse跳过认证提示(用于第三方提供商设置)
allowDangerouslySkipPermissionsfalse向模式选择器添加 Bypass permissions;只在没有互联网访问的沙箱里使用

扩展与 CLI 的区别

有些功能只在 CLI 里有。需要 CLI 专有功能时,在 VS Code 的集成终端里运行 claude(需要独立安装 CLI)。

功能CLIVS Code 扩展
命令和 Skill全部子集(输入 / 查看)
MCP 服务器配置是是(在聊天面板用 /mcp 添加和管理)
检查点是是
! Bash 快捷方式是否
Tab 补全是否

用检查点回退:悬停在任一消息上会显示回退按钮,有三个选项:Fork conversation from here(从这条消息开一个新的对话分支,保留所有代码改动)、Rewind code to here(把文件改动回退到对话中的这一点,保留完整对话历史)、Fork conversation and rewind code(开新分支并回退文件改动)。

在 VS Code 里运行 CLI:打开集成终端(Windows/Linux 用 Ctrl+`,Mac 用 Cmd+`)并运行 claude;CLI 会自动与 IDE 集成,用于 diff 查看和诊断共享。注意:装扩展并不会把 claude 放进你的 shell PATH。如果用外部终端,在 Claude Code 里运行 /ide 把它连到 VS Code。

在扩展和 CLI 之间切换:两者共享同一份对话历史。要在 CLI 里继续扩展里的对话,在终端运行 claude --resume。

在提示里包含终端输出:用 @terminal:name(name 是终端的标题)引用终端输出,让 Claude 看到命令输出、错误信息或日志,不必复制粘贴。

用 MCP 连接外部工具:在聊天面板输入 /mcp 管理 MCP 服务器;也可以在集成终端运行 claude mcp add,两者保存到同一份 MCP 配置。

使用 git

让 Claude 提交改动、创建 PR 或跨分支工作:

commit my changes with a descriptive message
create a pr for this feature
summarize the changes I've made to the auth module

创建 PR 时,Claude 会根据实际的代码改动生成描述,并可以补充测试或实现决策的背景。

使用第三方提供商

默认 Claude Code 直连 Anthropic 的 API。如果你的组织用 Amazon Bedrock、Google Cloud 的 Agent Platform 或 Microsoft Foundry 访问 Claude,配置扩展使用你的提供商:打开 Disable Login Prompt 设置并勾选,然后按你提供商的设置指南在 ~/.claude/settings.json 里配置(这样设置在 VS Code 扩展和 CLI 之间共享,详见本组文档的「配置 → 模型与网关」)。使用第三方提供商时,扩展不提供需要 claude.ai 账号的功能,如套餐用量条、语音输入和云端会话的 Web 标签页。

安全与隐私

你的代码保持私密。Claude Code 处理你的代码来提供帮助,但不会用它来训练模型。启用自动编辑权限时,Claude Code 可以修改 VS Code 可能自动执行的配置文件(如 settings.json 或 tasks.json)。处理不受信任的代码时降低风险:为不受信任的工作区启用 VS Code 受限模式;用 Manual 模式而不是 Edit automatically 或 Auto;接受前仔细审阅改动。

内置的 IDE MCP 服务器:扩展处于活动状态时会运行一个 CLI 自动连接的本地 MCP 服务器,CLI 靠它在 VS Code 原生 diff 查看器里打开 diff、为 @ 提及读取当前选区,以及在你使用 Jupyter 笔记本时执行代码。服务器名为 ide,在 /mcp 里隐藏。它绑定 127.0.0.1 的随机端口(10000–65535);暴露给模型的只有两个工具:mcp__ide__getDiagnostics(返回 VS Code 问题面板里的错误和警告,只读)和 mcp__ide__executeCode(在当前 Jupyter 笔记本内核里运行 Python 代码,每次调用都会先插入一个新单元格,并弹出原生 Quick Pick 让你 Execute 或 Cancel,所以不能静默运行)。想排除 .env 这类敏感文件,为其路径添加 Read 拒绝规则,这样选中的文本和打开文件通知都不会送达 Claude。

常见问题

扩展装不上:确认 VS Code 版本兼容(1.94.0 或更新);检查 VS Code 有安装扩展的权限;试着直接从 VS Code Marketplace 安装。

看不到 Spark 图标:它出现在你打开了文件时的编辑器工具栏(编辑器右上角)。看不到时,确认有文件打开,或用状态栏的 ✻ Claude Code 和命令面板打开。其余排障见官方原文。