Chapter 11: IDE 集成与多端工作流

学习目标

VS Code 扩展完整工作流：inline diffs、@-mentions、并行对话
Remote Control：在工作站启动任务，通勤时用手机继续监控
Desktop App：设置每日自动 PR Review 摘要
Teleport：将云端对话拉到本地终端
各界面的适用场景及互补关系

附录链接：A15 Claude Code 内部机制解释了驱动所有五个界面的 harness 循环、会话管理和压缩机制。另见 A04 Agent 架构了解跨界面工具调用背后的 ReAct 模式。

Claude Code 生态

Claude Code 不仅是终端工具，它运行在五个界面上，各有所长：

界面              优势                          适合
-----------       -------------------------    -------------------------
终端 CLI          全部功能、可脚本化             重度开发、CI/CD
VS Code           Inline diffs、文件树          重构、代码审查
JetBrains         语言感知的重构                 Java/Kotlin/Python 项目
Desktop App       可视化审查、定时任务            监控、每日摘要
Mobile (Remote)   监控、审批                     移动中审查

会话移动性

会话不会锁定在单个设备上。三种机制可以转移它们：

机制	方向	使用方式
Remote Control	本地终端到手机/Web	会话中输入 `/remote-control`，扫码
Teleport	云端 (claude.ai) 到本地终端	`/teleport` 将会话拉到本地
/desktop	终端到 Desktop App	交给 Desktop 做可视化审查

Demo 28: VS Code 重构工作流

VS Code Refactoring Workflow

Intermediate~20 min

场景

你有一个 2,000 行的 Express API，所有路由处理函数都内联在 server.ts 中。你需要将它们提取到独立的 controller 文件中，添加正确的 TypeScript 类型，并更新所有导入。这正是 VS Code inline diff 视图发挥优势的任务。

第 1 步：打开项目并启动 Claude

在安装了 Claude Code 扩展的 VS Code 中打开项目。打开 Claude Code 面板（Cmd+Shift+P，然后搜索 "Claude Code: Open Panel"，或点击侧边栏的 Claude 图标）。

面板打开后的样子：

terminal

╭─────────────────────────────────────────────────────╮
│  Claude Code (VS Code Extension)                     │
│  Model: claude-sonnet-4-6                            │
│  Project: my-express-api                             │
│  Files: 47 TypeScript files detected                 │
│                                                      │
│  Type a message or use @ to reference files...       │
╰─────────────────────────────────────────────────────╯

第 2 步：使用 @-mentions 引用文件

在 Claude Code 面板中，使用 @-mentions 输入你的提示，给 Claude 精确的上下文：

Look at @server.ts -- it has all route handlers inline. I need you to:

1. Create a controllers/ directory
2. Extract each route group into its own controller file:
   - controllers/users.controller.ts (all /api/users/* handlers)
   - controllers/orders.controller.ts (all /api/orders/* handlers)
   - controllers/products.controller.ts (all /api/products/* handlers)
3. Each controller should export typed handler functions using Express.RequestHandler
4. Update server.ts to import and use the new controllers
5. Make sure @tsconfig.json paths are compatible

Do NOT change any business logic. This is a pure structural refactor.

第 3 步：用 Inline Diffs 审查

Claude 会提出修改建议。在 VS Code 中，你会看到 inline diffs——绿色表示新增，红色表示删除——直接在编辑器标签页中显示。这与在终端中审查变更有本质区别：

terminal

  EDITOR TAB: server.ts (modified)
  ─────────────────────────────────────
  Line 1     import express from 'express';
- Line 2     import { Pool } from 'pg';
- Line 3     import bcrypt from 'bcrypt';
+ Line 2     import { usersRouter } from './controllers/users.controller';
+ Line 3     import { ordersRouter } from './controllers/orders.controller';
+ Line 4     import { productsRouter } from './controllers/products.controller';
  ...
- Line 45    app.get('/api/users', async (req, res) => {
- Line 46      const users = await pool.query('SELECT * FROM users');
- Line 47      res.json(users.rows);
- Line 48    });
  ...
+ Line 12    app.use('/api/users', usersRouter);
+ Line 13    app.use('/api/orders', ordersRouter);
+ Line 14    app.use('/api/products', productsRouter);

  NEW FILE: controllers/users.controller.ts
  ─────────────────────────────────────
+ Line 1     import { Router, RequestHandler } from 'express';
+ Line 2     import { Pool } from 'pg';
+ Line 3
+ Line 4     const router = Router();
+ Line 5
+ Line 6     const getUsers: RequestHandler = async (req, res) => {
+ Line 7       const pool = req.app.locals.pool as Pool;
+ Line 8       const users = await pool.query('SELECT * FROM users');
+ Line 9       res.json(users.rows);
+ Line 10    };
  ...

你可以看到每个变更周围的完整文件上下文
你可以接受或拒绝单个代码块
文件树显示哪些文件被创建或修改
随着变更的应用，TypeScript 错误实时更新

接受/拒绝工作流：

点击勾号接受修改
点击 X 拒绝
如果你拒绝了一个代码块，在聊天中告诉 Claude 原因："users controller 缺少 auth middleware 的导入"

terminal

  Claude Code Panel:
  ─────────────────────────────────────
  You rejected the change to controllers/users.controller.ts.
  Tell Claude why:

  > The users controller is missing the auth middleware import.
  > All /api/users/* routes need authMiddleware applied.

  Claude: Got it. I'll add the auth middleware import and apply it to
  all user routes. Let me update the controller...

  [Proposing changes to controllers/users.controller.ts]
  + Line 2     import { authMiddleware } from '../middleware/auth';
  + Line 7     router.use(authMiddleware);

第 4 步：并行开多个对话

当 Claude 在处理 controller 提取时，打开第二个对话面板（点击 + 图标），让它做独立的工作：

@package.json -- add @types/express if it's not already there, and update
the "scripts" section to include a "typecheck" script that runs tsc --noEmit

两个对话同时运行，各有独立的上下文，互不干扰。

刚才发生了什么？

Read

server.ts via @-mention

↓

Read

tsconfig.json via @-mention

↓

Write

controllers/users.controller.ts

↓

Write

controllers/orders.controller.ts

↓

Write

controllers/products.controller.ts

↓

Edit

server.ts

相比终端的优势

能力	终端	VS Code
看到变更周围的完整文件上下文	不能，只看到 diff	能，内联在编辑器中
接受/拒绝单个代码块	`/accept` 或 `/reject` 全部	逐块控制
实时类型检查	需要手动运行 `tsc`	自动
多个并行对话	每个终端需要 `claude --session-id`	点击 + 即可
文件树感知	在文本中描述路径	点击 @-mention

Demo 29: Remote Control -- 在公司开始，通勤时用手机监控

Remote Control -- Monitor From Your Phone

Intermediate~15 min

场景

下午 5:45。你有一个大型迁移任务——把 80 个 React class component 转换为使用 hooks 的函数式组件。你在离开前在工作站启动任务，然后通勤时在手机上监控进度并审批决策。

第 1 步：在工作站启动任务

bash

claude --permission-mode acceptEdits

# 在会话中：
> I need to convert all React class components in src/components/ to functional
> components using hooks. There are about 80 files. Rules:
>
> 1. Convert componentDidMount to useEffect
> 2. Convert componentDidUpdate to useEffect with dependencies
> 3. Convert componentWillUnmount to useEffect cleanup
> 4. Convert this.state/this.setState to useState
> 5. Preserve all existing prop types
> 6. Run npm test after every 10 files and stop if tests fail
>
> Start with the smallest files first to build confidence.

Claude 开始工作时你看到的：

terminal

> [Your prompt above]

I'll start converting the smallest components first. Let me find all
class components and sort them by file size.

[Auto-approved] Grep "extends React.Component" in src/components/**
  Found 82 class components

[Auto-approved] Read src/components/Spinner.tsx (12 lines)
[Auto-approved] Edit src/components/Spinner.tsx
  Converted: class Spinner -> function Spinner with useState

[Auto-approved] Read src/components/Badge.tsx (18 lines)
[Auto-approved] Edit src/components/Badge.tsx
  Converted: class Badge -> function Badge (stateless, simplified)

[Auto-approved] Read src/components/Toggle.tsx (24 lines)
[Auto-approved] Edit src/components/Toggle.tsx
  Converted: class Toggle -> function Toggle with useState

Progress: 3/82 components converted...

第 2 步：启用 Remote Control

当 Claude 在工作时，输入：

/remote-control

Claude 显示一个二维码和一个 URL：

terminal

> /remote-control

╭───────────────────────────────────────────────────────╮
│                                                       │
│   Remote Control Enabled                              │
│                                                       │
│   Scan the QR code or visit:                          │
│   https://claude.ai/remote/sess_abc123xyz             │
│                                                       │
│   [QR CODE DISPLAYED HERE]                            │
│                                                       │
│   This session will remain active on your machine.    │
│   You can monitor and send messages from any device.  │
│                                                       │
╰───────────────────────────────────────────────────────╯

第 3 步：在手机上打开

扫描二维码或在手机上输入 URL。你现在可以看到：

Claude 转换文件时的实时输出
任何等待审批的权限提示（在 acceptEdits 模式下，这些只有不在 allow 列表中的 shell 命令）
可以输入消息重新指导 Claude

第 4 步：监控并介入

从手机上，你看到 Claude 已经转换了 30 个文件并遇到了测试失败：

terminal

[Auto-approved] Edit src/components/UserProfile.tsx
  Converting class UserProfile to function...

[Auto-approved] Bash npm test

  FAIL  tests/components/UserProfile.test.tsx
  TypeError: Cannot read properties of undefined (reading 'context')

    at UserProfile (src/components/UserProfile.tsx:15:22)
    at renderWithProviders (tests/helpers.tsx:8:5)

  12 tests failed

Tests failed after converting UserProfile.tsx.
The error is: Cannot read properties of undefined (reading context)

This component uses legacy context API (this.context).
Should I:
1. Convert it to useContext() hook
2. Skip this file and continue with others
3. Convert it but add a TODO for manual review

你从手机回复：

Option 1. Use useContext. If the context provider doesn't exist as a
separate component yet, create one.

Claude 继续在你的工作站上工作：

terminal

Got it. I'll convert the legacy context usage to useContext.

[Auto-approved] Read src/components/UserProfile.tsx
[Auto-approved] Grep "createContext" in src/**
  Found ThemeContext in src/contexts/theme.ts but no UserContext

[Auto-approved] Write src/contexts/user-context.tsx
  Created UserContext with provider component

[Auto-approved] Edit src/components/UserProfile.tsx
  Replaced this.context with useContext(UserContext)

[Auto-approved] Bash npm test

  PASS  tests/components/UserProfile.test.tsx
  All 12 tests passed

Continuing with remaining components. Progress: 31/82...

Claude 继续工作。你放下手机，20 分钟后再查看进度摘要。

刚才发生了什么？

Grep

extends React.Component in src/components/**

↓

Read and Edit

smallest components first

↓

Bash

npm test (every 10 files)

↓

Remote Control

phone notification

↓

Write

src/contexts/user-context.tsx

↓

Bash

npm test (after fix)

实际发生了什么

你的工作站（仍在运行）
  └── Claude Code 进程
       ├── 本地文件访问（读写你的实际文件）
       ├── 本地工具执行（npm test 在你的机器上运行）
       └── WebSocket 连接到 claude.ai

你的手机（浏览器）
  └── claude.ai/remote/sess_abc123xyz
       ├── 通过 WebSocket 流式传输 Claude 的输出
       ├── 将你的消息发回本地进程
       └── 渲染权限提示供审批

关键：文件和工具永远不会离开你的工作站。你的手机是远程显示器和输入设备，不是第二个执行环境。

Demo 30: Desktop App -- 每日自动 PR Review 摘要

Desktop App -- Automated Daily PR Digest

Intermediate~15 min

场景

你是技术负责人。每天早上花 30 分钟检查昨晚有哪些 PR 合并了、还有哪些待处理、是否有需要紧急关注的。你希望 Claude 在你到达之前准备好摘要。

第 1 步：创建 Review Agent

在 Desktop App 中创建新的定时任务：

定时：每个工作日早上 7:00（cron: 0 7 * * 1-5）

提示词：

Review all open pull requests in our repository. For each PR:

1. Read the PR description and all changed files
2. Categorize as: needs-review, changes-requested, approved-waiting-merge, or blocked
3. Flag any PRs that have been open more than 3 days without review
4. Flag any PRs with failing CI checks

Produce a digest in this format:

URGENT (needs action today):
- PR #123: "Add payment retry logic" - CI failing on integration tests since yesterday

NEEDS REVIEW (no reviewer assigned):
- PR #145: "Migrate user table to new schema" - opened 2 days ago by @alice

IN PROGRESS (has reviewer, waiting on changes):
- PR #130: "Update API rate limits" - @bob requested changes 1 day ago

READY TO MERGE (approved, CI passing):
- PR #128: "Fix timezone bug in reports" - approved by @carol, all checks pass

STATS:
- Total open PRs: 12
- Average age: 2.3 days
- Oldest: PR #110 (5 days, blocked on design review)

第 2 步：配置 GitHub 访问的 MCP

Desktop App 需要访问你的 GitHub 仓库。配置 GitHub MCP 服务器：

json

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

第 3 步：每天早上看到什么

当你早上 8:30 打开 Desktop App 时，摘要已经准备好了：

terminal

  Claude Desktop -- Scheduled Report (ran at 7:02 AM)
  ════════════════════════════════════════════════════

  URGENT (needs action today):
  - PR #201: "Hotfix: connection pool exhaustion" - @dave opened at 2AM,
    CI passing, no reviewer yet. Fixes the connection leak we saw in prod.
    3 files changed, looks correct. Recommend fast-track merge.

  NEEDS REVIEW:
  - PR #198: "Add WebSocket support for real-time notifications" - @eve
    opened 2 days ago, 47 files changed. Large PR, suggest splitting
    into transport layer + handler layer.

  IN PROGRESS:
  - PR #195: "Refactor auth middleware" - @frank requested changes from
    @grace 1 day ago. 2 comments unresolved.

  READY TO MERGE:
  - PR #192: "Fix timezone bug in weekly reports" - approved by @carol,
    all 3 CI checks pass. Last activity 6 hours ago.
  - PR #190: "Add retry logic to payment webhook" - approved by @dave,
    squash-ready.

  STATS:
  - Total open PRs: 11
  - Average age: 2.8 days
  - Oldest: PR #185 (6 days, blocked on design review from @henry)
  - PRs merged yesterday: 4

刚才发生了什么？

MCP (GitHub)

list open pull requests

↓

MCP (GitHub)

read PR diffs and comments

↓

MCP (GitHub)

check CI status

↓

Write

digest output

第 4 步：采取行动

点击任何 PR 引用可以直接打开它。Desktop App 还可以让你响应：

Assign me as reviewer on PR #201 and approve it. For PR #198, leave a
comment asking @eve to split it into two PRs: one for the WebSocket
transport layer and one for the notification handlers.

Claude 执行的操作：

terminal

Done. Two actions taken:

1. PR #201 "Hotfix: connection pool exhaustion"
   - Assigned you as reviewer
   - Submitted approving review with comment: "LGTM. Connection pool
     fix looks correct. Fast-track merge approved."

2. PR #198 "Add WebSocket support"
   - Posted comment: "@eve This PR covers both the WebSocket transport
     layer and the notification handlers (47 files). Could you split
     this into two PRs? Suggested split:
     - PR A: WebSocket transport (src/transport/*)
     - PR B: Notification handlers (src/handlers/notifications/*)
     This will make review faster and reduce merge conflict risk."

组合使用各界面

典型的一天可能使用三个界面：

7:00 AM   Desktop App 自动运行 PR 摘要
8:30 AM   你在 Desktop 上阅读摘要，批准紧急 PR
9:00 AM   终端 CLI 做深度功能开发
12:00 PM  VS Code 审查和重构特定模块
5:30 PM   Remote Control 用手机监控长时间运行的迁移

Teleport：从云端到本地

Teleport 处理反方向——你在 claude.ai（web）上开始了对话，想在本地终端继续，让 Claude 访问你的实际文件。

bash

# 在终端中：
/teleport

# Claude 显示一个在 claude.ai 上输入的代码，或者你粘贴会话 URL：
/teleport https://claude.ai/chat/abc123

teleport 过程的样子：

terminal

$ claude
> /teleport https://claude.ai/chat/abc123

Connecting to cloud session...
Downloading conversation history (23 messages, 4,200 tokens)...

Session teleported successfully.

Context imported:
  - 23 messages from cloud conversation
  - Topic: "Design a caching layer for the user service"
  - Key decisions: Redis for hot data, PostgreSQL for cold data
  - Pending: Implementation plan needs local file access

You can now continue this conversation with full local file access.

> implement the caching plan we discussed -- start with the Redis layer

对话历史转移到你的本地会话。Claude 现在可以访问你的本地文件系统和工具，同时保留 web 对话的上下文。

何时使用 Teleport：你在 web 上讨论了一种方案，现在想要实现它。不用重新解释所有内容，teleport 会话后说"实现我们刚讨论的方案"。

常见问题排查

IDE 扩展版本不匹配

症状：VS Code Claude Code 面板显示错误、无法连接或功能缺失。

terminal

  Claude Code Panel (VS Code):
  ─────────────────────────────────
  Error: Extension version 1.2.0 is not compatible with CLI version 1.5.0.
  Some features may not work correctly.

  Please update the VS Code extension to match your CLI version.

根因：VS Code 扩展和 CLI 工具版本号不同。部分功能（如并行对话或 inline diff 改进）需要版本匹配。

修复：

bash

# 检查 CLI 版本
claude --version

# 更新 VS Code 扩展：
# 1. 打开 VS Code
# 2. 进入 Extensions（Ctrl+Shift+X）
# 3. 搜索 "Claude Code"
# 4. 如果有更新就点击 "Update"

# 或通过命令行更新：
code --install-extension anthropic.claude-code --force

# 如果需要也更新 CLI：
npm update -g @anthropic-ai/claude-code

预防：在 VS Code 设置中启用扩展自动更新。更新 CLI 时，同时检查扩展版本。

Remote Control 连接问题

症状：你在手机上扫描了二维码，但远程会话没有加载，或者加载后断开了。

terminal

  Phone browser:
  ─────────────────────────────────
  Connecting to remote session...

  Error: Session not found or expired.
  The remote session may have ended or the connection timed out.

常见原因和修复方法：

工作站上的会话已结束：如果工作站上的 Claude 进程退出了（崩溃、终端关闭、机器休眠），远程会话就不存在了。重启 Claude 并再次运行 /remote-control。
网络切换：你的手机从 WiFi 切换到了蜂窝网络，断开了 WebSocket。刷新浏览器页面重新连接。
防火墙阻止 WebSocket：企业网络有时会阻止到外部服务的 WebSocket 连接。尝试使用手机的蜂窝数据而不是企业 WiFi。
会话超时：Remote Control 会话在长时间不活跃后会超时（通常 30 分钟无消息）。在工作站上重新运行 /remote-control 获取新的会话 URL。

terminal

# 在工作站上检查会话是否仍然活跃：
> /remote-control

Remote control is already active for this session.
Session URL: https://claude.ai/remote/sess_def456uvw

If your device cannot connect, try refreshing the page or
scanning the QR code again.

Desktop App 定时任务未运行

症状：你的早上 7 点 PR 摘要没有出现。

排查清单：

terminal

# 1. Desktop App 是否在运行？
# 定时 agent 需要 Desktop App 进程处于活跃状态。
# 检查系统托盘/菜单栏是否有 Claude 图标。

# 2. MCP 服务器是否配置正确？
# 打开 Desktop App 设置并验证 GitHub MCP 配置。
# GITHUB_TOKEN 必须有 repo 和 read:org 权限。

# 3. 检查 agent 日志：
# Desktop App > Settings > Scheduled Tasks > View Logs

  Agent log (2026-05-27 07:00:01):
  Error: MCP server github failed to start.
  Reason: GITHUB_TOKEN environment variable not set.

# 修复：用有效的 token 更新 MCP 配置

知识检测

你在工作站上启动了一个长时间的重构任务并启用了 Remote Control。你的手机显示了 Claude 的进度。文件在哪里被修改？

在托管远程控制会话的云服务器上

在你手机的浏览器上

在你的工作站上——手机只是一个显示和输入设备

文件在你的工作站和云端之间同步

你在 claude.ai（web）上讨论了一个架构方案，现在想在本地实现它。最快的方式是什么？

将对话复制粘贴到新的终端会话中

使用 /teleport 将云端对话拉到你的本地终端

开启新会话并重新解释架构

使用 /remote-control 将 web 会话连接到你的终端

在 VS Code 中，Claude 提议修改一个文件但缺少一个重要的导入。你应该怎么做？

接受修改然后手动添加导入

拒绝整个文件修改然后重新开始

拒绝该代码块并在聊天中告诉 Claude 缺了什么

关闭 diff 视图直接编辑文件

本章小结

VS Code 扩展提供 inline diffs 的逐块接受/拒绝、@-mentions 精确文件引用和并行对话
Remote Control 让你从任何设备监控和操控本地长时间运行的会话——文件和工具留在你的工作站
Desktop App 定时功能自动化重复任务，如每日 PR 摘要
Teleport 将 web 对话拉到本地终端进行实现
为正确的任务使用正确的界面：终端做重度工作、IDE 做重构、手机做监控
IDE 扩展出问题时，检查 CLI 和扩展之间的版本兼容性
Remote Control 会话需要你的工作站保持活跃——进程终止则远程会话消失

延伸阅读：A15 Claude Code 内部机制解释了跨界面的会话状态管理方式，包括使 Teleport 和 Remote Control 成为可能的压缩和序列化机制。

下一章：Chapter 12: CI/CD 与 GitHub Actions

Chapter 11: IDE 集成与多端工作流 ​

学习目标 ​

Claude Code 生态 ​

会话移动性 ​

Demo 28: VS Code 重构工作流 ​

场景 ​

第 1 步：打开项目并启动 Claude ​

第 2 步：使用 @-mentions 引用文件 ​

第 3 步：用 Inline Diffs 审查 ​

第 4 步：并行开多个对话 ​

刚才发生了什么？ ​

相比终端的优势 ​

Demo 29: Remote Control -- 在公司开始，通勤时用手机监控 ​

场景 ​

第 1 步：在工作站启动任务 ​

第 2 步：启用 Remote Control ​

第 3 步：在手机上打开 ​

第 4 步：监控并介入 ​

刚才发生了什么？ ​

实际发生了什么 ​

Demo 30: Desktop App -- 每日自动 PR Review 摘要 ​

场景 ​

第 1 步：创建 Review Agent ​

第 2 步：配置 GitHub 访问的 MCP ​

第 3 步：每天早上看到什么 ​

刚才发生了什么？ ​

第 4 步：采取行动 ​

组合使用各界面 ​

Teleport：从云端到本地 ​

常见问题排查 ​

IDE 扩展版本不匹配 ​

Remote Control 连接问题 ​

Desktop App 定时任务未运行 ​

知识检测 ​

本章小结 ​

Chapter 11: IDE 集成与多端工作流

学习目标

Claude Code 生态

会话移动性

Demo 28: VS Code 重构工作流

场景

第 1 步：打开项目并启动 Claude

第 2 步：使用 @-mentions 引用文件

第 3 步：用 Inline Diffs 审查

第 4 步：并行开多个对话

刚才发生了什么？

相比终端的优势

Demo 29: Remote Control -- 在公司开始，通勤时用手机监控

场景

第 1 步：在工作站启动任务

第 2 步：启用 Remote Control

第 3 步：在手机上打开

第 4 步：监控并介入

刚才发生了什么？

实际发生了什么

Demo 30: Desktop App -- 每日自动 PR Review 摘要

场景

第 1 步：创建 Review Agent

第 2 步：配置 GitHub 访问的 MCP

第 3 步：每天早上看到什么

刚才发生了什么？

第 4 步：采取行动

组合使用各界面

Teleport：从云端到本地

常见问题排查

IDE 扩展版本不匹配

Remote Control 连接问题

Desktop App 定时任务未运行

知识检测

本章小结