Claude Code 学习笔记

Claude Code 功能介绍
前言：市场上还有很多类似的编程Agents，比如Codex、OpenCode等，其实他们无论从功能还是使用上，都跟Claude Code没有太大的区别。

PART 01 环境搭建与基础交互

1. 安装Claude Code
   • Claude Code 官方链接：https://claude.com/product/claude-code
   • Windows 用户请使用 Powershell
2. 登陆与授权
   • /login 登陆指令，主动触发登陆流程
   • 官方提供了两种标准的接入方式
     • 订阅制：例如购买Claude Code的Pro或者是Max会员
     • API Key：按照Token的用量计费，用多少花多少
   • 没有办法使用Claude的官方订阅或者是API，这么办？
     • 可以使用国产模型来驱动Claude Code比如说是GLM MiniMax等等
3. 第一个实战问题
   • 使用Claude Code做一个待办软件，使用HTML实现
     • 执行时Claude Code会进行咨询，并给出对应的处理方式
       • 例如：Do you want to create index.html，它想创建一个index.html文件，询问你是否可以，给出了以下处理方式
         • Yes，同意创建当前的这么一个文件，如果接下来还要创建其它文件的话，会再次询问
         • Yes，allow all edits during this session（shift+tab），本次会话期间，后续所有需要创建的文件都会默认通过
         • No，不同意创建，并且可以向Claude Code继续输入你的想法
4. 三种模式详解（默认/自动/规划）
   • 默认模式：？for shortcuts，修改或创建新的文件前一定询问用户，最稳妥
   • 自动模式：▶️▶️ accept edits on，自动修改文件，最方便
   • 规划模式：’’ plan mode on，只讨论、不修改文件，适合构思
   • 切换模式快捷方式：shift+tab
     PART 02 复杂任务处理与终端控制
5. 执行终端命令（Bash）
   • 输入“！”感叹号，例如【! open index.html】/windows用户使用【! start index.html】，打开index.html文件
6. 使用规划模式（Plan Mode）
   • 该模式专门用来讨论方案和确定细节的
7. 打开VSCode标签页
   • 快捷键：Ctrl+G
   • 便于快速编辑复杂的会话消息
8. 跳过所有权限检测（dangerously-skip-permissions）
   • 场景，在使用规划模式完成方案和细节确定后，Claude Code会向你咨询，是否执行
     • Would you like to proceed？，请问是否要继续执行
       • Yes，and auto-accept edits（shift+tab），执行计划，并且进入到同意模式，后续新增或修改文件前不再询问用户了
       • Yes，and manually approve edits，执行计划，后续会使用默认的模式，后续新增或修改文件前，都会询问用户
       • Type here to tell Claude what to change，继续修改计划，如果你对计划不满意，可以继续输入
   • 问题：在【自动模式下】，Claude code在需要执行，例如：mkdir -p ….内容的时候，依然会停止并进行询问呢？
     • 因为自动模式时针对写入文件的时候，但不包含执行终端命令，Claude Code认为执行终端命令是一个非常危险的操作，所以需要咨询用户。
     • Do you want to proceed？，请问是否继续？
       • Yes，同意本次执行，但是下次依然会进行询问
       • Yes，and always allow access to src/ from this project，同意本次执行，并告知以后可以自由访问src目录，不用询问用户
       • No，不同意
   • 启动Claude Code的时候，加上一个选项dangerously-skip-permissions，让Claude Code想执行什么命令就执行什么命令
     • 指令：claude —dangerously-skip-permissions
9. 后台任务管理（Background Tasks）
   • 场景：使用【! npm run dev】的时候，你输入会话内容，Claude Code是接收不到的，因为当前在某个任务中，可以使用Ctrl+b把当前任务放置在后台运行
   • 输入【/tasks】可以查看任务，输入【k】可以关闭掉这个服务
     PART 03 多模态上下文管理
10. 版本回滚（Rewind）
    • 指令：/rewind，或者直接按两下esc，就可以进入到回滚页面了
    • 选择Claude Code事先创建好的回滚点，回车就可以了
    • Claude Code 会提供四个选项
      • Restore code and conversation，回滚代码和会话
      • Restore conversation，只回滚会话
      • Restore code，只回滚代码
      • Never mind，放弃回滚
    • 注：回滚前请关闭所有相关的任务
    • 问题：即使选择了回滚代码，但是在工程目录中还是存在多余的文件？
      • 因为使用终端命令创建的文件内容是不会被回滚的，例如node_modules等
      • Claude Code只会回滚由它创建文件内容
      • 建议：不要过于依赖Claude Code的代码回滚功能，如果需要精准回滚，还是使用git会更好一点
11. 图片处理
    • 背景：我使用Figma工具设计了一个功能页面，我希望Claude code仿照这个界面进行开发
      • 将设计稿的图片传给Claude Code就可以了，上传图片有以下两种方案
        • 第一种：直接将图片文件，拖拽到Claude Code的终端界面
        • 第二种：复制图片，进入到Claude Code的终端界面，按Ctrl+V，这里注意如果是MacOs用户，也需要使用Ctrl+V不是Command+V
    • 问题：Claude Code 根据图片制作的效果不尽人意，例如布局和字体格式大小都和图片会有区别
      • 可以使用MCP来实现这个还原Figma设计稿的需求
12. 安装MCP Server（以Figma为例）
    • Figma MCP Server 官方安装说明：https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/#claude-code
    • 指令：claude mcp add --transport http figma https://mcp.figma.com/mcp
    • 使用【/mcp】指令查看目前所安装的MCP工具
13. 恢复历史会话（Resume）
    • 第一种：启动Claude Code后执行【/resume】命令，回到之前的会话
    • 第二种：启动Claude Code的时候加上一个参数，执行【Claude -c】，c是continue的缩写，功能是打开Claude Code，并自动恢复上一次的对话
14. 使用MCP工具还原设计稿
    • 首次使用需要鉴权后才能使用
    • 使用【/mcp】指令查看目前所安装的MCP工具，选择安装好的【Figma】的MCP工具
    • 选择【Authenticate】，会自动弹出一个网页提示需要进行授权，点击【Agree & Allow Access】，即可完成授权
    • 返回Claude Code选择【Figma】的MCP工具 ，即可查看
      • View tools：查看当前MCP Server内部所包含的工具列表
      • Re-authenticate
      • Clear authentication
      • Reconnect
      • Disable
    • 使用【Figma】的MCP工具，可以直接将Figma的设计稿分享链接丢给Claude Code进行识别处理，通过其MCP Server内部的工具，能够将设计稿的详细参数，例如字体的大小样式，页面布局等，传输给Claude Code，从而使得Claude Code所编程的页面更加贴合Figma设计稿原件
15. 上下文压缩与清除
    • 执行【/compact】命令，可以对当前会话的上下文进行压缩
    • 也可以在命令后追加一些具体的要所策略，例如【/compact 重点保留用户的需求】
    • 执行【Ctrl+O】可以查看所有的压缩内容
    • 作用是保障了Claude Code的性能，以及后面执行任务时，减少了Token的消耗量
    • 压缩后的内容都是会和当前会话进行绑定
16. 清空会话
    • 执行【/clear】命令，会直接把当前所有上下文内容都给清空掉
17. 项目记忆文件(CLAUDE.md)
    • 让Claude Code每次启动后，都自动读取一些我们自己设定的信息
    • 执行【/init】命令，让Claude Code生成一份CLAUDE.md文件，默认创建的是项目级别
    • 执行【/memory】命令，查看CLAUDE.md文件，会提供以下两种选项：
      • Project memory，项目级别，对应的文件就放在当前的目录里，对当前项目生效
      • User memory，用户级别，对应的文件放在用户目录里，对当前用户生效
    • 注：修改完CLAUDE.md文件后需要重启Claude Code，让其生效
      PART 04 高级功能扩展与定制
18. Hook：允许用户在运行工具前后等时机，执行一段指定的逻辑，比如代码自动格式话
    • 执行【/hooks】命令，会出现以下提示
      • PreToolUse-Before tool execution，工具使用前
      • PostToolUse - After tool execution，工具使用后
      • PostToolUseFailure -After tool execution fails，工具执行失败后
      • NotificationWhen notifications are sent，通知发送通知时
      • UserPromptSubmit-When the user submits a prompt，当用户提交提示时
    • 选择【+ Add new matcher…】，选择对应的工具，例如我想要在创建和修改文件的时候，需要在Tool Matcher输入框中输入【Write|Edit】
      • Writer（single tool）
      • Write|Edit（multiple tools）
      • Web.*（regex pattern）
    • 选择【+ Add new hook】，在Command输入框中输入我们具体的格式化命令
      • Claude Code 在运行的时候会给传递给我们一份JSON
        • {“tool_input”:{“file_path”:”/User/yonghu/mulu/my-todo/index.html”}}
      • 例：jq -r ‘.tool_input.file_path’ | xargs prettier —write
        • jq 是解析JSON的一个程序
        • 具体意思是，使用jq来获得当前编辑好的文件路径，然后使用prettier来格式化这个文件
    • Claude Code会提示我们将hook保存到哪一级
      • Where should this hook be saved？
        • Project settings（local），本地的项目级别，对本机本项目生效
          • 配置会存储在项目目录里面的settings.local.json里
          • 然后还会把settings.local.json加入到git的.gitignore文件里面
          • 这个文件不会共享给别人
        • Project settings，项目级别，对本项目生效
          • 所有使用这个项目的用户，都能用到这个Hook它对应的配置文件
          • 配置会存储在settings.json里
          • 这个文件会随着Git分发给所有人
        • User settings，用户级别，对当前用户生效
          • 对应的配置保存在用户目录里
          • 每一个用户都有一份，不会互相影响，也不会跟项目绑定
19. Agent Skill
    • 在./claude/skills目录下新建一个名称为【daily-reprot】的skill目录
    • 在【daily-reprot】的skill目录中创建一个【SKILL.md】文件，注意文件名称是固定的必须叫【SKILL.md】
    • 在文件中填入skill的内容
      • name：skill的名称
      • description：skill的描述
      • Skill的具体描述
    • 重启Claude Code，执行【/skills】命令就可以查看，刚创建的Agent skill是否被发现挂接
    • 后续的任务执行中，Claude Code会根据会话内容来识别使用对应的Agent skill
    • 我们还可以主动发起这个Agent Skill，例如：【/daily-reprot 写一份每日总结】，这个操作省去了大模型意图识别的过程
20. SubAgent
    • SubAgent是一个独立的Agent有着自己独立的上下文，独立的工具，独立的skill，可以独立完成某一件事情
    • 案例，创建一个用于代码审核的SubAgent
      • 执行【/agents】命令，选择Create new agent，然后选择agent的类型
        • Project，项目级别
        • Personal，用户级别
      • 下面选择Agent的创建方法
        • Generate with Claude（recommended），使用Claude Code初始化，推荐方法
        • Manual configuration，手动创建
      • Create new agent：描述agent要做的事情
        • 例：这是一个用于代码审核的SubAgent。在用户要求“代码审核”的时候调用它。
      • 选择SubAgent能使用的工具
        • All tools，所有
        • Read-only tools，只读
        • Edit tools，修改
        • Execution tools，执行
        • Other tools 其他的
      • 这里选择只读Read-only tools就可以
      • Automatic color，SubAgent执行是时候，使用什么颜色显示
        • Red
        • Blue
        • Green
        • Yellow
        • Purple
        • Orange
        • Pink
        • Cyan
      • 之后Claude Code就会生成SubAgent了，可以按【E】来进行编辑查看
        • code-reviewer.md文件
        • name：名称
        • description：描述
        • Model：使用的模型
        • color：颜色
21. Skill 与 SubAgent的区别
    • Agent Skill：共享主对话上下文，意思就是它执行过程中的每一行日志，每一个思考过程都会记入到你的当前上下文
      • 最适合处理的任务：例如日志总结
        • 与上下文，关联大
        • 对上下文，影响小
    • SubAgent：拥有自己完全独立的上下文，启动它时，它会开辟一个全新的对话窗口，只会把最终的执行结果传输给Claude Code
      • 最适合处理的任务：例如代码的审核
        • 与上下文，关联小
        • 对上下文，影响大
22. Plugin
    • 全家桶的安装包，有点像是macOs的DMG或者是Windows下面的EXE文件
    • 它把skill、SubAgent、Hook等能力打包在一起，只需一键安装，Claude Code就能瞬间获得整套高级能力
    • 执行【/plugin】命令，进入到插件管理器
      • Discover，发现新插件
      • Installed，已安装的插件
      • Marketplaces，插件市场
    • 示例，在Discover中找到【frontend-design】插件， 按回车安装
      • Install for you（user scope），对当前用户生效
      • Install for all collaborators on this repository（project scope），对当前项目生效
      • Install for you，in this repo only（local scope），对当前用户当前项目生效
      • Open homepage
      • Back to plugin list
      • 使用，【按照 frontend-design 的要求做一个待办软件，使用HTML】