第 4 章：核心开发 — 从编码到实现

4.1 日常开发中的命令场景

在之前的章节中，你已经完成了番茄钟项目的初始化和架构规划。现在进入核心开发阶段，这是你大部分时间会使用的模式。

日常开发中最大的挑战是上下文管理。Claude Code 的上下文窗口是有限的，随着对话的进行，之前的工具调用、代码修改、文件读取都会累积占用空间。如果不主动管理，最终会遇到上下文溢出的情况，导致：

• 无法引用之前的对话内容
• 工具调用失败或行为异常
• 性能下降，响应变慢

本章介绍的命令将帮助你在开发过程中保持对话的高效和可控。

4.2 /focus — 精简视图模式

功能说明

进入精简视图模式，仅显示核心信息：提示词、工具调用摘要（单行描述 + diffstats）、最终响应。隐藏详细的工具调用内容，减少视觉噪音。

语法

/focus

实际使用示例

# 切换到精简视图
/focus

# 再次调用切换回详细视图
/focus

注意事项/技巧

• 精简模式的选择在会话之间保持
• 仅在全屏渲染模式中可用（需先运行 /tui fullscreen）
• 工具调用摘要格式：[工具名] 文件路径 (+10/-2) 表示新增 10 行，删除 2 行
• 适合在已经熟悉项目细节后，只关注结果而非过程

4.3 /context — 可视化上下文使用

功能说明

以彩色网格形式可视化显示当前对话的上下文使用情况。不同颜色代表不同类型的占用：上下文密集型工具、内存膨胀、容量警告等。

语法

/context [all]

实际使用示例

# 查看上下文占用概览
/context

# 查看详细分解（每项工具调用的具体占用）
/context all

注意事项/技巧

• 默认视图显示网格概览，适合快速判断是否需要压缩
• all 参数展开每项的详细分解，但在全屏模式下默认折叠以保持网格可见
• 什么时候该用：对话变得很长时检查，决定是否需要执行 /compact
• 如果看到大量红色警告或接近 100% 的占用，应考虑压缩对话

4.4 /compact — 压缩对话释放上下文

功能说明

通过总结之前的对话内容来释放上下文窗口空间，保留关键信息和上下文，压缩冗余内容。

语法

/compact [instructions]

实际使用示例

# 基本压缩
/compact

# 压缩并指定保留重点
/compact 保留计时器逻辑的细节，删除样式相关的讨论

# 切换主题时压缩
/compact 之前讨论了认证系统，现在切换到支付功能开发

注意事项/技巧

• 与 /clear 的区别：/compact 继续同一对话并保留压缩后的上下文，/clear 清除所有内容开始全新对话
• 压缩过程会保留：当前工作目录、已设置的规则、加载的 skills、内存文件的内容
• 压缩会删除或总结：之前的工具调用记录、详细的对话历史、已读取的文件内容
• 使用时机：
  • 上下文接近容量上限（/context 显示高占用）
  • 完成一个功能开发阶段，准备进入下一个功能
  • 对话偏离原始主题，需要回归正轨

4.5 /copy — 复制代码输出

功能说明

复制 Claude 响应中的内容到系统剪贴板，特别适用于复制代码块到其他编辑器或粘贴到文件中。

语法

/copy [N]

实际使用示例

# 复制最后一个响应
/copy

# 复制倒数第二个响应
/copy 2

# 当响应包含多个代码块时，会显示交互式选择器

注意事项/技巧

• 当响应中包含代码块时，会显示交互式选择器让你选择要复制的代码块
• 按 w 键可以将内容直接写入文件，在 SSH 场景中特别有用
• 复制的通常是格式化后的内容，保留代码块的语法高亮标记（如 ```typescript）

4.6 /add-dir — 添加工作目录

功能说明

为当前会话添加额外的文件访问目录，让 Claude 可以读取和修改该目录下的文件。

语法

/add-dir <path>

实际使用示例

# 添加共享样式目录
/add-dir ../shared-styles

# 添加组件库目录
/add-dir ~/projects/component-library

# 使用 --continue 从添加的目录恢复会话
/add-dir ../shared-styles --continue

注意事项/技巧

• 大多数 .claude/ 配置文件不会从添加的目录中发现（如 skills、规则等）
• 添加的目录仅在当前会话中有效，会话结束后不会保留
• 可以使用 --continue 或 --resume 从添加的目录恢复之前的会话状态
• 适用于需要访问项目外部资源（如共享组件、测试数据）的场景

4.7 /recap — 会话摘要

功能说明

按需生成当前会话的单行摘要，提供对话进展的快速概览。这是会话结束后自动摘要的主动版本。

语法

/recap

实际使用示例

# 生成会话摘要
/recap

注意事项/技巧

• 摘要包含当前会话的主要进展和关键决策
• 适合在开发中间节点检查进展，确保没有偏离目标
• 与自动摘要相比，主动触发可以随时获取摘要，无需等待会话结束

4.8 动手做：实现番茄钟计时器

现在我们将用本章学习的命令来实现番茄钟的核心计时器功能。按以下步骤操作：

步骤 1：让 Claude 实现计时器组件

首先，实现一个 25 分钟工作、5 分钟休息的自动切换计时器：

请实现番茄钟的计时器组件，要求：
- 25 分钟工作阶段，5 分钟休息阶段自动切换
- 显示剩余时间和当前阶段（工作/休息）
- 提供开始、暂停、重置按钮
- 使用 React + TypeScript
- 文件放在 src/components/Timer.tsx

步骤 2：实现过程中对话变长

在实现过程中，你可能需要多次调整代码、修复 bug、讨论状态管理。此时对话会变得很长。运行：

/context

查看上下文占用情况。如果发现占用接近上限或显示警告，继续下一步。

步骤 3：压缩对话

使用 /compact 压缩对话，保留关键信息：

/compact 保留计时器逻辑和状态管理的细节，删除样式相关的讨论

压缩后，对话历史被总结，但核心逻辑和代码状态得以保留。

步骤 4：开启精简视图继续开发

为了在后续开发中专注于结果，开启精简视图：

/focus

现在继续调整计时器的细节，界面将只显示工具调用摘要和最终响应。

步骤 5：复制代码到剪贴板

代码完成后，复制最终版本到剪贴板：

/copy

如果有多个代码块，使用交互式选择器选择 Timer.tsx 的代码。

步骤 6：添加外部样式目录（如需要）

如果你的项目需要访问共享样式文件：

/add-dir ../shared-styles

然后让 Claude 引用这些样式。

步骤 7：检查最终状态

最后，生成会话摘要确认完成情况：

/recap

本章小结

本章介绍了日常开发中管理对话上下文的关键命令：

• /context：可视化监控上下文使用，判断是否需要压缩
• /compact：压缩对话释放空间，保留关键上下文
• /focus：精简视图减少噪音，专注开发结果
• /copy：快速复制代码到剪贴板
• /add-dir：添加额外工作目录访问权限
• /recap：主动生成会话摘要

核心工作流程：在长对话中定期用 /context 检查上下文占用，接近上限时用 /compact 压缩，用 /focus 保持专注，最终用 /copy 导出结果。

下一章将介绍如何进行代码审查和调试相关命令。