【动手学 Claude Code】(3) Claude Code 与 IDE 的集成

发布时间:2026/6/9 11:45:45

【动手学 Claude Code】(3) Claude Code 与 IDE 的集成 欢迎关注 youcansxidian【AI 编程】专栏1AI 编程概述2Claude Code 快速上手3Claude Code 与 IDE 的集成4Claude Code 接入微信对话【动手学 Claude Code】3 Claude Code 与 IDE 的集成1. 为什么要把 Claude Code 集成到 IDE2. 在 VS Code 中安装 Claude Code 扩展2.1 准备工作2.2 安装 Claude Code 扩展2.3 配置第三方模型 API3. 在 VS Code 中使用 Claude Code3.1 使用提示框3.1.1 输入问题与多行指令3.1.2 切换权限模式3.1.3 使用命令菜单3.1.4 查看上下文指示器3.1.5 开启扩展思考3.1.6 使用 引用文件和文件夹3.2 Claude Code 辅助编程4. 在 PyCharm 中安装 Claude Code 插件4.1 准备工作4.2 安装 Claude Code 插件4.3 从 PyCharm 中启动 Claude Code4.4 在 PyCharm 中使用 Claude Code5. 总结1. 为什么要把 Claude Code 集成到 IDE按照 5Claude Code 快速指南 的指南我们已经能在终端运行 claude 并和它对话了。Claude Code 默认支持从终端直接操作允许开发者通过自然语言指令进行对话显著提升开发效率。但 CLI 交互方式使用户与 AI 之间隔着一个终端窗口需要手动搬运代码和路径导致了大量的上下文切换和重复劳动严重影响用户的使用体验。你没法直接告诉 AI“就是当前这个文件”——必须手动敲文件路径或者把代码复制粘贴到终端。AI 不知道你的开发环境——它看不见你光标在哪、打开了哪些文件、项目结构长什么样需要逐一描述。AI 返回的代码块需要手动复制粘贴回编辑器——如果需要修改就要反复复制粘贴。Claude Code 除了默认的命令行交互方式外还支持与流行的集成开发环境 (IDE) 无缝集成。AI 直接集成在编辑器里自动看到你的上下文修改直接展示在 Diff 视图中更适合日常开发。自动感知上下文AI 直接看到你当前打开的文件、光标位置、项目目录树。你问“解释一下光标下的函数”它就能准确回答无需复制任何代码。 引用无需输入路径对话框里输入 文件名AI 就能读到对应文件。甚至可以用 文件名:20-30 只引用特定行范围。可视化 Diff 审阅AI 提出的修改直接在 IDE 里以差异对比窗口呈现——左边旧代码右边新代码。你可以一行一行地决定接受还是拒绝像审阅同事的 PR 一样。一键应用一键回退点一下按钮就能应用所有修改。如果改错了检查点Checkpoint 功能让你一键恢复到 AI 修改前的状态。本文youcansxidian的主要内容在 VS Code 中安装 Claude Code 扩展在 VS Code 中使用 Claude Code 示例在 PyCharm 中安装 Claude Code 扩展处理新手常见问题。2. 在 VS Code 中安装 Claude Code 扩展Claude Code 已提供适用于 VS Code 的官方扩展。安装后用户可以直接在编辑器中打开 Claude Code 面板与 AI 进行对话并结合当前项目中的文件和代码完成分析、修改与检查。对于初学者而言使用 VS Code 扩展是较为简便的入门方式。用户不需要预先安装 Node.js也不需要输入额外的安装命令。只要准备好符合要求的 VS Code 和 Claude 账号即可完成扩展安装。官方文档如下https://code.claude.com/docs/en/vs-code2.1 准备工作在安装 Claude Code 扩展前需要完成以下准备工作。安装或更新 VS Code。Claude Code 扩展要求 VS Code 版本不低于 1.98.0。如果尚未安装 VS Code前往 VS Code 官方网站下载安装程序。安装时通常可以保留默认选项。如果已经安装 VS Code在菜单栏点击 “帮助 → 关于” 查看版本号。如版本低于 1.98.0需要更新版本。检查网络连通性。1在PowerShell 中执行ping api.deepseek.com返回网络连通信息即可。2在PowerShell 中执行Test-NetConnection api.deepseek.com -Port 443预期返回显示TcpTestSucceeded : True。准备国内第三方模型 API Key替代 Claude 账号由于国内网络无法直接登录 Claude 账号本文使用国内第三方模型如 DeepSeek的 API Key 来调用 Claude Code。以 DeepSeek 为例注册登录 DeepSeek 开放平台 → 进入控制台 → 点击「API Keys」→ 创建 API Key → 复制保存形如 sk-xxx…。测试 API Key 是否有效在 PowerShell 中执行以下命令将 你的API_KEY 替换为实际密钥。返回包含模型列表的 JSON 数据即表示 API Key 有效。curl.exe https://api.deepseek.com/v1/models-HAuthorization: Bearer 你的API_KEY可选代理配置。Claude Code 需要 Anthropic账户你在第一次打开扩展时会登录。如果使用第三方供应商请参考 youcansxidian 5Claude Code 快速指南 配置代理。2.2 安装 Claude Code 扩展打开 VSCode。进入扩展市场搜索 Claude Code 安装。在 VS Code 中点击左侧活动栏的“扩展”图标或按 CtrlShiftX在搜索框中输入 “Claude Code”找到发布者为 anthropic 的官方扩展。点击“安装”开始安装扩展右下角会提示“已成功安装 Claude Code 扩展”打开 Claude Code。打开 Claude Code 后在左侧活动栏将出现 Claude Code 的火花图标官方称为 Spark 图标点击后会在左侧显示 Claude Code Sessions 区域用于查看和管理会话。打开文件后在编辑器代码区的右上角也会出现 Claude Code 的火花图标点击后会在窗口右侧展开 Claude Code 对话面板这是日常使用中最直接的入口。禁用登录。搜索 VSCode 的设置项 “claudeCode.disableLoginPrompt” 并将其勾选。2.3 配置第三方模型 APIClaude Code 扩展通过读取 VS Code 的设置来获取 API 信息。除了默认配置外Claude Code 还允许用户通过环境变量修改 API 接口地址、认证信息和模型名称从而接入兼容 Anthropic API 格式的第三方模型。最重要的三个环境变量如下。ANTHROPIC_BASE_URL 指定 API 接口地址。这里使用 DeepSeek 提供的 Anthropic 兼容接口。ANTHROPIC_AUTH_TOKEN 保存 DeepSeek API Key用于接口认证。ANTHROPIC_MODEL 指定 Claude Code 默认调用的模型。下面以 DeepSeek API 为例介绍如何将 Claude Code for VS Code 配置为使用 DeepSeek 模型。获取 DeepSeek API Key。注册登录 DeepSeek 开放平台 → 进入控制台 → 点击「API Keys」→ 创建 API Key → 复制保存形如 sk-xxx…。打开 Claude Code 用户级配置文件。Claude Code 支持通过 settings.json 文件保存环境变量。对于个人使用的 API Key应优先写入用户级配置文件 “%USERPROFILE%.claude\settings.json”。1打开 VS Code点击菜单栏中的 “文件 → 打开文件”2在文件名输入框中粘贴“%USERPROFILE%.claude\settings.json”按下 Enter 键。如果 “.claude” 文件夹尚不存在可以先在用户目录中新建该文件夹再新建一个名为 “settings.json” 的文件。注意该配置文件将被 Claude Code CLI 和 Claude Code for VS Code 共用。写入 DeepSeek API 配置。打开 settings.json 文件后输入以下内容{env:{ANTHROPIC_BASE_URL:https://api.deepseek.com/anthropic,ANTHROPIC_AUTH_TOKEN:sk-e5eaa568891c4ef3ae7a18dd9e8f921d,ANTHROPIC_MODEL:deepseek-v4-pro[1m],ANTHROPIC_DEFAULT_OPUS_MODEL:deepseek-v4-pro[1m],ANTHROPIC_DEFAULT_SONNET_MODEL:deepseek-v4-pro[1m],ANTHROPIC_DEFAULT_HAIKU_MODEL:deepseek-v4-flash,CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC:1,CLAUDE_CODE_EFFORT_LEVEL:max}}将以下占位内容“你的DeepSeek API Key” 替换为实际的 DeepSeek API Key。保存 settings.json 文件。保存配置文件后应完全关闭 VS Code再重新打开。打开 Claude Code 面板。打开文件点击 VS Code 中的 Claude Code Spark 图标即可打开 Claude Code 面板。第一次打开 Claude Code 面板时系统会提示登录。点击 “Sign in”系统会自动打开浏览器。在浏览器中按照页面提示登录 Claude 账号并完成授权。如果未提示登录在 Claude Code 面板输入并运行 “/login”扩展会自动重新打开登录界面。使用测试。1在 Claude Code 面板底部的输入框中输入 “/model” 查看当前模型。如图所示能够看到当前使用的模型为上节中 DeepSeek API 配置的模型说明安装和配置全部成功。2在 Claude Code 面板底部的输入框中输入一个简单问题测试例如 “请说明这个程序做什么”。如图所示Claude Code 能够正常回答并且没有出现 API 连接错误说明 DeepSeek API 已经成功接入3. 在 VS Code 中使用 Claude Code完成 Claude Code 扩展安装和模型 API 配置后就可以在 VS Code 中直接使用 Claude Code 辅助编程。打开一个项目文件后点击编辑器右上角的 Claude Code 图标右侧会展开 Claude Code 面板。面板下方的提示框是最主要的操作区域。用户可以在其中输入问题、引用项目文件、切换权限模式也可以通过命令菜单调用更多功能。本章将从提示框开始介绍 Claude Code 在 VS Code 中最常用的操作方法。3.1 使用提示框提示框位于 Claude Code 面板的下方。它的作用不仅是输入问题还可以帮助用户控制 Claude Code 的操作权限、选择模型、引用文件、查看上下文占用情况以及恢复过去的对话。为了便于演示可以先创建一个简单的 Python 文件 score.pydefcalculate_average(scores):returnsum(scores)/len(scores)scores[85,92,78,90]print(calculate_average(scores))这段代码用于计算一组成绩的平均值但没有处理列表为空等特殊情况。后续可以围绕这一示例体验提示框的主要功能。3.1.1 输入问题与多行指令最简单的使用方式是直接在提示框中输入问题。例如“请解释当前打开的 score.py 文件实现了什么功能”。发送后Claude Code 会读取当前文件并说明程序的主要逻辑。当任务较为复杂时可以输入多行要求。按下“Shift Enter” 可以换行但不会立即发送消息。对于初学者而言使用多行指令可以让任务描述更加清晰也能减少 Claude Code 误解需求的概率。例如请检查 score.py 中的 calculate_average 函数。 需要完成以下任务1、指出当前代码可能出现的问题2、给出修改建议3、暂时不要修改文件先解释你的思路。3.1.2 切换权限模式提示框底部会显示当前权限模式。点击提示框底部的模式指示器就可以切换权限模式。Claude Code 常用的权限模式包括以下三种。普通模式在普通模式下Claude Code 在执行修改文件、运行命令等操作前会先征求用户许可。普通模式适合刚开始使用 Claude Code 的用户。它能够让用户逐步了解 Claude Code 准备执行哪些操作避免在不了解情况时直接修改项目文件。计划模式默认在计划模式下Claude Code 会先分析任务说明准备修改哪些文件、采用什么步骤然后等待用户确认。只有在用户批准后Claude Code 才会开始修改代码。对于初学者计划模式非常实用。它能够帮助用户把“让 AI 修改代码”转化为“先审阅方案再执行修改”。自动接受模式在自动接受模式下Claude Code 可以不逐次询问用户直接编辑文件。这种方式操作速度较快但也更容易产生不必要的修改。对于刚开始使用 Claude Code 的用户不建议直接开启自动接受模式。对于新手建议将普通模式或计划模式设置为默认值。3.1.3 使用命令菜单在提示框中输入/即可打开命令菜单。命令菜单提供了多项常用功能例如查看模型。输入/model可以查看或切换当前使用的模型。如果已经按照前文配置 DeepSeek API则通常可以在这里查看当前调用的 DeepSeek 模型。压缩上下文输入/compact可以手动压缩当前对话上下文。当对话持续较长时间后Claude Code 需要读取的内容会越来越多。压缩上下文后可以减少不必要的历史信息使后续对话更加集中。查看使用情况输入/usage可以查看相关使用情况。如果已经将 Claude Code 配置为使用 DeepSeek 等第三方模型 API实际费用通常由第三方平台结算。启动远程控制输入/remote-control可以启动远程控制会话。该功能适合需要在其他设备上继续操作 Claude Code 的用户。对于第一次使用 Claude Code 的新手可以暂时跳过。点击后相关功能会在 VS Code 的集成终端中打开。3.1.4 查看上下文指示器提示框中会显示当前上下文窗口的使用情况。可以将上下文窗口理解为 Claude Code 在当前会话中能够同时参考的信息范围。用户连续提问、引用文件或让 Claude Code读取较多代码后上下文占用会逐渐增加。例如在一个较大的项目中用户连续提出请介绍项目结构。 请分析 src/ 文件夹中的主要模块。 请检查 src/utils/ 中是否存在重复代码。随着读取内容增多上下文指示器会显示占用比例不断上升。通常情况下Claude Code 会在必要时自动压缩上下文。用户也可以手动输入/compact进行压缩。对于初学者只有在对话持续较长、Claude Code 开始遗漏前文信息或者上下文占用明显较高时再使用该命令。3.1.5 开启扩展思考扩展思考用于让 Claude Code 花更多时间分析复杂问题。可以在命令菜单中输入/然后选择扩展思考相关选项。开启后Claude Code 在处理复杂任务时会展示折叠的思考块。点击思考块可以查看相关内容。按下Ctrl O可以展开或折叠当前会话中的思考块。3.1.6 使用 引用文件和文件夹Claude Code 可以读取当前项目中的文件。使用 引用可以明显提高提问的准确性。使用方法在提示框中输入然后选择目标文件或文件夹。引用文件。例如“请解释 score.py 中 calculate_average 函数的作用”。Claude Code 会读取 score.py 文件并围绕该文件回答问题。引用文件夹。如果项目中包含多个文件也可以引用文件夹“请介绍 src/ 文件夹中各个文件的作用。”文件夹名称后建议保留 /以便 Claude Code 明确识别这是一个目录。Claude Code 支持模糊匹配。即使没有输入完整文件名也可以根据部分名称进行查找。3.2 Claude Code 辅助编程第一次使用 Claude Code 时可以按照以下顺序进行练习打开 “score.py”→ 点击编辑器右上角的 Claude Code 图标→ 在提示框中输入问题→ 使用 score.py 引用文件→ 切换到计划模式→ 让 Claude Code 先给出修改方案→ 阅读并确认修改计划→ 再允许 Claude Code 修改文件→ 检查修改前后的代码差异→ 运行程序进行验证依次发送以下指令请解释 score.py 的功能。请检查 score.py 中可能存在的问题暂时不要修改代码。请为 calculate_average 函数增加空列表检查。先说明修改方案再修改代码。点击 “1 Yes”接受修改方案。通过这三个简单任务就可以初步掌握 Claude Code 提示框的基本使用方法。4. 在 PyCharm 中安装 Claude Code 插件Claude Code 通过专用插件与 JetBrains IDEs 深度集成提供交互式差异查看、代码选区上下文共享等强大功能让 AI 辅助编程无缝融入你的开发工作流。官方文档如下https://code.claude.com/docs/en/jetbrainsClaude Code 插件支持绝大多数 JetBrains IDE包括IntelliJ IDEA、PyCharm 等。需要注意的是PyCharm 插件主要用于连接 Claude Code 与 JetBrains IDE因此需要先单独安装 Claude Code安装插件后用户通常在 PyCharm 的集成终端中启动 Claude Code。可以将 PyCharm 插件理解为 Claude Code 与 IDE 之间的“连接器”。Claude Code 负责分析和修改代码PyCharm 插件则帮助 Claude Code获取当前编辑器中的代码选区、错误诊断信息并在 IDE 中展示修改前后的差异。4.1 准备工作在 PyCharm 中安装 Claude Code 插件前需要完成以下准备工作。安装 PyCharm。安装 Claude CodePyCharm 插件要求计算机中已经安装 Claude Code。如果尚未安装 Claude Code可以参考 5Claude Code 快速指南。安装测试执行claude --version验证安装是否成功。如果返回 Claude Code 版本号如 “2.1.138 (Claude Code)”说明已成功安装。4.2 安装 Claude Code 插件打开 PyCharm在顶部菜单栏中依次点击“File → Settings设置→ Plugins插件”进入插件管理页面。在搜索框中输入“Claude Code”在搜索结果中找到“Claude Code [Beta]”并确认发布者为 “Anthropic PBC”点击 “Install” 安装插件。重新启动 PyCharm。注意安装插件后要完全关闭 PyCharm再重新打开。部分情况下仅关闭设置窗口并不能使插件立即生效。重新打开 PyCharm 后再次进入“File → Settings → Plugins → Installed”。在已安装插件列表中搜索“Claude Code”。如果能够看到“Claude Code [Beta]”并且插件处于启用状态说明安装成功。配置第三方模型 API。PyCharm 插件本身没有单独的第三方模型配置页面。插件会调用计算机中已经安装的 Claude Code因此只需要为 Claude Code 配置环境变量即可。详细内容请参考 5Claude Code 快速指南 中 【3.1 Claude Code 接入第三方模型】。4.3 从 PyCharm 中启动 Claude Code完成插件安装后打开一个 PyCharm 项目。在 PyCharm 底部工具栏中点击“Terminal” 打开集成终端。如果底部没有显示 Terminal可以依次点击“View → Tool Windows → Terminal”确认终端当前位于项目根目录。例如完成安装后打开一个项目或文件后在编辑器代码区的右上角也会出现 Claude Code 的火花图标点击后会在 “Terminal” 启动 Claude Code。确认终端当前位于项目根目录然后执行claude启动 Claude Code。Claude Code 启动后会自动与当前 PyCharm 项目建立连接。此时Claude Code 可以读取项目文件并使用 PyCharm 提供的 IDE 集成功能。4.4 在 PyCharm 中使用 Claude Code打开项目或文件后在 “Terminal” 启动 Claude Code。使用测试查看模型。在 “Terminal” 输入框中输入 “/model”查看当前模型。如图所示能够看到当前使用的模型为 DeepSeek API 配置的模型说明安装和配置全部成功。使用测试分析例程。在 “Terminal” 输入框中输入 “请分析 Yolo26_cls_train_fusion1.py 代码文件”。如图所示Claude Code 能够识别指定的代码文件并对文件进行分析说明表明 Claude Code 已经能够读取当前项目。使用测试共享代码选择。在例程中选中一段代码然后在 Claude Code 中输入“请检查我在编辑器中选中的代码并说明它在哪些情况下可能报错。”如下图所示Claude Code 能够识别当前选中的函数对其进行潜在报错分析并指出 可能直接抛出异常的情况说明代码选区共享功能已经生效。需要注意的是当 Claude Code 在 JetBrains IDE 中运行并启用自动编辑权限时它可能能够修改 IDE 配置文件这些配置文件可以被你的 IDE 自动执行。这可能增加在自动编辑模式下运行 Claude Code 的风险并允许绕过 Claude Code 执行 bash 的权限提示。5. 总结通过本文的介绍我们完成了 Claude Code 与常用 IDE 的集成配置并初步了解了如何在代码编辑环境中使用 Claude Code。对于使用 VS Code 的用户可以直接在扩展市场中安装 Claude Code 扩展。对于使用 PyCharm 的用户需要先安装 Claude Code再安装 JetBrains 平台提供的 Claude Code 插件。本文以 DeepSeek 为例介绍了如何设置 API 接口地址、认证信息和模型名称。配置完成后用户仍然可以在 VS Code 或 PyCharm 中使用 Claude Code只是实际调用的模型已经切换为第三方模型。完成 IDE 集成只是使用 Claude Code 的第一步。接下来可以从简单任务开始例如解释代码、排查报错、补充注释、优化函数和增加异常处理逐步过渡到模块设计、项目重构和完整应用开发。随着使用经验不断积累Claude Code 将不再只是一个回答问题的聊天工具而会成为编程学习和项目开发中的重要助手。相关资源官方文档https://code.claude.com/docs/en/overview中文文档https://code.claude.com/docs/zh-CN/overviewGithub 开源https://github.com/anthropics/claude-code版权声明欢迎关注 youcansxidian【AI 编程】专栏转发必须注明原文链接【动手学 Claude Code】3 Claude Code 与 IDE 的集成(https://youcans.blog.csdn.net/article/details/161706486)Copyright by youcansqq.com 2026Crated2026-06

相关新闻