Claude Code in Action

Rickyy
0 阅读8分钟

前言

Claude Code in Action 是 Anthropic 官方发布的关于 Claude Code 的使用指南，这篇笔记不会涵盖指南中的所有内容，仅仅是我自己对于该指南中一些我认为有用内容的总结。 我会把原指南地址附在笔记的最后，希望对你有所帮助。

What is Claude Code

Claude Code 是 Anthropic 推出的 Code Assistant Agent, 你可以把它理解为一个帮助你写代码的工具，和以往 Visual Studio Code 中扩展提供的代码自动补全不同，它是基于 LLM（大语言模型）的，所以它更智能，也更强大。

顺便说一下，截止到我写这篇笔记时，Anthropic 发布的 Claude 系列模型，依然是在编码场景中最强大的模型，Opus-4.5/Sonnet-4.5/Haiku-4.5。

What is a code assistant

就我个人而言，我一直在使用 code assistant 辅助我写代码，从 Visual Studio Code 的各种扩展，例如 Tabnine, 再到后来集成了 AI 的 IDE，例如：Cursor, Qoqder。我认为弄清楚这些 code assistant 背后的运行机制是有一些帮助的。

image.png

在大部分的场景中，LLM 在接收你的需求后，会先收集上下文，得到它所需要的所有信息后，它会做出一个计划，将这个计划作为 Todo ，以此执行计划中的每个动作。

在这个流程中，我想再多讨论一些关于收集上下文的细节。

想象这样一个场景，在没有 Code Assistant 的情况下，我们如果直接和 LLM 进行交互，我想让它分析 main.go 文件中的代码，但显而易见的，LLM 并不知道 main.go 文件的内容，它也并不具备读取文件内容的能力。

LLM 仅有的能力就是接收输入文本，然后再输出文本。

image.png

那么每个 Code Assistant 要做的事情就是让 LLM 能够拿到足够的上下文，毕竟你也不希望每次都要把代码手动粘贴给 LLM 对吧?

还是刚才那个场景，当你和 LLM 交互想让它分析 main.go 文件时，Code Assistant 会告诉 LLM，如果你想要读取文件，请严格返回 ReadFile: name of file, Code Assistant 在接收到这个返回时，则会读取文件的内容并且传递给 LLM。

image.png

相信看到这里你已经明白了，对于 LLM 来说最重要的就是调用工具来获取自己想要的信息，或者执行一些操作，现阶段的 LLM 有多种可靠且便捷的方式可以实现调用工具的效果，例如 Function Call, JSON Format, MCP 等等。

image.png

Getting the most out of Claude Code

在这部分的内容中，主要快速演示了三个在实际项目中使用的技巧，这里简单提一下后两个技巧，我觉得是在实际开发中经常使用的。

手动添加 MCP Server 让 Claude Code 掌握更多能力

官方演示的则是使用 Playwright MCP 让 Claude Code 可以操作浏览器，在编写前端页面的时候，这是一个非常好用的 MCP，Claude Code 可以借助这个 MCP 进行精细的 UI 修改。

将 MCP Server 接入 Claude Code 也很简单，例如 Playwright 的是：

claude mcp add playwright npx @playwright/mcp@latest

其他 MCP Server 的集成命令可能会略有不同，具体以其文档为主即可。

image.png

调用 MCP 的某个 Tool 时，会请求许可，如果你完全信任这个 MCP Server，则可以在 .claude/settings.local.json 文件中添加如下参数：

{
  "permissions": {
    "allow": [
      "mcp__playwright"
    ]
  }
}

现在优秀的 MCP Server 已经有很多了，可以在 Awesome MCP Servers 中自行探索。 不过现阶段的 MCP 协议还存在一些安全性的问题，所以在集成时需要考量好安全问题。

在 Github Actions 中集成 Claude Code

这个 case 主要演示了在 Github 中借助 Claude Code 进行每个 Commit 的 Code Review，这样可以在部署阶段发现一些潜在的问题，集成方法也非常简单，可以参考 官方的教程。

Getting Hands On

这一节内容演示了几个实际使用场景，教我们如何能让 Claude Code 能够获取更有帮助的上下文，而不是塞进一堆无用的信息影响 LLM 的输出。

CLAUDE.md

首先强烈建议你在每个项目中都生成 CLAUDE.md，可以在 Claude Code 中使用 /init 命令自动生成，Claude Code 会读取你的项目结构和关键文件，对你的项目当前状态做一个总结式的概括，在之后的使用中，每次 Claude Code 请求 LLM 时，都会将 CLAUDE.md 文件中的内容作为提示词一起发送。

image.png

CLAUDE.md 文件根据不同的命名或不同的存放位置可以有以上三种作用范围：

  • CLAUDE.md: /init 命令生成的文件，作用于整个项目。
  • CLAUDE.local.md: 作用于整个项目，但仅对你自己生效，不影响其他参与项目协作的成员。
  • ~/.claude/CLAUDE.md: 作用于全局，对你电脑上所有项目都生效。

需要注意的是，在随着项目中实现的功能越来越多，需要及时更新 CLAUDE.md。指南中演示的是输入 # 符号会进入 Memory 模式，这个模式下会记住你新增的规则，并且写入到 CLAUDE.md 文件，但我实测下来并不是每次都会修改，你也可以使用 /memory 命令来直接编辑该文件。

当然你也可以让 Claude Code 帮你修改，我们可以使用 @ 符号将文件或目录添加到上下文中。

image.png

另外在 CLAUDE.md 文件内，你也可以使用 @ 添加文件，这样每次 Claude Code 就能知道相关文件的内容了。

Plan 模式

当 Claude Code 修改了你的文件，它会列出修改内容的 diff，并且询问你是否应用这个修改，你可以每一次修改都单独按回车允许，或者按下一次 shift + tab 允许它在这个终端中直接应用修改，而不需要经过你同意。

image.png

image.png

当你按下两次 shift + tab 时，会打开 Plan 模式，该模式下 Claude Code 会更充分的理解你的需求，也会读取更多的相关文件，并列出一个实现计划，后续只需要你同意按计划实现或者让他继续修改计划就可以。

image.png

Thinking 模式

Thinking 模式会启用模型的深度思考能力，在 Claude Code 中是通过一系列关键词或短语来启用 Thinking 模式的，如下图所示：

image.png

不同的关键词会设置不同的 Thinking Budget, 这个参数越大，消耗的 Tokens 会越多。

其他快捷键

指南中也列出了一些其他常用的快捷键，如下图所示：

image.png

  • Esc: 中断 Claude Code 当前的执行。
  • /compact: 将当前的所有上下文进行一次总结，当你的上下文太长导致模型效果不佳的时候使用。
  • /clear: 清除所有上下文。
  • 按两次 Esc: 将对话倒回到某个节点

image.png

倒回这个功能的使用场景就是在你想去掉一部分干扰内容比较多的上下文时使用，例如上图的场景，在某一次的需求中出现了一些报错，Claude Code 会修复这个报错，在这个过程中留下的上下文信息在你实现下一个需求的时候是用不到的，你想去掉它就可以按下两次 Esc, 将上下文倒回到发送这条 Write test for 'createSession' 消息之前。

自定义命令

Claude Code 支持你自定义 / 命令，在项目中的 .claude/commands 目录下创建 [name].md 文件，[name] 可以是任意字符串，和内置的命令名称重复也没关系，Claude Code 会展示描述来区分自定义的命令和内置的命令。

image.png

Hooks and SDK

指南中这一节着重介绍了两种 hook 的用法以及实际的使用场景，还有集成 Claude Agent SDK 通过代码的方式调用 Claude Code。

首先是 PreToolUse hook，这个 hook 会在 Claude Code 调用工具之前被调用，你可以在这个 hook 中执行一些调用工具前的检查逻辑，举个例子，比如你并不想让 Claude 读到你本地 .env 文件中的内容，你可以在调用 Read、Grep 工具时检查要读取的文件名称是否包含 '.env' 如果没有则返回 Exit Code 为 0 ，Claude 会继续调用工具，反之则返回 Exit Code 为 2，Claude Code 会停止本次的工具调用。

其次是 PostToolUse hook，这个 hook 则是在 Claude Code 调用工具之后被调用，举例你也可以在 Claude Code 修改完文件后，再执行一些测试逻辑或检查逻辑确保没有额外的副作用。

image.png

Hooks 的定义则是在 .claude/settings.json 文件中定义，类似 CLAUDE.md, settings.json 文件在不同位置和不同命名下也有不同的作用范围，如下图所示：

image.png

最后指南中也介绍了如何集成 '@anthropic-ai/claude-agent-sdk'，你可以理解为这个 SDK 调用的 agent 就是 Claude Code，你可以在 hook 中调用它。

import { query } from '@anthropic-ai/claude-agent-sdk'

const prompt = "Look for duplicate components in the .app/components dir"

for await (const message of query({
  prompt,
})) {
  console.log(JSON.stringify(message, null, 2))
}

值得一提的是，在默认情况下，SDK 中的 Claude Code 拥有只读的权限，如果你要授权给它编辑文件，修改内容的权限，就要在调用的时候额外配置：

for await (const message of query({
  prompt,
  options: {
    allowedTools: ["Edit"]
  }
})) {
  console.log(JSON.stringify(message, null, 2))
}

以上就是指南中演示的全部内容了，如果有任何错误，非常欢迎您指正并提出建议。 我是 Ricky，非常感谢您的阅读，希望对你有所帮助！

References

Claude Code in Action

avatar
文章
阅读
粉丝