# claudeCode-tips

**Repository Path**: xqrong/claude-code-tips

## Basic Information

- **Project Name**: claudeCode-tips
- **Description**: claudeCode 使用指南
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Claude Code 使用指南

## 简介

Claude Code 是 Anthropic 推出的 AI 编程助手，能够帮助开发者进行代码编写、调试、重构和项目管理。本指南汇集了 Claude Code 的最佳实践和使用技巧，基于实战经验整理而成。

## 一、安装配置

### 1. 基础安装
```bash
# 安装最新 Node.js
# 推荐使用 nvm 安装和管理 Node.js
nvm install node
nvm use node

# 全局安装 Claude Code
npm install -g @anthropic-ai/claude-code

# 启动 Claude Code
claude
```

### 2. 代理配置（可选）

#### Claude Code Top（推荐）
```bash
# Linux/macOS
export ANTHROPIC_BASE_URL=https://api.claude-code.top/api/claudecode
export ANTHROPIC_API_KEY=${API_KEY}
export ANTHROPIC_AUTH_TOKEN=${API_KEY}
claude

# Windows PowerShell
$env:ANTHROPIC_BASE_URL="https://api.claude-code.top/api/claudecode"
$env:ANTHROPIC_API_KEY="${API_KEY}"
$env:ANTHROPIC_AUTH_TOKEN="${API_KEY}"
claude
```

#### 月之暗面 Kimi K2
```bash
# Linux/macOS
export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic
export ANTHROPIC_AUTH_TOKEN=${API_KEY}
export ANTHROPIC_MODEL=kimi-k2-turbo-preview
export ANTHROPIC_SMALL_FAST_MODEL=kimi-k2-turbo-preview
claude
```

#### 智谱 GLM
```bash
# Linux/macOS
export ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic
export ANTHROPIC_AUTH_TOKEN=${API_KEY}
claude
```

### 3. 快速启动脚本（Mac）
将以下代码添加到 `~/.zshrc` 文件中：

```bash
# Claude Code Top
cc-cct() {
    unset ANTHROPIC_BASE_URL ANTHROPIC_AUTH_TOKEN ANTHROPIC_API_KEY ANTHROPIC_MODEL ANTHROPIC_SMALL_FAST_MODEL
    
    export ANTHROPIC_BASE_URL=https://api.claude-code.top/api/claudecode
    export ANTHROPIC_API_KEY=your_api_key_here
    export ANTHROPIC_AUTH_TOKEN=your_api_key_here
    
    echo "✅ 启动 Claude Code (claude-code.top)"
    claude
}

# Kimi K2
cc-kimi() {
    unset ANTHROPIC_BASE_URL ANTHROPIC_AUTH_TOKEN ANTHROPIC_API_KEY ANTHROPIC_MODEL ANTHROPIC_SMALL_FAST_MODEL
    
    export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic
    export ANTHROPIC_AUTH_TOKEN=your_api_key_here
    export ANTHROPIC_MODEL=kimi-k2-turbo-preview
    export ANTHROPIC_SMALL_FAST_MODEL=kimi-k2-turbo-preview
    
    echo "✅ 启动 Claude Code (Kimi K2)"
    claude
}

# GLM
cc-glm() {
    unset ANTHROPIC_BASE_URL ANTHROPIC_AUTH_TOKEN ANTHROPIC_API_KEY ANTHROPIC_MODEL ANTHROPIC_SMALL_FAST_MODEL
    
    export ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic
    export ANTHROPIC_AUTH_TOKEN=your_api_key_here
    
    echo "✅ 启动 Claude Code (GLM)"
    claude
}
```

## 二、核心功能

### 1. 代码生成与修改
- **智能代码补全**：根据上下文自动生成代码
- **代码重构**：优化代码结构和性能
- **多语言支持**：支持 Python、JavaScript、TypeScript、Go、Rust 等主流编程语言

### 2. 项目管理
- **文件操作**：读取、编写、编辑项目文件
- **目录结构分析**：理解和导航复杂项目结构
- **Git 集成**：提交代码、创建 PR、管理分支

### 3. 调试与测试
- **错误诊断**：识别和修复代码错误
- **测试编写**：生成单元测试和集成测试
- **性能优化**：分析代码性能瓶颈

## 三、使用技巧

### 1. 项目初始化
```bash
# 进入项目后，先初始化 CLAUDE.md 文件
/init

# 这个文件会一直在 AI 的上下文中，辅助理解项目
```

### 2. 模式切换
```bash
# 使用 Shift + Tab 切换到 Plan Mode
# 这样 Claude 会先与你过一下开发计划，然后再去开发，结果更可控

# 使用 Shift + Tab 切换到 Bypass Permissions 模式
# 谨慎使用！启动时加上 --dangerously-skip-permissions 参数
claude --dangerously-skip-permissions
```

### 3. 上下文管理
```bash
# 清空上下文
/clear

# 压缩上下文
/compact

# 主动添加上下文（比 AI 自动寻找效果更好）
@filename

# 粘贴截图（Mac: Control + V，Windows: Ctrl + V）
# 支持直接粘贴截图进行分析

# 换行输入
\ + 回车
```

### 4. 全局记忆设置
```bash
# 启动 Claude Code 后，输入 /memory 选择 User memory
# 推荐设置以下内容：

# 语言设置
使用中文对话，以及使用中文显示每一步骤的标题

# 态度/角色
辩证看待我与你的对话，如果觉得我说的不对，可以进行讨论与反驳

# 开发哲学
## 整体思路
- **反对过度工程化**：不为了"规范"而牺牲简洁性，实用性 > 理论完美性
- **直觉检验**：如果需要解释为什么这样嵌套，说明可能过度复杂了
- **功能优先组织**：按业务功能划分文件结构，相关组件就近聚合
- **维护导向架构**：文件组织以"找得到、改得快"为核心，避免为了抽象而抽象

## 前端开发
- **质疑每个包装层**：每个 div/section 都要有存在的理由，否则删除
- **功能性命名**：`like-btn` `user-card` `nav-item` 比 `.button-wrapper` `.card-container` `.navigation-list-item-element` 更好
- **语义平衡**：类名要足够描述功能，但避免过度冗长
```

### 5. 高效沟通技巧
```bash
# 不要吝啬 Token！
# 如果感觉效果不好，大概率是人和 AI 沟通的问题

# 建议使用语音输入，把所有思考过程都语音转文字说出来
# 也可以告诉 Claude："不要吝啬 token，多思考透彻这个问题，有不理解的及时沟通，沟通清楚再干活"

# 主动优化上下文
# 当完成一个模块的工作后，建议主动优化上下文，以减少历史对话内容对新任务的干扰
```

### 6. 实用命令
```bash
# 读取文件内容
"请读取 src/components/Header.tsx 文件"

# 编辑特定文件
"在 utils/api.ts 中添加错误处理逻辑"

# 代码审查
"请审查这个函数的复杂度和可读性"

# 性能分析
"分析这个查询的性能瓶颈"

# Git 操作
"提交当前更改，提交信息为 '添加用户认证功能'"
"创建一个新的功能分支"
```

### 🛠️ 常用命令模式

#### 文件操作
```bash
# 读取文件内容
"请读取 src/components/Header.tsx 文件"

# 编辑特定文件
"在 utils/api.ts 中添加错误处理逻辑"

# 创建新文件
"创建一个用于用户认证的 middleware 文件"
```

#### 代码分析
```bash
# 代码审查
"请审查这个函数的复杂度和可读性"

# 性能分析
"分析这个查询的性能瓶颈"

# 安全检查
"检查这段代码是否存在 SQL 注入风险"
```

#### 项目管理
```bash
# Git 操作
"提交当前更改，提交信息为 '添加用户认证功能'"
"创建一个新的功能分支"

# 依赖管理
"更新 package.json 中的依赖版本"
"检查是否有安全漏洞"
```

### 📋 项目工作流

#### 1. 项目初始化
```bash
# 了解项目结构
"分析当前项目的架构和主要功能"
"列出所有配置文件和依赖"
```

#### 2. 功能开发
```bash
# 需求分析
"根据用户故事实现登录功能"
"创建用户管理模块的 API 接口"
```

#### 3. 代码质量
```bash
# 代码规范
"按照 ESLint 规则格式化代码"
"添加 TypeScript 类型定义"
```

#### 4. 测试部署
```bash
# 测试
"为新功能编写单元测试"
"运行集成测试并修复失败用例"
```

## 最佳实践

### 🎨 代码风格
- **保持一致性**：遵循项目的现有代码风格
- **添加注释**：为复杂逻辑添加清晰的注释
- **错误处理**：实现完善的错误处理机制

### 🔒 安全考虑
- **输入验证**：始终验证用户输入
- **权限控制**：实现适当的访问控制
- **敏感信息**：不要硬编码密钥和密码

### 📊 性能优化
- **懒加载**：按需加载资源和组件
- **缓存策略**：实现适当的缓存机制
- **代码分割**：拆分大型代码块

### 🧪 测试策略
- **单元测试**：测试独立的功能模块
- **集成测试**：测试模块间的交互
- **端到端测试**：模拟真实用户操作

## 常见问题解决

### 💡 代码错误修复
```bash
# 类型错误
"修复 TypeScript 类型错误"
"解决 Python 的导入问题"

# 逻辑错误
"调试这个算法的边界情况"
"修复并发处理的竞态条件"
```

### 🚀 性能问题
```bash
# 数据库优化
"优化 SQL 查询语句"
"添加数据库索引"

# 前端优化
"实现虚拟滚动"
"优化图片加载"
```

### 🔧 环境配置
```bash
# 开发环境
"配置 Docker 开发环境"
"设置 CI/CD 流水线"

# 依赖问题
"解决版本冲突"
"清理 node_modules"
```

## 高级技巧

### 🤖 自动化工作流
```bash
# 代码生成
"基于数据库 schema 生成 CRUD 接口"
"自动创建项目文档"

# 代码迁移
"将 Vue 2 代码迁移到 Vue 3"
"JavaScript 转换为 TypeScript"
```

### 📈 代码分析
```bash
# 复杂度分析
"计算函数的圈复杂度"
"识别代码异味"

# 架构评估
"评估项目的可扩展性"
"分析模块耦合度"
```

## 总结

Claude Code 是一个强大的编程助手，掌握正确的使用方法可以显著提高开发效率。关键在于：

1. **清晰的沟通**：提供具体、详细的指令
2. **合理的期望**：理解 AI 的能力和限制
3. **持续学习**：不断探索新的使用技巧
4. **质量把控**：始终审查 AI 生成的代码

通过遵循本指南的建议，你可以充分发挥 Claude Code 的潜力，让编程变得更加高效和愉快。

## 四、MCP 工具推荐

### 1. Playwright - 网页自动化测试
**功能**：让 Claude Code 能够看到网页的结果，进行浏览器自动化操作

**安装**：
```bash
claude mcp add playwright npx @playwright/mcp@latest
```

**使用案例**：
```bash
# 使用 Playwright MCP 查看本地网页
"使用 Playwright 查看 localhost:3000"
# 然后可以提出具体需求，如：
"请分析这个页面的加载性能"
"帮我测试这个表单的提交功能"
```

### 2. Context7 - 最新代码文档
**功能**：让 Claude Code 能够阅读最新的代码文档和示例

**安装**：
```bash
# 远程服务器连接
claude mcp add --transport http context7 https://mcp.context7.com/mcp

# 使用 SSE 传输
claude mcp add --transport sse context7 https://mcp.context7.com/sse

# 本地服务器连接
claude mcp add context7 -- npx -y @upstash/context7-mcp
```

**使用案例**：
```bash
# 获取最新的框架文档
"请查找 React 18 的最新文档中关于并发模式的说明"
"获取 Next.js 14 的 App Router 最佳实践"
```

## 五、最佳实践

### 1. 开发流程
1. **项目初始化**：使用 `/init` 创建 CLAUDE.md 文件
2. **计划模式**：使用 `Shift + Tab` 切换到 Plan Mode，先讨论开发计划
3. **上下文管理**：主动添加相关文件，使用 `@filename`
4. **定期清理**：完成模块后使用 `/clear` 或 `/compact` 优化上下文
5. **代码审查**：生成代码后进行人工审查和测试

### 2. 性能优化
- **不要吝啬 Token**：提供足够的上下文信息
- **使用语音输入**：表达完整的思考过程
- **主动沟通**：有不理解的地方及时提问
- **分步执行**：复杂任务分解为多个小步骤

### 3. 安全注意事项
- **谨慎使用 Bypass Permissions 模式**：避免执行危险命令
- **代码审查**：始终审查 AI 生成的代码
- **备份重要文件**：在重大修改前先备份
- **测试环境**：先在测试环境验证，再应用到生产环境

### 4. 常见问题解决
- **效果不佳**：检查是否提供了足够的上下文
- **理解偏差**：使用 Plan Mode 先确认理解
- **代码错误**：提供错误信息和相关代码
- **性能问题**：使用专门的性能分析工具

## 六、总结

Claude Code 是一个强大的 AI 编程助手，通过正确的使用方法可以显著提高开发效率：

### 关键要点：
1. **正确配置**：选择合适的服务商和模型
2. **善用工具**：利用 MCP 工具扩展功能
3. **有效沟通**：提供清晰的上下文和指令
4. **模式切换**：根据需要使用不同模式
5. **持续学习**：不断探索新的使用技巧

### 进阶建议：
- 设置全局记忆配置个人偏好
- 使用快速启动脚本提高效率
- 定期清理和优化上下文
- 结合其他开发工具形成完整工作流

通过遵循本指南的建议，你可以充分发挥 Claude Code 的潜力，让编程变得更加高效和愉快。

---

**重要提醒**：
- 使用 Bypass Permissions 模式时要格外小心
- 始终审查 AI 生成的代码
- 定期备份重要文件
- 在生产环境使用前务必充分测试