写给前端程序员的 Claude Code 使用指南

183 阅读5分钟

📋 目录


什么是 Claude Code

Claude Code 是 Anthropic 官方推出的命令行交互工具(CLI),专为软件工程任务设计。它能够:

  • 🔍 智能代码分析:理解和分析你的代码库
  • ✏️ 自动化编辑:精确修改代码文件
  • 🔧 执行命令:运行构建、测试、Git 操作等
  • 🤖 AI 辅助开发:提供架构建议、代码审查、问题排查

核心优势

  1. 无限上下文:通过自动摘要技术,突破传统 token 限制
  2. 专业工具集:内置文件读写、搜索、命令执行等工具
  3. 任务规划:自动分解复杂任务并跟踪进度
  4. 多模态支持:可以读取图片、PDF、Jupyter notebooks

安装与配置

安装 Claude Code

# 使用 npm 全局安装
npm install -g @anthropic-ai/claude-code

# 或使用 yarn
yarn global add @anthropic-ai/claude-code

# 或使用 pnpm
pnpm add -g @anthropic-ai/claude-code

初次配置

  1. 设置 API 密钥

    claude-code config set apiKey YOUR_API_KEY
    
  2. 选择模型

    # 可选: sonnet (平衡), opus (强大), haiku (快速)
    claude-code config set model sonnet
    
  3. 配置全局指令: 在 ~/.claude/CLAUDE.md 创建全局配置文件,所有项目都会应用这些规则。


基本使用

启动 Claude Code

# 在项目目录中启动
cd your-project
claude-code

# 或直接指定项目路径
claude-code --path /path/to/project

基本交互

# 询问代码问题
> 这个函数是做什么的?

# 请求修改代码
> 帮我优化这个查询性能

# 执行开发任务
> 运行测试并修复失败的用例

# 创建新功能
> 添加用户登录功能

内置命令

  • /help - 查看帮助信息
  • /clear - 清空对话历史
  • /tasks - 查看当前运行的后台任务
  • /config - 查看或修改配置
  • /exitCtrl+C - 退出 Claude Code

核心功能

1. 文件操作

读取文件

> 读取 src/main.ts 文件

Claude Code 会使用 Read 工具读取文件内容,支持:

  • 普通文本文件
  • 图片(PNG, JPG 等)
  • PDF 文档
  • Jupyter notebooks (.ipynb)

编辑文件

> 在 package.json 中添加一个新的依赖项

Claude Code 使用精确的字符串替换,确保修改准确无误。

搜索文件

> 查找所有使用 axios 的文件
> 搜索包含 "authentication" 的代码

使用 Glob(文件名匹配)和 Grep(内容搜索)工具。


2. 命令执行

运行构建和测试

> 运行 npm test
> 执行构建命令
> 安装依赖项

Git 操作

> 查看 git 状态
> 创建一个 commit,消息是 "修复登录bug"
> 创建一个 pull request

重要安全规则

  • ❌ 不会执行危险命令(如 git push --force
  • ❌ 不会跳过 git hooks(除非明确要求)
  • ✅ 提交前会显示 diff 供确认

3. 任务规划与追踪

Claude Code 会自动使用 Todo 列表追踪复杂任务:

> 实现用户认证功能,包括登录、注册、密码重置

Claude Code 会:

  1. 分解为多个子任务
  2. 标记当前进行中的任务(in_progress)
  3. 完成后标记为 completed
  4. 实时更新进度

你会看到类似这样的进度:

✓ 分析现有代码结构
⧗ 创建认证 API 端点
○ 实现前端登录表单
○ 添加密码加密
○ 编写单元测试

4. 代码探索

自动代码库分析

> 这个项目的架构是什么样的?
> 错误处理是在哪里实现的?

Claude Code 会:

  • 使用 Explore 代理深入分析代码库
  • 理解项目结构和架构模式
  • 识别关键文件和依赖关系

精确搜索

> 找到 UserService 类的定义
> 搜索所有 API 端点

高级特性

1. 斜杠命令 (Slash Commands)

在项目根目录创建 .claude/commands/ 文件夹:

# .claude/commands/review-pr.md
检查当前分支的代码变更:
1. 运行所有测试
2. 检查代码风格
3. 审查安全问题
4. 生成变更摘要

使用:

> /review-pr

2. 钩子 (Hooks)

~/.claude/config.json 配置钩子:

{
  "hooks": {
    "beforeToolCall": {
      "bash": "echo '执行命令: $COMMAND'"
    },
    "afterToolCall": {
      "edit": "npm run lint"
    }
  }
}

钩子类型:

  • beforeToolCall - 工具调用前执行
  • afterToolCall - 工具调用后执行
  • onError - 错误发生时执行

3. MCP 服务器集成

MCP (Model Context Protocol) 允许连接外部服务:

// ~/.claude/config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed"]
    }
  }
}

4. 计划模式 (Plan Mode)

对于复杂任务,Claude Code 可以进入计划模式:

> 重构整个认证系统

Claude Code 会:

  1. 进入计划模式
  2. 分析现有代码
  3. 制定详细实施计划
  4. 征求你的批准
  5. 然后执行计划

最佳实践

✅ 推荐做法

  1. 明确任务描述

    ✅ 好:在用户表单中添加邮箱验证,使用正则表达式
    ❌ 差:改进表单
    
  2. 一次专注一个任务

    • 让 Claude Code 完成当前任务再开始下一个
    • 复杂任务会自动分解
  3. 使用项目级配置

    • 在项目根目录创建 CLAUDE.md
    • 记录常用命令、架构说明、开发规范
  4. 利用 Git 工作流

    > 创建新分支 feature/user-auth
    > 实现功能...
    > 创建 commit
    > 创建 pull request
    
  5. 充分利用并行工具调用

    > 同时运行测试和代码检查
    

    Claude Code 会并行执行独立的操作。

❌ 避免做法

  1. 不要让 Claude Code 猜测

    • ❌ "修复那个 bug"(哪个 bug?)
    • ✅ "修复登录页面中密码验证失败的问题"
  2. 不要过度工程化

    • Claude Code 默认采用简单直接的解决方案
    • 只做必要的修改,不添加不需要的功能
  3. 不要在未读取文件前就修改

    • Claude Code 总是先读取文件再编辑
    • 确保理解现有代码