EnglishРусский中文

为什么需要这个#

终端是一个强大的工具，但很多人更喜欢在图形化代码编辑器中工作，在那里一切都很直观：左侧是文件，中间是代码，Claude Code 在侧面板上。在本课中，我们将在两个最流行的环境——VS Code 和 JetBrains 中配置 Claude Code。

第一部分：Claude Code 在 VS Code 中#

什么是 VS Code#

VS Code（Visual Studio Code） 是微软推出的免费代码编辑器。全球最流行。可在 code.visualstudio.com 下载。

不要将 VS Code 与 Visual Studio 混淆——它们是不同的程序。VS Code 更轻量、更简单。

安装扩展#

扩展（extension） 是为 VS Code 添加新功能的附加组件。

方式1：通过链接#

点击链接——VS Code 会打开并提议安装：

方式2：通过 VS Code#

  1. 打开 VS Code
  2. 按 Cmd+Shift+X（Mac）或 Ctrl+Shift+X（Windows/Linux）——打开扩展面板
  3. 在搜索栏中输入 Claude Code
  4. 点击 Install（安装）

方式3：通过 Command Palette#

  1. 按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）
  2. 输入 “Claude Code”
  3. 选择 Open in New Tab

Command Palette 是 VS Code 中的快速命令搜索。可以把它想象成"操作搜索栏"。

开始使用#

安装后：

  1. 您会看到 Claude Code 面板（通常在右侧）
  2. 首次使用时 VS Code 会要求您登录账户
  3. 输入您的信息——一切就绪！

VS Code 中的关键功能#

内联 diff（代码中直接显示更改）#

当 Claude 提议更改时，您会直接在文件中看到——绿色标记添加的内容，红色标记删除的内容。比终端更直观。

内联 diff 是在文件内部直接显示更改，而不是在单独的窗口中。

@-文件提及#

在 Claude Code 输入框中输入 @ 并开始输入文件名：

解释 @auth.js 中的逻辑

Claude 会自动定位到需要的文件。支持模糊搜索——不必输入完整名称。

可以提及文件夹（末尾加 /）：

@src/components/ 里有什么？

代码选择#

  1. 在编辑器中用鼠标选择一段代码
  2. Claude 会自动看到您选择的内容
  3. 写下问题——例如：这段代码是做什么的？

快捷键 Option+K（Mac）/ Alt+K（Windows/Linux）可以插入带行号的代码引用。

工作模式#

在输入框底部有模式指示器：

  • Normal — Claude 在每个操作前征求许可
  • Plan — Claude 先描述计划，然后等待批准
  • Auto-accept — Claude 不需确认即可修改

点击指示器即可切换模式。

对话历史#

点击 Claude Code 面板顶部的下拉菜单——会打开过去对话的列表。可以按关键词搜索或按日期从列表中选择。

多个对话#

可以同时打开多个 Claude Code 标签页——通过 Command Palette → Open in New Tab。每个标签页是独立的对话。

第二部分：Claude Code 在 JetBrains 中#

什么是 JetBrains#

JetBrains 是一家制作专业代码编辑器的公司：

IDE 适用语言
IntelliJ IDEA Java、Kotlin
PyCharm Python
WebStorm JavaScript、TypeScript
PhpStorm PHP
GoLand Go
Android Studio Android 应用

IDE（Integrated Development Environment，集成开发环境）本质上是带有额外工具的高级代码编辑器。

安装插件#

  1. 打开您的 JetBrains IDE
  2. 进入 Settings（设置）→ Plugins（插件）
  3. 在市场中搜索 Claude Code
  4. 点击 Install（安装）
  5. 重启 IDE

或者直接从 JetBrains Marketplace 安装。

插件运行需要已安装 Claude Code CLI（第2课）。

JetBrains 中的功能#

快速启动#

按 Cmd+Esc（Mac）或 Ctrl+Esc（Windows/Linux）——打开 Claude Code 面板。

查看更改#

代码更改使用 JetBrains 标准的 diff 查看器显示——熟悉且方便。

选择上下文#

编辑器中的当前选择和打开的文件会自动传递给 Claude——无需向它解释您在看什么。

文件引用#

按 Cmd+Option+K（Mac）或 Alt+Ctrl+K（Windows/Linux）可以插入格式为 @File#L1-99 的文件引用。

诊断#

IDE 中的错误（语法错误、linter 警告）会自动传递给 Claude Code。它能看到与您相同的错误。

从外部终端工作#

如果您在终端（非内置终端）中运行 Claude Code，可以将其连接到 IDE：

claude
> /ide

/ide 命令会将终端 Claude Code 会话与您的 JetBrains IDE 关联。

如何选择：终端、VS Code 还是 JetBrains？#

标准 终端 VS Code JetBrains
简单性 中等 高 中等
直观性 低 高 高
速度 高 高 中等
适合新手 ⭐⭐ ⭐⭐⭐ ⭐⭐
IDE 费用 免费 免费 付费*

*JetBrains 的 IntelliJ IDEA 和 PyCharm 有免费版本（Community Edition）。

初学者推荐： 从 VS Code 开始——免费、直观，Claude Code 在其中运行出色。

练习#

在 VS Code 中：#

  1. 安装 Claude Code 扩展
  2. 打开任意项目
  3. 在 Claude 面板中输入：解释这个项目
  4. 选择一段代码并问：这是做什么的？
  5. 使用 @ 提及文件

在 JetBrains 中：#

  1. 安装 Claude Code 插件
  2. 按 Cmd+Esc / Ctrl+Esc
  3. 尝试相同的任务

课程总结#

✅ 在 VS Code 中，Claude Code 作为扩展几次点击即可安装
✅ 内联 diff 直接在文件中显示更改——直观且清晰
✅ @-提及可以让 Claude 关注特定文件和文件夹
✅ 在 JetBrains 中，Claude Code 作为插件运行，支持 diff 和诊断
✅ 初学者最佳选择是 VS Code（免费 + 方便的界面）

🎉 恭喜！#

您已完成第1级：初学者的全部6课。现在您能够：

  • 理解 Claude Code 是什么以及它与普通聊天机器人有何不同
  • 在任何操作系统上安装 Claude Code
  • 登录账户并开始工作
  • 进行对话，接受和拒绝更改
  • 使用代码、Git 和命令
  • 在 VS Code 和 JetBrains 中使用 Claude Code

下一步： 第2级——进阶用户（即将推出！）

Backward 第5课：代码开发 第2级：中级 Forward