写给 Claude Code 初学者的使用技巧

双越AI_club
0 阅读6分钟

大家好，我是双越。wangEditor 作者，前百度 滴滴 资深前端工程师，慕课网金牌讲师，PMP，前端面试派 作者。

我正致力于两个项目的开发和升级，感兴趣的可以私信我，加入项目小组。

  • 划水AI Node 全栈 AIGC 知识库，包括 AI 写作、多人协同编辑。复杂业务，真实上线。
  • 智语 AI Agent 智能体项目。一个智能面试官，可以优化简历、模拟面试、解答题目等。

本文总结了一些 Claude Code 使用技巧，针对初学者的，“老司机”可划走～

CLAUDE.md

用 claude 打开一个新项目，执行 /init 命令，它会自动话分析项目并创建一个 CLAUDE.md 文件。

CLAUDE.md 是项目记忆文件，每次会话都会携带，它包含了项目中最重要的一些信息，例如格式、规范、命令、开发者癖好等。

CLAUDE.md 可放在项目根目录，也可以放在 .claude 目录，或一些二级目录。二级目录的，要等 Claude 加载当前文件时，才会加载。

CLAUDE.md 尽量保持在 200 行以内，如果内容太多可能会影响 AI 输出的效果，更容易出现幻觉。如果有按需加载的内容，请使用 skill ，下文会介绍。

简单示例：

# Todo List Project

## 常用命令
- 启动: `npm run dev`
- 测试: `npm test`
- 构建: `npm run build`

## 代码规范
- 使用 ES Modules，不用 CommonJS
- 使用函数式组件 + Hooks
- 状态管理用 Zustand（见 src/stores）

## 文件结构
- src/components/ 放 UI 组件
- src/api/ 放接口调用

还有一个 AGENTS.md 但它不是 Claude Code 原生的文件，而是来自整个 AI 编程工具生态的一个开放标准。它的定位是：一个文件，兼容所有 AI 编程工具。

目前每个主流 AI 编程工具都有自己的配置文件：Claude Code 读取 CLAUDE.md，Codex CLI 读取 AGENTS.md，Gemini CLI 读取 GEMINI.md，Cursor 用 .cursorrules，GitHub Copilot 用 copilot-instructions.md

Plan Mode

使用 Claude Code 一般是：先探索，再规划，最后编码。

使用 shift+tab 可切换到 Plan mode

image.png

此时输入一些指令让它去学习和探索，例如

read /src/auth and understand how we handle sessions and login.
also look at how we manage environment variables for secrets.

然后，让它根据探索的内容做详细规划，例如

I want to add Google OAuth. What files need to change?
What's the session flow? Create a plan.

最后，切换回 Normal Mode 并让 Claude 编码，根据其计划进行验证。

implement the OAuth flow from your plan. write tests for the
callback handler, run the test suite and fix any failures.

常见命令

总结了一下 Claude Code 常见的命令。

会话管理（最常用）

命令作用
/clear清空对话历史，开始新任务时必用
/compact压缩上下文，保留重要信息，释放 token
/context查看当前 context 使用情况
/help查看帮助
/init初始化项目，增加 CLAUDE.md

功能类

命令作用
/memory打开并编辑 CLAUDE.md 文件
/model切换模型（Opus / Sonnet 等）
/mcp管理 MCP 服务器连接
/cost查看本次会话的 token 消耗

代码相关

命令作用
/code-review对当前代码进行审查
/rewind打开检查点菜单，可回滚代码和对话

在对话框中还有几个特殊前缀：/ 触发 slash 命令，! 直接执行 bash 命令，@ 引用文件（带自动补全）。

!npm test          # 直接执行 shell 命令
!git status
@src/index.ts      # 把文件内容加入上下文

Skill

Skill 现在已经是 agent 非常成熟且常用的模块了，在 claude code 同样如此。
可以自己创建，也可以安装第三方的，例如 vercel.com/blog/introd…

执行命令

npx skills add vercel-labs/agent-skills

会创建在 .claude/skills 目录下

image.png

如下图，下面三个是我安装的 skill ，上面几个是 claude code 内置的 skill

image.png

这样 Cluade Code 在写 React 或前端代码时，就会参考这些 skill 写的更好。

这些第三方的都是全世界开发者通用的技能，在你的实际工作中，你应该还需要积累一些自己或公司内部使用的 skill ，一般要一边应用一边积累，慢慢改善。

MCP

MCP server 是 agent 联通外部世界的方式。几个推荐安装的 MCP server

1. Context7 — 解决文档过时问题 Context7 把版本精确的库文档直接注入 Claude Code 会话。Claude 不再靠训练数据猜 API，而是拿到你项目实际使用的 React、Next.js、Prisma 那个版本的真实文档。有效解决 Claude 写出已废弃方法的问题。

claude mcp add -s project context7 npx @upstash/context7-mcp

这里的 project 是安装在项目里，也可以改为 user
安装以后会在项目根目录 .mcp.json 文件中看到

image.png

2. Playwright — 浏览器自动化测试 Playwright MCP 让 Claude Code 可以打开浏览器、点击页面、截图验证 UI，这个反馈闭环能捕获单元测试发现不了的问题。

claude mcp add -s project playwright npx @playwright/mcp@latest

3. GitHub — 无缝 PR 和 issue 管理 GitHub MCP 消除了编辑器和 GitHub 网页之间最多的上下文切换，创建分支、开 PR、搜索代码、管理 issue 和 Actions workflow 全在对话里完成。

claude mcp add -s project github npx @modelcontextprotocol/server-github
# 需要设置 GITHUB_PERSONAL_ACCESS_TOKEN

安装以后，启动 claude 时候需要选择

image.png

可以让 claude code 帮我打开网页访问 localhost:3000 来测试网页，它会自动分析网页元素，进行测试。

image.png

现在 claude code 有 tool search 功能，默认只家在 tool name ，其他内容都是按需加载，不会占用太多 token

Hooks

Hooks 是用户定义的 shell 命令，在 Claude Code 生命周期中的特定点执行。它们对 Claude Code 的行为提供确定性控制，确保某些操作始终发生，而不是依赖 LLM 选择运行它们。使用 hooks 来强制执行项目规则、自动化重复任务，并将 Claude Code 与现有工具集成。

例如，阻止受保护的文件被编辑，如 .env、package-lock.json 或 .git/ 中的任何内容。

编辑 .claude/settings.json 文件，增加

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": ""$CLAUDE_PROJECT_DIR"/.claude/hooks/protect-files.sh"
          }
        ]
      }
    ]
  }
}

其中 PreToolUse 就是在工具使用增加 Hook ，这里的 sh 文件内容如下

#!/bin/bash
# protect-files.sh

INPUT=$(cat)
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // empty')

PROTECTED_PATTERNS=(".env" "package-lock.json" ".git/")

for pattern in "${PROTECTED_PATTERNS[@]}"; do
  if [[ "$FILE_PATH" == *"$pattern"* ]]; then
    echo "Blocked: $FILE_PATH matches protected pattern '$pattern'" >&2
    exit 2
  fi
done

exit 0

Hook 事件类型有很多，例如 SessionStart SessionEnd PreToolUse PostToolUse 具体看文档 code.claude.com/docs/zh-CN/…

总之，Hook 允许用户在 claude code 多种行为的开始和结束增加监测机制，保障安全稳定。

SubAgents

sub agent 单独的环境，单独的上下文，运行单独的任务，不影响主 agent 。
例如代码审查、单元测试、排查 bug 等。

使用 /agents 命令查看当前 sub agents （cc 内置了几个 agent），或者创建一个新的

image.png

创建以后会在 .claude/agents/ 目录下创建一个 md 文件，描述这个 agent ，你可以修改

image.png

运行一个 sub agent 让它帮我写单元测试

image.png

Context Window

一次聊天太长，上下文内容过多，就会消耗过多 token，且让 AI 产生幻觉。这是所有 Agent 都无法避免的事情。
所以，开发新的功能时，要及时清理聊天记录，使用 /clear 命令。
恢复上次会话 claude --continue ，选择会话 claude --resume

下图是 claude code 各个功能对于上下文的影响，可以看到

  • CLAUDE.md 是每次请求都携带
  • MCP servers 是只携带工具名称，其他按需 —— 但如果 base_url 不是官方 claude ，这里就不确定了！！！
  • Skills 只写代码 name desc ，内容按需加载

image.png

最后

之前和同学沟通，有人提到一句话非常好：如果 AI 写错了，不是纠正他，而是考虑自己的环境、规则和计划是否合理，这也是 harness 编程和 vibe coding 的区别。

Claude Code 的功能和使用就很契合这一点，Plan Mode + Skill + Hook 就是环境、规则和计划。

avatar
文章
阅读
粉丝