🚀 Claude Code 前端工程师最佳使用指南

针对 TypeScript + Node.js + React Native + Mac 优化

一、安装与配置

1.1 安装（Mac）

# 方法1：官方安装脚本（推荐）
curl -fsSL https://claude.ai/install.sh | bash

# 方法2：Homebrew
brew install --cask claude-code

# 验证安装
claude --version

1.2 首次启动

# 进入项目目录
cd your-project

# 启动 Claude Code
claude

# 首次登录需要认证，按提示操作即可

1.3 基础配置

# 创建项目根目录的 CLAUDE.md
touch CLAUDE.md

# 或使用官方初始化
claude init

二、项目配置模板

针对你的技术栈，建议在项目根目录创建 CLAUDE.md：

# 项目名称：[项目名]

## 技术栈
- 前端框架：React Native
- 语言：TypeScript
- Node.js: v18+
- 包管理：npm/yarn/pnpm

## 代码规范
- 使用 ESLint + Prettier
- TypeScript strict 模式
- 函数式编程优先
- 组件命名：PascalCase
- 文件命名：camelCase

## 项目结构
```
src/
├── components/     # React 组件
├── screens/       # 页面组件
├── navigation/    # 导航配置
├── services/      # API 服务
├── utils/         # 工具函数
├── hooks/         # 自定义 Hooks
├── types/         # TypeScript 类型
└── assets/        # 静态资源
```

## 常用命令
| 命令 | 说明 |
|------|------|
| `npm run ios` | 启动 iOS 模拟器 |
| `npm run android` | 启动 Android 模拟器 |
| `npm run lint` | 代码检查 |
| `npm test` | 运行测试 |
| `npm run build` | 构建生产版本 |

## 注意事项
- iOS 开发需要 Xcode
- Android 开发需要 Android Studio
- 发布前需要检查平台兼容性

三、常用命令与操作

3.1 基础对话

操作	命令/提示	说明
启动	claude	在项目目录运行
退出	exit 或 Ctrl+C	退出对话
继续	Continue	继续上次的输出
新建会话	Ctrl+Shift+O	新建会话

3.2 核心操作命令

命令	功能	示例
/edit	启动编辑模式	修改某个函数
/npm	运行 npm 命令	/npm install lodash
/test	运行测试	/test src/utils
/lint	运行代码检查	/lint
/review	代码审查	/review
/commit	Git 提交	/commit

四、React Native 开发实战

4.1 创建新组件

# 让 Claude 帮你创建一个组件
帮我创建一个用户头像组件，包含以下功能：
- 显示圆形头像
- 支持不同尺寸
- 支持加载失败显示默认图
- 使用 TypeScript

# Claude 会自动：
# 1. 创建组件文件
# 2. 创建 TypeScript 类型
# 3. 创建对应的样式
# 4. 导出组件

4.2 创建页面

# 创建登录页面
帮我创建一个登录页面，包含：
- 手机号输入框
- 验证码输入框
- 登录按钮
- 使用 React Native Paper 组件库
- 使用 React Navigation
- TypeScript

4.3 调试与修复

# 修复 TypeScript 错误
这个文件有 TypeScript 错误，帮我修复

# 调试 React Native 问题
我的 iOS 构建失败了，帮我分析日志

# 修复样式问题
这个组件在 Android 上显示有问题，帮我看看

4.4 API 集成

# 创建 API 服务
帮我创建一个用户 API 服务模块，包含：
- 获取用户信息
- 更新用户资料
- 使用 axios
- TypeScript 类型定义
- 错误处理

# 添加 API 调用
帮我在登录页面集成登录 API

五、TypeScript 最佳实践

5.1 类型定义

# 让 Claude 定义类型
帮我为用户模块创建完整的 TypeScript 类型定义，包括：
- User 接口
- UserProfile 接口
- ApiResponse 泛型
- 分页类型

5.2 类型转换

# 类型转换
帮我把这个 API 响应转换成 TypeScript 类型

# 添加类型守卫
帮我添加类型守卫来区分不同的 API 响应类型

5.3 类型增强

# 扩展第三方库类型
帮我为 react-native-paper 添加自定义主题类型

# 全局类型声明
帮我创建一个全局.d.ts 文件

六、测试与调试

6.1 单元测试

# 创建测试
帮我为 utils 目录下的函数创建 Jest 单元测试

# 运行测试
运行 src/services 目录的测试

# 修复测试
这些测试失败了，帮我修复

6.2 E2E 测试

# 配置 Detox
帮我配置 React Native E2E 测试框架

# 编写 E2E 测试
帮我创建一个登录流程的 E2E 测试

七、原生模块集成

7.1 iOS 原生模块

# 创建 Native Module
帮我创建一个 iOS 原生模块，用于获取设备信息

# 使用 CocoaPods
帮我添加一个 CocoaPods 依赖

7.2 跨平台代码

# 平台条件判断
帮我用 Platform.select() 处理平台差异

# 原生桥接
帮我创建一个使用 NativeModules 的 TypeScript 包装

八、性能优化

8.1 React Native 性能

# 优化渲染
这个列表渲染很慢，帮我优化

# 使用 useMemo/useCallback
帮我优化这个组件的性能

# 减少 bundle 大小
帮我分析并减少 React Native 包的体积

8.2 图片优化

# 图片加载优化
帮我实现图片懒加载

# 使用 Fast Image
帮我集成 react-native-fast-image

九、CI/CD 配置

9.1 GitHub Actions

# 创建 CI 配置
帮我创建一个 GitHub Actions 工作流，用于：
- 运行 TypeScript 类型检查
- 运行 ESLint
- 运行单元测试
- 构建 iOS 和 Android

9.2 Fastlane 集成

# 配置 Fastlane
帮我配置 Fastlane 用于自动发布

# 自动化构建
帮我创建一个 Fastlane lane 用于测试构建

十、实用技巧

10.1 高效提问

# ❌ 差提问
帮我看看这个代码

# ✅ 好提问
这个 React Native 登录页面在 iOS 模拟器上显示白屏，帮我：
1. 分析可能的原因
2. 检查代码中的问题
3. 给出修复方案

10.2 指定代码风格

# 指定风格
用函数式组件 + Hooks 重构这个类组件

# 指定规范
按照 Airbnb JavaScript Style Guide 重写这个函数

# 指定模式
用 Hooks + Context 实现状态管理

十一、MCP 服务器集成

MCP（Model Context Protocol）可以扩展 Claude Code 的能力：

# 常用 MCP 服务器
# - GitHub: 代码管理与 PR
# - Slack: 团队沟通
# - Notion: 笔记管理
# - 数据库: 直接查询数据库

# 配置示例
# 在 ~/.claude/settings.json 中添加 MCP 配置

十二、常见问题

问题	解决方案
首次启动慢	等待索引完成，后续会快
权限被拒绝	检查项目目录权限
API 限流	稍后再试或检查配额
文件未找到	确认当前工作目录

十三、相关资源

• Claude Code 官方文档
• React Native 官网
• TypeScript

十四、总结