尚硅谷 Vibe Coding｜第三章(2) Claude Code深度使用与进阶技巧-核心命令、实战工作流 学习笔记

3.3 核心命令与日常使用

掌握 Claude Code 的日常使用，就像学会开车的基本操作 ------ 方向盘、油门、刹车、倒车镜。

3.3.1 启动与基本交互

# 最基本的启动方式（在当前目录启动） 
$ claude 

# 指定项目目录启动 
$ claude --project-dir /path/to/your/project 

# 使用指定模型启动 
$ claude --model sonnet 

# 单次执行模式（执行完就退出，适合脚本调用） 
$ claude -p "请列出当前目录下所有的 JavaScript 文件"

3.3.2 对话交互基础

启动 Claude Code 后，你就进入了一个交互式对话界面。你输入需求，AI 分析后执行。

你：帮我创建一个简单的 HTML 页面，显示"Hello AI Coding"
AI：好的，我来创建这个页面。
[AI 分析需求]
[AI 请求确认：我将创建文件 index.html，是否允许？]

你：是（按 Enter 确认）
AI：已创建 index.html，包含以下内容：
- 基本 HTML5 结构
- 一个标题显示"Hello AI Coding"
- 简单的居中样式

权限确认机制

Claude Code 在执行以下操作前会先询问你：

|--------------|------------------------|---------------------------------|
| 操作类型 | 示例 | 提示信息 |
| 创建文件 | 创建 index.html | "Will create file: index.html" |
| 修改文件 | 修改 app.js 的第 10 行 | "Will edit file: app.js" |
| 执行命令 | 运行 npm install express | "Will run: npm install express" |
| 删除文件 | 删除 temp.txt | "Will delete file: temp.txt" |

提示：如果你发现每次确认很烦，可以在 settings.json 中配置自动允许的操作（见 4.2 节）。但初学者建议保持默认，让自己有机会审查 AI 的每一步操作。

3.3.3 核心斜杠命令详解

在 Claude Code 对话中，以 / 开头的命令是 "斜杠命令"，用来控制 Claude Code 的行为。在输入框里打一个 / 就会弹出完整命令清单；/help 列出所有可用指令。

现在是AI时代，你不记得的命令或者需要的命令都可以直接问模型，记住大概有哪些功能。

|------------|-----------------------------|----------------------------|
| 命令 | 作用 | 使用场景 |
| /help | 显示帮助信息 | 忘记命令时查看 |
| /model | 查看 / 切换当前模型（高 / 中 / 低档） | 需要换用更强 / 更快的模型时 |
| /compact | 压缩当前对话的上下文 | 对话太长，AI 开始 "遗忘" 早期内容时 |
| /clear | 完全清空当前对话 | 开始全新的任务时 |
| /context | 详细查看上下文占比（各 MCP/Skill 各占多少） | 优化 token、诊断哪里占用上下文 |
| /memory | 查看 / 编辑 CLAUDE.md 与自动记忆 | 管理项目 / 全局记忆、开启 Auto Memory |
| /status | 查看会话状态 | 确认模型、Token 消耗 |
| /cost | 查看当前会话费用 | 监控花费 |
| /review | 对当前项目进行代码审查(git提交之前的操作) | 完成功能后检查质量 |
| /init | 自动生成项目的 CLAUDE.md | 进入新项目后的第一件事 |
| /plan | 切入 Plan Mode（只读规划模式） | 复杂任务起手（详见 4.9 节） |
| /rewind | 回滚 cc 之前的修改 | "后悔药"，下文重点讲解 |
| /resume | 选择历史会话恢复(需要在同一个目录下执行) | 上次话题未处理完毕 |
| /btw | "顺便问一句"，不污染主上下文 | 主任务进行中想问无关问题 |

扩展管理命令

|---------------|-------------------------------------|-------------------------|
| 命令 | 作用 | 使用场景 |
| /skill <名称> | 直接调用某个 Skill | 手动触发，不等待 AI 自主判断 |
| /agent | 创建、查看、调用子代理（SubAgent） | 手工创建专项 SubAgent |
| /plugin | 插件管理界面（discover /installed） | 发现、安装、卸载插件 |
| /login | 使用 Claude 官方订阅会员登录 | 持有 Claude Pro/Max 会员时使用 |
| /simplify | 派 3 个子 Agent 从代码质量 / 性能 / 复用性三个角度优化 | 快速全面优化已有代码 |

最常用的三个命令详解

/compact ------ 上下文压缩 （必须掌握）

这是解决 "用久了 AI 变笨" 的核心功能。长时间使用 Claude Code 后会出现回复变慢、输出质量下降的现象：每一轮对话、读取的文件、执行操作的返回结果都会持续占用上下文空间。模型上下文上限虽为 200K，但实际有效可用比例仅 60%-80%，内容堆积越多，AI 越难抓住重点。

/compact 等价于给上下文 "整理桌面"，将历史对话压缩为精简摘要，释放上下文空间。

配套命令：/context ------ 监控上下文余量

在执行 /compact 之前，先使用 /context 查看当前占用情况；该命令会详细展示上下文各模块占比，包含 MCP、Skill 各自消耗的 token 数量，直观定位占用上下文的来源。

> /context
上下文使用情况：
  已使用：142,000 / 200,000 tokens (71%)
  ├─ 对话历史：89,000 tokens
  ├─ CLAUDE.md：2,100 tokens
  ├─ Skills：12,500 tokens
  └─ MCP 工具：4,800 tokens

/c ompact vs /clear ------ 命令区分

|------------|---------------------|---------------------|
| 命令 | 效果 | 适用时机 |
| /compact | 将历史对话压缩为摘要，保留关键决策信息 | 同一任务对话过长，需要继续迭代开发 |
| /clear | 彻底清空全部上下文，等同于重启会话 | 单个独立任务完全结束，开启全新业务需求 |

使用心法

一个任务执行完，宁可多次执行 /clear 重新交代项目背景，不要无限延长单轮对话。每一次 /clear 都会让模型重新聚焦当前需求，减少信息冗余干扰。前提：配置好三层记忆，要不都需要重新读取。

/rewind ------"后悔药"（双击 ESC 快捷启动）

当你让 CC 修改代码后，结果不满意或项目被改坏时，可使用内置回滚机制：对话输入 /rewind，或直接双击 ESC，即可打开回滚选择界面。

注意底线 提醒：/rewind 仅能撤销 CC 编辑过的文件；终端执行的命令（安装依赖、下载文件、修改数据库等）无法回滚。

/memory ------ 记忆管理

Claude Code 具备跨会话长期记忆系统，会自动记录你的个人偏好、项目信息，新会话仍可复用。输入 /memory 可编辑全局/项目 CLAUDE.md、开启 Auto Memory 自动记忆，完整记忆体系见 4.2 节记忆系统。

/review ------ 代码审查

完成功能开发后，让 AI 审查你的代码质量：

> /review

AI：正在审查项目代码...

审查结果：
代码结构清晰
注意： api/bookmarks.ts 第15行：缺少输入验证
注意： components/BookmarkList.tsx：建议添加 Loading 状态
发现潜在安全问题：SQL 查询未使用参数化查询

3.3.4 快捷键速查

|------------------------|---------------------------------------------|
| 快捷键 | 作用 |
| Enter | 发送消息 / 确认操作 |
| Shift + Enter | 也是发送（不是换行！超多新手在这里发出了半截提示词） |
| Option + Enter (Mac) | 换行输入（在提示词里换行不发送） |
| Ctrl + Enter (Windows) | 换行输入（同上） |
| Ctrl + C | 中断当前操作 |
| Esc | 取消正在生成的内容 |
| Esc × 2（双击） | 启动 /rewind 回滚界面 |
| Shift + Tab | 三种运行模式循环切换 (Normal/Auto-Accept/Plan，详见 4.9) |
| ↑ / ↓ | 浏览历史消息 |
| Ctrl + B | 让当前运行的命令到后台跑（不阻塞对话） |
| Ctrl + O | 查看 Auto Memory 记录的具体内容 |

3.3.5 输入与交互高级技巧

除了打字对话，cc 还有几种交互方式能大幅提升效率。

1. ! 进入 Bash 模式（不用新开终端跑命令）

在 cc 对话窗口里输入文字默认是在跟 cc 对话，不是跑 shell 命令。要跑命令有两种常见做法：

推荐：会话内以 ! 开头直接执行命令

# 推荐：会话内以 ! 开头直接执行命令
> !npm run dev
> !node app.js

替代方案：单独打开外部终端执行命令

提示：后台运行命令会阻塞对话（如启动 dev 服务），按下 Ctrl+B 可将进程转入后台，不影响继续和 AI 对话。

2 . @文件/目录 精准引用，精简上下文消耗

CC 不会预加载全部项目文件，按需现场读取；主动用 @ 指定文件路径，可减少 AI 检索项目产生的 token 损耗。

# 直接引用文件路径，输入时自动弹出文件候选
> 参考 @src/auth/login.ts 的风格，在 @src/auth/ 新增 register.ts

# 长需求写在文档内，通过 @ 引用文档
> 按照 @docs/feature-spec.md 的需求完成开发

小知识：反直觉， 指令文字越简短，AI 需要检索项目的 token 越多；搭配 @ 指定文件、描述清晰，token 开销更低，输出结果更精准。

（理解：我们给大模型的提示词是经过cc的，你给的提示词比较少，cc需要搜索更多相关的文件后发给大模型，大模型收到的提示词反而多。）

3 . 粘贴图片（多模态识图能力）

直接拖拽图片至对话框，或 Ctrl+V 粘贴图片，适用场景：

注意：cc是支持多模态的，但是deepSeekV4pro不支持多模态，想要多模态可以换一个模型。

1. 上传设计参考图，让 AI 复刻 UI 页面
2. 粘贴报错截图，自动识别、排查代码异常
3. 上传架构图，按照图示结构实现项目

4. 三种启动参数（命令行启动时）

claude # 默认启动

claude -c # 等同于 --continue，启动直接接续上次会话

claude --permission-mode plan # 启动后直接进入 Plan Mode（详见第8节）

claude --dangerously-skip-permissions # "危险模式"：自动放行所有操作，无确认弹窗

注意：危险模式 --dangerously-skip-permissions（绿灯模式）需谨慎使用，仅适合沙箱环境、完整 Git 存档、练习项目；生产项目不推荐，新手建议从默认模式开始使用。

3.4 Claude code实战工作流

了解完基础操作后，下面介绍一套完整开发工作流，类比学会方向盘、油门后完整上路实操。

3.4.1 官方推荐工作流：Explore → Plan → Implement → Commit

Claude Code 标准开发流程分为四个阶段：

1. Explore（探索）：在 Plan Mode 中读取代码、检索引用，理清项目现有状态

2. Plan（规划）：输出完整实现方案、梳理边界场景，由人工审核确认

3. Implement（实施）：退出 Plan Mode，按照确认方案完成代码开发

4. Commit（提交）：自动生成规范提交信息，执行 Git 提交

单轮开发完成后，回到第一阶段开启下一项开发任务。

各阶段详细对照表

|-----------------|---------------------|-------------------------------|----------------------|
| 阶段 | 人工操作 | AI 执行动作 | 推荐运行模式 |
| ① Explore（探索） | 告知 AI 需要改动的代码范围 | 读取关联文件、检索代码引用、梳理项目结构 | Plan Mode |
| ② Plan（规划） | 要求 AI 输出详细方案并人工审核 | 生成实现方案、评估异常边界、梳理修改文件清单 | Plan Mode |
| ③ Implement（实施） | 退出 Plan Mode，确认执行开发 | 按方案依次修改文件、执行构建 / 测试命令 | Normal / Auto-Accept |
| ④ Commit（提交） | 指令 AI 生成提交说明并提交代码 | 生成标准化 commit message，可一键创建 PR | Normal |

分段原因：

如果跳过规划直接开发，例如仅告知 AI "新增软删除功能"，容易出现 AI 无规划修改十余个文件、改动全局过滤器、破坏现有接口的问题，后续需要手动逐个回滚修复。

在 Plan Mode 多花费 5 分钟敲定方案，能在实施阶段节省 30 分钟返工成本；Plan Mode 完整用法详见 4.9 节。

3.4.2 项目设置（6 个应该习惯性做的动作）

开启新项目前，完成以下 6 项标准化前置设置，能大幅降低后续开发返工、上下文丢失、权限误操作等问题：

1.Step 1：项目初始化

向 AI 完整描述项目目标，由 AI 自动生成项目基础骨架目录与配置文件。

2.Step 2：建立 CLAUDE.md（项目专属长期上下文）

终端执行 /init 命令，AI 自动扫描项目生成标准化 CLAUDE.md，存储项目规范、技术栈、业务规则。

3.Step 3：配置权限与默认运行模式

编辑 .claude/settings.json；复杂大型项目推荐默认启用 Plan 模式，强制先规划再修改代码。

4.Step 4：功能迭代开发

单次只开发一个功能，严格遵循 Explore→Plan→Implement 四阶段工作流。

5.Step 5：代码审查与自动化测试

功能开发完毕执行 /review，让 AI 自动生成单元测试、执行校验，排查缺陷与安全隐患。

6.Step 6：提交代码保存进度

完成单功能开发后执行 git commit，留存完整版本快照，方便后续回滚。

3.4.3 完整示例：用 Claude Code 创建一个 Express Hello World API

一、整体流程概述

这份文档演示了 Claude Code 终端工具 全自动搭建 Node.js Express 接口项目的完整流程，全程仅需开发者输入需求描述，AI 分步执行命令、创建文件，每一步都需要人工确认后才会落地操作。

二、分步拆解操作流程

Step1 项目初始化（终端前置操作）

1.创建项目目录并进入（创建一个文件夹，可以用命令，也可以直接创建）

mkdir   hello world

cd      hello world

2.启动 Claude Code 交互终端

切换到plan模式（shift+tab）直接向 AI 提交完整开发需求文本：

请帮我初始化一个 Node.js Express 项目：

1. 使用 npm init 创建 package.json

2. 安装 express

3. 创建一个 app.js 入口文件

4. 实现一个 GET /hello 端点，返回 { message: "Hello AI Coding!" }

5. 端口使用 8000

AI 会拆分任务，逐条展示将要执行的动作，等待输入 y 确认后执行：

初始化 package.json（自动填充默认配置，无需手动回车）

npm init 

安装 Express 依赖包

npm install 

生成项目入口文件 app.js，写入完整接口代码

确认？（Y/N）

根据需求，AI 最终产出的完整可运行代码如下：

const express = require('express');

const app = express();

const port = 8000;

// 定义 /hello 接口

app.get('/hello', (req, res) => {

  res.json({ message: "Hello AI Coding!" });

});

// 启动服务

app.listen(port, () => {

  console.log(`服务运行在 http://localhost:${port}`);

});

Step 2：运行并验证

在 Claude Code 中输入指令

请启动这个服务器，然后用 curl 测试 

AI 自动执行操作（需手动确认）

[Claude Code] 将运行命令：node app.js

→ 确认？(y/n) y

执行输出：

服务器已启动，访问 http://localhost:3000/hello

访问方式与返回结果

浏览器地址栏输入：http://localhost:3000/hello

接口返回 JSON 内容：

json

{

  "message": "Hello AI Coding!"

}

验证标准

浏览器页面正常展示上述 JSON 响应，代表基于 Claude Code 的首个 API 创建完成。

Step 3：提交代码至 Git

在 Claude Code 中输入指令

请帮我初始化 Git 仓库并提交当前代码，commit message 

AI 自动执行的 Git 命令 --提交到的是本地仓库。

git init

git add .

git commit -m "初始化 Express Hello world API"