教程概述

虽然 Claude Code 可以在任意终端中运行，但与合适的编辑器搭配使用能大幅提升效率。本文将介绍三种主流编辑器的集成方法。

你将学到

• ✅ 编辑器选择对比
• ✅ Zed 编辑器集成（推荐）
• ✅ VSCode / Cursor 集成
• ✅ tmux 长命令会话持久化
• ✅ 实用快捷键速查表

编辑器选择对比

flowchart TD
    A[选择编辑器] --> B{主要需求?}
    B -->|极致速度| C[Zed]
    B -->|生态丰富| D[VSCode]
    B -->|AI 原生| E[Cursor]

    C --> F[✅ Rust 性能]
    C --> G[✅ Vim 模式]
    C --> H[✅ Agent Panel]

    D --> I[✅ 扩展生态]
    D --> J[✅ Claude 扩展]
    D --> K[✅ LSP 集成]

    E --> L[✅ 内置 AI]
    E --> M[✅ Claude Code 兼容]
    E --> N[✅ 多模型切换]

对比表格

Zed 编辑器集成（推荐）

为什么选择 Zed？

Zed 是由 Rust 编写的高性能编辑器，特别适合与 Claude Code 配合使用：

1. 极致速度 - 打开大文件、多文件编辑毫无压力
2. 低资源占用 - 不会与 Claude 争抢系统资源
3. Agent Panel - 内置的 Claude 集成面板
4. 原生 Vim 模式 - 无需安装插件

安装 Zed

# macOS
brew install --cask zed

# Linux
curl -f https://zed.dev/install.sh | sh

配置 Claude Code 集成

1. 启用 Agent Panel

在 Zed 中打开设置（Cmd + ,），添加：

{
  "agent": {
    "default_profile": "claude",
    "profiles": {
      "claude": {
        "name": "Claude Code",
        "tools": {
          "bash": true,
          "read": true,
          "edit": true,
          "write": true
        }
      }
    }
  }
}

2. 配置命令面板

在 keymap.json 中添加：

[
  {
    "context": "Workspace",
    "bindings": {
      "cmd-shift-r": "agent::OpenAgentPanel"
    }
  }
]

3. 启用 Following Mode

Following Mode 让你可以实时跟踪 Claude 的编辑：

# 在 Zed 右下角点击靶心图标启用
# 或使用快捷键：Cmd + Shift + F

Zed + Claude Code 工作流

sequenceDiagram
    participant U as 用户
    participant Z as Zed
    participant C as Claude Code

    U->>Z: 打开项目
    Z->>C: 启动 Claude Code
    C->>Z: Agent Panel 显示
    U->>C: 输入需求
    C->>Z: 编辑文件
    Z->>U: 实时高亮更改
    U->>Z: Ctrl+G 跳转到更改
    U->>C: 确认或修改

实用快捷键

VSCode 集成

安装 Claude Code 扩展

1. 打开 VSCode 扩展市场
2. 搜索 “Claude Code”
3. 安装官方扩展

或使用命令行：

code --install-extension anthropic.claude-code

配置选项

在 settings.json 中配置：

{
  "claude-code.enableTelemetry": false,
  "claude-code.model": "claude-sonnet-4-20250514",
  "claude-code.autoSave": true,
  "claude-code.maxTokens": 200000,
  "claude-code.terminal.integrated": true
}

使用 \ide 命令

在 Claude Code CLI 中启用 IDE 集成：

# 在 VSCode 终端中运行
\ide

这会启用：

• 文件跳转（点击文件路径直接打开）
• LSP 功能（类型检查、跳转定义）
• Diff 预览

VSCode 推荐扩展

{
  "recommendations": [
    "anthropic.claude-code",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-python.python",
    "ms-python.vscode-pylance"
  ]
}

Cursor 集成

Cursor 是 AI 原生的代码编辑器，与 Claude Code 有两种集成方式：

方式 1：终端模式

在 Cursor 内置终端中使用 Claude Code CLI：

# 打开 Cursor 终端
Ctrl + `

# 运行 Claude Code
claude

方式 2：扩展模式

安装 Claude Code 扩展，获得更深入的集成：

1. 打开 Cursor 设置
2. 导航到 Extensions
3. 搜索并安装 “Claude Code”

Cursor 多模型切换

Cursor 支持在不同 AI 模型间切换：

# Cursor 内置模型
- Claude 3.5 Sonnet
- GPT-4o
- Cursor Small（快速）

# 结合 Claude Code CLI
- Claude Opus 4（深层推理）
- Claude Sonnet 4（默认）

tmux 会话持久化

为什么需要 tmux？

Claude Code 经常执行长时间运行的命令（npm install、测试套件、构建）。tmux 可以：

1. 保持会话 - 关闭终端后命令继续运行
2. 分离/重连 - 随时查看进度
3. 多窗口 - 并行运行多个任务

tmux 基础配置

创建 ~/.tmux.conf：

# 使用 Ctrl+a 作为前缀键
set -g prefix C-a

# 启用鼠标支持
set -g mouse on

# 分屏快捷键
bind | split-window -h
bind - split-window -v

# 快速重载配置
bind r source-file ~/.tmux.conf

# 状态栏美化
set -g status-bg black
set -g status-fg white

Claude Code + tmux 工作流

# 1. 创建专用会话
tmux new -s claude

# 2. 在会话中启动 Claude Code
claude

# 3. 执行长时间任务
# Claude 会自动在 tmux 中运行

# 4. 分离会话（让任务继续运行）
Ctrl+a d

# 5. 稍后重新连接
tmux attach -t claude

在 Hooks 中集成 tmux

创建 tmux 提醒 Hook：

{
  "PreToolUse": [
    {
      "matcher": "tool == \"Bash\" && tool_input.command matches \"(npm|pnpm|yarn|cargo|pytest)\"",
      "hooks": [
        {
          "type": "command",
          "command": "if [ -z \"$TMUX\" ]; then echo '[Hook] 考虑使用 tmux 以保持会话持久' >&2; fi"
        }
      ]
    }
  ]
}

分屏工作流

推荐布局

flowchart LR
    subgraph 左屏
        A[编辑器<br/>Zed/VSCode]
    end

    subgraph 右屏
        B[Claude Code CLI] --> C[tmux 会话]
    end

    A <--> B

终端分屏示例

# 创建分屏布局
tmux new -s dev -d
tmux split-window -h -t dev
tmux send-keys -t dev:0.0 'claude' Enter
tmux send-keys -t dev:0.1 'npm run dev' Enter
tmux attach -t dev

快捷键速查表

Zed

VSCode

tmux

最佳实践

1. 选择适合你的编辑器

追求极致速度 → Zed
需要丰富扩展 → VSCode
AI 原生工作流 → Cursor

2. 启用自动保存

// 确保编辑器启用自动保存
{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

3. 使用 Git 集成

在提交前审查 Claude 的更改：

# 查看更改
git diff

# 查看文件状态
git status

4. 保持编辑器和 CLI 同步

# 在编辑器中启用了文件监听
# 确保编辑器自动重载 Claude 修改的文件

小结

关键要点

• ✅ Zed 是 Claude Code 的最佳搭档（性能、Agent Panel、Vim 模式）
• ✅ VSCode 和 Cursor 通过扩展支持 Claude Code
• ✅ tmux 保持长时间任务的会话持久化
• ✅ 分屏工作流提升效率

系列导航：

• ← 上一篇：教程 2：Skills 与 Commands - 打造你的 AI 工作流
• → 下一篇：教程 4：Hooks - 自动化触发器完全指南
• 返回：教程系列索引