第 11 章：IDE 集成与多端协作

在前十章中，你已经掌握了 Claude Code 的核心功能，从基础命令到复杂的自动化工作流。本章将介绍 Claude Code 的多端生态系统，包括 IDE 集成、远程控制和跨平台协作。这些功能让你可以在不同设备间无缝切换工作，提高开发效率。

11.1 Claude Code 多端生态

Claude Code 不是一个简单的终端工具，而是一个完整的跨平台开发助手生态系统：

CLI（终端） - 最原始的命令行界面，适合服务器环境、脚本自动化和重度键盘用户
Desktop（桌面应用） - 原生 macOS 和 Windows 应用，提供图形化界面和系统级集成
Web（claude.ai/code） - 浏览器访问，无需安装，适合临时使用和轻量级任务
IDE（VS Code/JetBrains） - 集成到主流开发环境中，提供实时文件上下文和内联建议

各端特点和使用场景：

平台	特点	使用场景
CLI	无 GUI 开销、可脚本化	服务器开发、自动化脚本、远程 SSH 会话
Desktop	系统通知、托盘图标、原生体验	本地开发、长时间工作、需要系统级集成
Web	无需安装、跨平台	快速尝试、临时访问、不常用设备
IDE	实时文件上下文、内联建议、调试器集成	日常编码、调试、需要 IDE 集成的场景

11.2 `/ide` — 管理 IDE 集成

语法

/ide [install|connect|disconnect]

功能说明

管理 VS Code 和 JetBrains IDE 的集成，显示当前连接状态和可用扩展。

实际使用示例

查看 IDE 集成状态

/ide

输出示例：

IDE Integrations
================

VS Code:
  Extension: Claude Code (anthropic.claude-code)
  Status: Not connected
  Install: https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code

JetBrains:
  Plugin: Claude Code
  Status: Not connected
  Install: https://plugins.jetbrains.com/plugin/23786-claude-code

To connect an IDE:
  1. Install the extension/plugin from the link above
  2. Open the IDE
  3. Claude Code will detect and connect automatically

连接 VS Code

/ide connect vscode

断开所有 IDE 连接

/ide disconnect

注意事项和技巧

VS Code 扩展安装：在 VS Code 中搜索 "Claude Code" 或直接访问扩展市场链接安装
JetBrains 插件安装：支持 IntelliJ IDEA、PyCharm、WebStorm 等 JetBrains 全家桶
IDE 内使用优势：
- 实时文件上下文：Claude 可以看到你当前打开的文件
- 内联建议：直接在编辑器中显示 AI 建议
- 调试器集成：在断点处获取变量分析
- 快捷键支持：使用熟悉的编辑器快捷键调用 Claude
自动连接：安装扩展后，IDE 会自动检测并连接到 Claude Code CLI 会话

11.3 `/remote-control` — 远程控制终端

语法

/remote-control [enable|disable]
/remote-control status

别名

/rc

功能说明

使当前终端会话可以从 claude.ai/code 网页版远程控制，允许你在移动设备上继续工作。

实际使用示例

启用远程控制

/remote-control enable

输出示例：

Remote control enabled for this session

To control this session:
  1. Open https://claude.ai/code in your browser
  2. This session will appear in the session selector
  3. Click to connect and send commands

Session ID: abc123-def456-ghi789
Security warning: Only use this on trusted networks

查看远程控制状态

/remote-control status

禁用远程控制

/remote-control disable

注意事项和技巧

使用场景：
- 在办公室用电脑开始工作
- 回家路上用手机查看进度
- 在平板上审查代码并发送指令
- 紧急修复时从移动设备快速响应
安全注意事项：
- 仅在可信网络中启用（公司 VPN、家庭网络）
- 公共 Wi-Fi 环境下建议禁用
- 定期检查远程控制状态
会话保持：远程控制会保持连接直到手动禁用或终端关闭
指令延迟：移动设备发出的指令会有轻微网络延迟

11.4 `/teleport` — 拉取网页会话

语法

/teleport
/tp

别名

/tp

功能说明

将 claude.ai/code 网页版的会话拉入当前终端，保留完整的对话历史和上下文。

实际使用示例

拉取网页会话到终端

/teleport

输出示例：

Opening session selector...

Please select a session to teleport:
  [1] my-pomodoro: Add timer settings (10 messages)
  [2] my-pomodoro: Fix notification bug (15 messages)
  [3] general: Python debugging (5 messages)

Enter session number (or 'cancel'): 1

Teleported session: "Add timer settings"
Restoring 10 messages from claude.ai/code

使用别名

/tp

注意事项和技巧

需要订阅：此功能需要 claude.ai 订阅账号
典型工作流：
- 在浏览器上开始对话和探索
- 需要访问本地文件时 teleport 到终端
- 在终端完成文件操作
- 继续在浏览器上审查结果
会话保留：Teleport 后，网页版会话仍然保持，终端和网页可以同步
文件上下文：Teleport 时会话的文件上下文会被传递到终端
网络要求：需要稳定的互联网连接

11.5 `/desktop` — 切换桌面应用

语法

/desktop
/desktop open
/desktop status

别名

/app

功能说明

将当前终端会话无缝切换到 Claude Code Desktop 应用，提供图形化界面和系统级集成。

实际使用示例

切换到桌面应用

/desktop

输出示例：

Opening Claude Code Desktop...

Session transferred successfully.
Desktop app will open and continue this conversation.
Terminal session will remain active as backup.

Features available in Desktop:
  - System notifications
  - Tray icon for quick access
  - Native window management
  - Better keyboard shortcuts

检查桌面应用状态

/desktop status

使用别名

/app

注意事项和技巧

平台支持：仅支持 macOS 和 Windows，Linux 不可用
Desktop 额外功能：
- 系统通知：长时间任务完成时弹出通知
- 托盘图标：最小化到系统托盘，快速访问
- 窗口管理：原生窗口操作，支持分屏和全屏
- 快捷键：更多自定义快捷键选项
会话同步：终端和桌面应用共享会话状态
后台运行：Desktop 可以最小化到后台继续工作
启动速度：Desktop 应用启动比终端略慢，但提供更好的用户体验

11.6 其他集成命令

`/chrome` — 配置 Chrome 扩展

语法

/chrome

功能说明 配置 Claude in Chrome 浏览器扩展，允许在网页上使用 Claude Code。

实际使用示例

/chrome

输出示例：

Claude in Chrome Extension
=========================

Extension URL: https://chrome.google.com/webstore/detail/claude-code/[extension-id]

Features:
  - Right-click to send webpage to Claude
  - Inline AI suggestions in text areas
  - Summarize and analyze web content

注意事项：

仅支持 Chrome 和 Chromium 浏览器
需要 Chrome 扩展商店访问权限

`/mobile` — 下载移动应用

语法

/mobile
/ios
/android

功能说明 显示移动应用下载二维码，支持 iOS 和 Android 平台。

实际使用示例

/mobile

输出示例：

Claude Code Mobile Apps
=======================

iOS:
  [QR Code]
  Scan to download from App Store
  Requires iOS 14.0 or later

Android:
  [QR Code]
  Scan to download from Google Play
  Requires Android 8.0 or later

Features:
  - Full terminal access
  - File browser and editor
  - Project synchronization
  - Voice input support

别名使用

/ios    # 仅显示 iOS 二维码
/android # 仅显示 Android 二维码

注意事项：

需要移动设备摄像头扫描二维码
应用需要 Claude.ai 账户登录

`/voice` — 语音听写切换

语法

/voice hold
/voice tap
/voice off

功能说明 切换语音输入模式，需要 Claude.ai 账户和相应权限。

实际使用示例

按住说话模式

/voice hold

功能：按住按键时开始录音，松开时发送

点击切换模式

/voice tap

功能：点击开始/停止录音

关闭语音输入

/voice off

注意事项：

需要麦克风权限
需要稳定的网络连接
某些平台可能不支持语音功能
语音识别准确率取决于环境噪音和口音

`/terminal-setup` — 配置终端快捷键

语法

/terminal-setup

功能说明 配置终端快捷键，如 Shift+Enter 发送多行命令。此命令仅在支持的终端中可见（VS Code 终端、Cursor、Zed 等）。

实际使用示例

/terminal-setup

输出示例：

Terminal Setup
==============

This terminal supports Claude Code integration.

Available shortcuts:
  - Shift+Enter: Send multi-line command
  - Ctrl+C: Cancel current command
  - Ctrl+L: Clear screen

To enable these shortcuts:
  1. Open terminal settings
  2. Enable "Use integrated terminal"
  3. Reload the terminal

Current status: Shortcuts enabled

注意事项：

仅在支持集成功能的终端中可见
不同终端的快捷键可能不同
某些快捷键可能与系统或编辑器冲突

11.7 动手做：多端协作

让我们通过一个实际例子来体验 Claude Code 的多端协作能力。我们将使用 VS Code IDE 集成和远程控制功能来优化番茄钟的样式。

步骤 1：连接 VS Code IDE

首先，让我们查看并连接 VS Code 集成：

/ide

根据输出信息，在 VS Code 中安装 "Claude Code" 扩展，然后重启 VS Code。

步骤 2：在 IDE 中编辑样式

在 VS Code 中打开项目，找到样式文件并打开：

/Users/eric/work/my-pomodoro/src/styles/timer.css

在 VS Code 中，你现在可以使用 Claude Code 的内联建议功能。让我们优化番茄钟的样式：

在 IDE 中对 Claude 说：

优化计时器显示样式，使其更加现代和视觉吸引力：
1. 使用渐变色背景
2. 添加阴影效果
3. 改进数字字体和大小
4. 添加进度圆环

Claude 会在 VS Code 中直接提供内联建议和修改。

步骤 3：启用远程控制

现在启用远程控制，这样我们可以从其他设备继续工作：

/remote-control enable

记录输出的会话 ID。

步骤 4：从网页发送指令

在手机或平板浏览器上打开 https://claude.ai/code，找到你的会话，然后发送指令：

调整渐变色为更温暖的橙色系，添加动画效果使圆环更生动

Claude 会在你的终端中执行这些修改，VS Code 中的文件会实时更新。

步骤 5：（可选）启用语音输入

如果你有支持的设备和账户，可以启用语音输入：

/voice tap

然后使用语音指令：

添加开始和暂停按钮，按钮应该有悬停效果

验证结果

在 VS Code 中检查样式文件的修改
在浏览器中刷新番茄钟应用查看效果
使用 /remote-control status 确认远程连接状态

清理

完成后，禁用远程控制：

/remote-control disable

关闭语音输入：

/voice off

本章小结

本章介绍了 Claude Code 的多端生态系统和集成功能：

多端生态：CLI、Desktop、Web 和 IDE 四种平台各有优势，适合不同场景
IDE 集成：通过 /ide 命令管理 VS Code 和 JetBrains 集成，提供实时文件上下文和内联建议
远程控制：使用 /remote-control 从网页或移动设备控制终端会话，实现跨设备协作
会话迁移：通过 /teleport 将网页会话拉入终端，保持对话历史和上下文
桌面应用：使用 /desktop 切换到原生应用，享受系统级集成和更好的用户体验
其他集成：Chrome 扩展、移动应用、语音输入和终端快捷键配置
多端协作：通过实际练习体验了在 VS Code 中编辑样式并从远程设备发送指令的完整工作流

通过掌握这些功能，你可以构建一个无缝的跨平台开发工作流，在任何设备上都能高效地与 Claude Code 协作。

下一章，我们将学习如何构建和分发自己的 Claude Code 技能和扩展，进一步定制和增强你的开发体验。

11.1 Claude Code 多端生态

11.2 /ide — 管理 IDE 集成

语法

功能说明

实际使用示例

注意事项和技巧

11.3 /remote-control — 远程控制终端

语法

别名

功能说明

实际使用示例

注意事项和技巧

11.4 /teleport — 拉取网页会话

语法

别名

功能说明

实际使用示例

注意事项和技巧

11.5 /desktop — 切换桌面应用

语法

别名

功能说明

实际使用示例

注意事项和技巧

11.6 其他集成命令

/chrome — 配置 Chrome 扩展

/mobile — 下载移动应用

/voice — 语音听写切换

/terminal-setup — 配置终端快捷键

11.7 动手做：多端协作

步骤 1：连接 VS Code IDE

步骤 2：在 IDE 中编辑样式

步骤 3：启用远程控制

步骤 4：从网页发送指令

步骤 5：（可选）启用语音输入

验证结果

清理

本章小结

11.2 `/ide` — 管理 IDE 集成

11.3 `/remote-control` — 远程控制终端

11.4 `/teleport` — 拉取网页会话

11.5 `/desktop` — 切换桌面应用

`/chrome` — 配置 Chrome 扩展

`/mobile` — 下载移动应用

`/voice` — 语音听写切换

`/terminal-setup` — 配置终端快捷键