前端面试知识库

Appearance

Claude Code 使用教程 ⌨️ ​

"Claude Code 是 Anthropic 官方的终端 AI 编程助手，本文档涵盖从入门到进阶的完整使用指南。"

1. Claude Code 概述 ​

1.1 什么是 Claude Code ​

Claude Code 是 Anthropic 推出的命令行 AI 编程工具：

  • 终端原生: 在命令行中运行
  • Agentic: 能自主规划和执行多步任务
  • 权限模型: 精细的权限控制
  • 迭代执行: 持续工作直到任务完成

1.2 与 Cursor 的区别 ​

特性Claude CodeCursor
界面终端 CLIIDE GUI
触发显式命令快捷键/对话
权限显式授权IDE 集成
目标用户命令行用户IDE 用户

2. 安装与配置 ​

2.1 安装 ​

bash
curl -fsSL https://claude.ai/install.sh | sh

2.2 登录认证 ​

首次启动需登录，或手动执行 /login。

认证方式：

  • 订阅制：Claude Pro/Max 会员，无需额外配置
  • API Key：按 token 计费，需配置环境变量

使用国产模型：GLM、MiniMax 等，设置相应环境变量即可。

2.3 启动参数 ​

bash
claude                    # 标准启动
claude -c                 # 恢复上次会议
claude /path/to/project   # 指定目录
claude --dangerously-skip-permissions  # 危险模式（跳过权限）

3. 三种工作模式 ​

通过 Shift + Tab 循环切换：

模式特征行为适用场景
默认模式? For shortcuts修改前必询问学习、不确定时
自动模式Accept Edits On自动执行不询问快速开发、批量操作
规划模式Plan Mode只讨论不修改方案讨论、架构设计

4. 基础交互 ​

  • Enter：提交问题
  • Shift + Enter：换行继续输入
  • Ctrl + G：打开 VS Code 编辑器，保存后内容自动填入输入框
  • !：进入 shell 模式，执行终端命令（如 !npm run dev）
  • 拖拽图片 / Ctrl+V：粘贴图片到对话

5. 权限与操作确认 ​

5.1 文件操作权限 ​

当 Claude 要创建/修改文件时：

  • Allow：单次同意
  • Always allow [path]：以后访问该路径都不问
  • Deny：拒绝

5.2 终端命令权限 ​

执行命令时会询问，选项同上。危险模式 --dangerously-skip-permissions 可跳过所有权限，仅在可信环境使用。

5.3 权限分层 ​

层级操作
自动通过读文件、搜索、查看 git
需要确认写文件、编辑、删除、执行命令
显式权限网络访问、git 提交
禁止访问忽略文件、系统修改

6. 常用命令与快捷键 ​

6.1 快捷命令 ​

命令功能
/login登录认证
/help查看帮助
/memory编辑 CLAUDE.md
/hooks配置 Hooks
/skills查看 Agent Skills
/agent管理 Sub Agents
/mcp管理 MCP Servers
/plugin插件管理器
/tasks 或 /t查看后台任务
/compact压缩上下文
/clear清空上下文
/rewind回滚
/init生成 CLAUDE.md
/resume恢复上次会议

6.2 快捷键 ​

快捷键功能
Shift + Tab切换工作模式
Ctrl + G打开 VS Code 编辑器
Ctrl + B后台/前台切换任务
Ctrl + O查看上下文
Ctrl + C取消当前操作
ESC返回上级/退出
双击 ESC进入回滚界面
Shift + Enter输入框换行
Enter提交问题

7. 规划模式 ​

规划模式用于复杂任务：只讨论不执行，适合架构设计、需求分析。

7.1 使用流程 ​

  1. Shift + Tab 切换到规划模式
  2. 描述需求（如「将 HTML 项目重构为 React + TypeScript + Vite」）
  3. Claude 生成详细计划（项目结构、技术栈、功能清单、执行步骤）
  4. 可提出修改意见完善计划
  5. 选择执行方式：自动模式 / 默认模式 / 继续修改计划

7.2 执行选项 ​

  • 执行计划并进入自动模式：后续不再询问
  • 执行计划并使用默认模式：每次写入前都询问
  • 继续修改计划：完善后再执行

8. 终端与后台任务 ​

8.1 Shell 模式 ​

输入 ! 进入 shell，可执行 ls、npm install、npm run dev 等命令。

8.2 后台任务 ​

  • 启动服务后按 Ctrl + B 将任务放到后台
  • /tasks 或 /t 查看运行中的任务
  • 按 K 结束选中的任务

典型流程：!npm run dev → Ctrl+B 放后台 → 继续让 Claude 改代码 → 实时查看效果 → /tasks 按 K 关闭服务。

9. 回滚功能 ​

9.1 触发方式 ​

  • 命令：/rewind
  • 快捷键：双击 ESC

9.2 回滚选项 ​

选择回滚点后可选：

  • Rollback code & session：回滚代码和会话
  • Rollback session only：只回滚对话
  • Rollback code only：只回滚代码
  • Cancel：放弃

9.3 局限性 ​

Claude Code 只能回滚它自己写入的文件。终端命令创建的文件（如 mkdir、npm install 产生的 node_modules）需手动删除。建议用 git 管理版本，回滚作为补充。

10. 上下文管理 ​

长时间使用后上下文会膨胀，可：

  • /compact：压缩上下文，可指定策略如 /compact 重点保留用户提出的需求
  • /clear：清空上下文，全新开始
  • Ctrl + O：查看当前上下文

建议每完成一个大功能后执行 /compact。

11. CLAUDE.md 项目配置 ​

CLAUDE.md 让 Claude 每次启动时读取项目信息。

11.1 生成与编辑 ​

  • /init：自动生成
  • /memory：编辑 CLAUDE.md

11.2 配置级别 ​

级别位置作用范围
项目项目根目录 CLAUDE.md当前项目
用户~/.claude/CLAUDE.md所有项目

11.3 模板示例 ​

markdown
# 项目名称
## 项目概述
## 技术栈
## 开发规范
## 注意事项

12. Hooks 自动化 ​

Hooks 在特定时机自动执行逻辑：Pre/Post Tool Use、Tool Use Failed、Send Notification。

12.1 自动格式化示例 ​

/hooks → Post Tool Use → Matcher: write 或 edit → Hook 命令：

bash
echo '$JSON' | jq -r '.filePath' | xargs prettier --write

12.2 保存级别 ​

  • Local：settings.local.json，加入 .gitignore
  • Project：settings.json，随 git 分发
  • User：~/.claude/，不跟随项目

13. Agent Skills 与 Sub Agents ​

13.1 Agent Skills ​

给模型看的「说明书」，用于重复性任务（如每日总结、固定格式文档）。

创建：~/.claude/skills/xxx/skill.md，需包含 # name: 和 # description: 元数据。

使用：自动触发（识别意图）或手动 /skill-name 参数。

13.2 Sub Agents ​

拥有独立上下文和工具的独立 Agent，适合与主对话关联小、影响大的任务（如代码审核）。

特性Agent SkillSub Agent
上下文共享独立
适用与上下文关联大与上下文关联小
示例每日总结代码审核

创建：/agent → Create New Agent → 描述用途 → 选择工具（如 Read Only）→ 选择模型。

14. MCP 集成 ​

MCP 是大模型与外部工具沟通的协议。

14.1 安装与认证 ​

bash
# 安装（以 Figma 为例）
npx -y @modelcontextprotocol/server-figma

# 重启 Claude Code 或 /resume
# 认证
/mcp → 选择 server → authenticate

14.2 设计稿还原 ​

  1. 在 Figma 复制设计稿链接
  2. 输入「修改当前页面使其与 Figma 稿件一致」并粘贴链接
  3. Claude 调用 get_design_context、get_screenshot 获取精确的设计参数（间距、字体、颜色等）
  4. 生成精确代码

相比直接传图片，MCP 可获取结构化设计信息，还原更准确。

15. Plugins 插件 ​

插件打包了 skills、sub agents、hooks 等能力，一键部署。

15.1 安装 ​

/plugin → Discover → 选择插件 → 选择安装范围（用户/项目）→ 确认。

15.2 Frontend Design 示例 ​

安装后输入「按照 frontend-design 的要求做一个待办软件」，Claude 会加载官方 UI 设计直觉，生成更现代、美观的界面。

16. 典型工作流程 ​

16.1 新项目启动 ​

bash
mkdir project && cd project
claude
/init          # 生成 CLAUDE.md
/memory        # 编辑配置
# 提出需求

16.2 功能开发 ​

规划模式讨论 → 切换到自动模式 → 执行开发 → !npm run dev + Ctrl+B → 持续迭代

16.3 大型重构 ​

规划模式详细讨论 → 审查计划 → 执行 → git commit 保存 → /compact 压缩上下文

17. 实战案例概要 ​

案例一：待办应用 ​

从 HTML 快速原型开始 → 规划模式讨论重构为 React+TS+Vite → 执行并迭代 → 后台运行服务实时查看。

案例二：设计稿还原 ​

安装 Figma MCP → 认证 → 粘贴设计稿链接 → Claude 精确还原布局和样式。

案例三：重构与回滚 ​

规划模式讨论重构 → 执行 → 不满意时双击 ESC 回滚 → 终端创建的文件需手动清理（rm -rf node_modules 等）。

案例四：插件快速开发 ​

安装 frontend-design 插件 → 按插件规范生成更专业的 UI。

18. 常见问题 ​

问题解决
查看版本claude --version
升级curl -fsSL https://claude.ai/install.sh | sh
忘记登录/login
上下文太大/compact 或 /clear
关闭后台服务/tasks → 按 K
回滚后残留文件终端命令创建的文件需手动删除，建议用 git
Shift+Enter 不好用可能是版本过旧，重新安装升级

19. 延伸阅读 ​

前端面试知识库

Copyright © 2026