Tutorial ｜集成 Claude Code 到 IDE¶

难度：⭐⭐ 时间：~2h 前置：了解 Bridge 协议产物：IDE ↔ Claude Code 双向集成

1. IDE 集成是什么¶

IDE 集成 = Claude Code 与 IDE 双向通信 - IDE 选中文本 → Claude Code 接收 - Claude Code 输出 → IDE 显示 - 命令面板 / 快捷键 - 文件 diff 预览

2 种集成方式： - MCP server —— 通用 - Bridge 协议 —— Claude Code 特有

2. 3 种 IDE 集成模式¶

2.1 通用 MCP¶

# 在 IDE 中启动 MCP server
# 提供 read_file / edit_file / get_diagnostics 等工具

MCP —— 任何 IDE。

2.2 Bridge 协议¶

# 启动 Claude Code in bridge mode
claude --bridge

# IDE 连上 localhost:port

Bridge —— Claude Code IDE 模式。

2.3 嵌入式¶

# IDE 嵌入 Claude Code (vscode extension)

嵌入 —— VSCode extension。

3. Bridge 模式详解¶

3.1 启动¶

claude --remote-control   # 启动 server
# 或
claude --bridge           # 推测

server 模式。

3.2 协议¶

JSON-RPC over WebSocket（推测）： - IDE → Claude Code: file_selected / selection_changed / file_saved - Claude Code → IDE: open_file / show_diff / display_message

双向。

3.3 IDE 集成例子¶

VSCode： - 装 extension - 启动 Claude Code in bridge - Extension 自动连

JetBrains： - 装 plugin - 配置 Claude Code 路径 - 配 bridge URL

3 IDE。

4. MCP IDE Server 实战¶

4.1 server 框架¶

import { Server } from '@modelcontextprotocol/sdk/server/index.js'
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'

const server = new Server(
  { name: 'ide-mcp', version: '1.0.0' },
  { capabilities: { tools: {} } }
)

server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [
    {
      name: 'read_file',
      description: 'Read the current file in IDE',
      inputSchema: {
        type: 'object',
        properties: { path: { type: 'string' } },
        required: ['path'],
      },
    },
    {
      name: 'insert_text',
      description: 'Insert text at cursor',
      inputSchema: {
        type: 'object',
        properties: {
          text: { type: 'string' },
          position: { type: 'number' },
        },
        required: ['text', 'position'],
      },
    },
    {
      name: 'get_diagnostics',
      description: 'Get diagnostics (errors/warnings) for current file',
      inputSchema: { type: 'object', properties: {} },
    },
  ],
}))

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  // IDE RPC
})

3 工具。

4.2 接入 Claude Code¶

claude mcp add --transport stdio -- node /path/to/ide-mcp.js

添加 MCP。

5. 实战：VSCode 集成¶

5.1 安装¶

# 在 VSCode 扩展市场
# 搜索 "Claude Code" 安装

扩展。

5.2 配置¶

// ~/.claude.json 或项目级
{
  "ide": {
    "autoConnect": true,
    "selection": {
      "autoSend": true
    }
  }
}

配置。

5.3 使用¶

# 1. 在 VSCode 中打开文件
# 2. 选中文本
# 3. Cmd+Shift+P → "Claude Code: Add Selection"
# 4. 选中文本会作为 @ 提及传给 Claude Code

4 步。

6. 实战：JetBrains 集成¶

6.1 安装¶

# Settings → Plugins → Marketplace
# 搜索 "Claude Code" 安装

plugin。

6.2 配置¶

Settings → Tools → Claude Code
- Binary: /usr/local/bin/claude
- Bridge: enabled

配置。

6.3 使用¶

# 1. 选中文本
# 2. Right-click → "Send to Claude Code"
# 3. 在 Claude Code REPL 中继续

3 步。

7. 8 个 IDE 集成特性¶

7.1 选中 → @ 提及¶

# IDE 选中文本
# Claude Code 自动加 @file:line 引用

自动。

7.2 文件 diff 预览¶

# Claude Code 用 Edit 后
# IDE 显示 diff preview（类似 git diff）

diff。

7.3 错误高亮¶

# Claude Code 写错代码
# IDE 立即显示 squiggles

高亮。

7.4 跳转定义¶

# Claude Code 提到 foo()
# IDE 支持 go-to-definition

跳转。

7.5 文档悬浮¶

# 鼠标悬停
# IDE 显示 type info

hover。

7.6 自动补全¶

# Claude Code 写代码时
# IDE 推断下一个 token

补全。

7.7 终端集成¶

# Claude Code 跑的命令
# IDE 终端显示

终端。

7.8 调试器集成¶

# Claude Code 设断点
# IDE 调试器响应

debug。

8. Bridge 协议详解¶

8.1 消息类型¶

// IDE → Claude Code
type IDEToCC = 
  | { type: 'selection_changed', file: string, line: number, text: string }
  | { type: 'file_saved', file: string }
  | { type: 'file_opened', file: string }
  | { type: 'diagnostics', file: string, errors: Diagnostic[] }

// Claude Code → IDE
type CCToIDE =
  | { type: 'open_file', file: string }
  | { type: 'show_diff', file: string, before: string, after: string }
  | { type: 'display_message', severity: 'info' | 'warn' | 'error', text: string }
  | { type: 'apply_edit', file: string, range: Range, text: string }

8 类型。

8.2 WebSocket / JSON-RPC¶

// 推测
const ws = new WebSocket('ws://localhost:port')
ws.on('message', (data) => {
  const msg: IDEToCC | CCToIDE = JSON.parse(data)
  handle(msg)
})

WS。

8.3 安全¶

localhost only
auth token
TLS（推测）

3 措施。

9. 5 个配置选项¶

9.1 autoConnect¶

{ "ide": { "autoConnect": true } }

自动连。

9.2 autoSend¶

{ "ide": { "selection": { "autoSend": true } } }

自动发送。

9.3 IDE 工具白名单¶

{ "ide": { "allowedTools": ["read_file", "get_diagnostics"] } }

白名单。

9.4 桥接端口¶

{ "ide": { "port": 7890 } }

端口。

9.5 认证 token¶

{ "ide": { "authToken": "..." } }

token。

10. 4 步调试 IDE 集成¶

10.1 看连接¶

# Claude Code 中
> /ide status

状态。

10.2 重启¶

# Claude Code
> /ide reconnect

重连。

10.3 debug¶

claude --debug ide