Claude Code 深度体验：终端里的AI编程革命

1
2
3
4
5
6
7
8

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

# 进入项目目录
cd your-project

# 启动
claude

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

You: 帮我看看 src/api/user.ts 里有什么问题

Claude: 我来读取这个文件...
[读取 src/api/user.ts]

发现了几个问题：
1. 第23行：缺少错误处理
2. 第45行：类型定义不完整
3. 第67行：存在潜在的内存泄漏

要我修复吗？

You: 修

Claude: 
[编辑 src/api/user.ts]
已完成修复，主要改动：
- 添加了 try-catch 包装
- 补充了 UserResponse 类型定义
- 在 useEffect 中添加了 cleanup 函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

You: 跑一下测试，看看有没有挂的

Claude:
[执行 npm test]

测试结果：
✓ 45 passed
✗ 2 failed
  - user.test.ts: "should handle empty input"
  - auth.test.ts: "should refresh token"

要我修复这两个失败的测试吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

You: 把今天的改动提交一下，写个清晰的commit message

Claude:
[执行 git status]
[执行 git diff]

我看到你改了这些文件：
- src/api/user.ts (修复类型问题)
- src/components/Login.tsx (添加loading状态)
- tests/user.test.ts (补充测试用例)

建议的 commit message:

[执行 git add . && git commit -m "fix: 修复用户API类型问题并完善登录组件

- 修复 user.ts 中的类型定义不完整问题
- 为 Login 组件添加 loading 状态处理
- 补充用户模块的单元测试"]

已提交。需要我 push 吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

You: 用户反馈说登录后会闪退，帮我查一下

Claude: 让我先看看相关代码...

[读取 src/pages/Login.tsx]
[读取 src/hooks/useAuth.ts]
[读取 src/store/authSlice.ts]

我需要看看错误日志：
[执行 npm run dev]
[执行 打开浏览器开发者工具 - 等待错误]

找到问题了！

在 useAuth.ts 第34行：
auth.user.name.toLowerCase()

当 user 对象存在但 name 为 null 时会崩溃。

修复方案：
auth.user?.name?.toLowerCase() ?? ''

要我修复吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

You: 把 src/utils 下的所有 JavaScript 文件迁移到 TypeScript

Claude: 收到，我来处理这个迁移任务。

[扫描 src/utils 目录]
发现 12 个 JS 文件需要迁移。

开始迁移...

[1/12] helpers.js → helpers.ts
- 添加参数类型注解
- 添加返回值类型
- 导出类型定义

[2/12] formatters.js → formatters.ts
...

[12/12] 完成！

[执行 npx tsc --noEmit]
类型检查通过，无错误。

[执行 npm test]
所有测试通过。

迁移完成！共修改 12 个文件，添加了 45 个类型定义。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

You: 帮我实现一个用户头像上传功能，要支持裁剪和压缩

Claude: 好的，我来实现这个功能。

首先分析一下需求：
1. 前端：选择图片 → 裁剪 → 预览 → 上传
2. 后端：接收文件 → 压缩 → 存储 → 返回URL

让我先看看现有的项目结构...

[读取 package.json]
[读取 src/components 目录结构]

我建议使用 react-image-crop 做裁剪，browser-image-compression 做压缩。

[执行 npm install react-image-crop browser-image-compression]

现在创建组件...

[创建 src/components/AvatarUploader/index.tsx]
[创建 src/components/AvatarUploader/ImageCropper.tsx]
[创建 src/components/AvatarUploader/styles.module.css]
[创建 src/api/upload.ts]

组件已创建完成。使用方式：

import { AvatarUploader } from '@/components/AvatarUploader'

<AvatarUploader 
  onUpload={(url) => updateUserAvatar(url)}
  maxSize={5} // MB
  aspectRatio={1}
/>

要我写个使用示例吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 项目规范

## 代码风格
- 使用 TypeScript 严格模式
- 组件使用函数式写法
- 状态管理使用 Zustand

## 命名规范
- 组件：PascalCase
- 函数：camelCase
- 常量：UPPER_SNAKE_CASE

## 提交规范
- feat: 新功能
- fix: 修复
- refactor: 重构
- docs: 文档

1

You: /parallel 同时帮我：1. 升级所有过期依赖 2. 修复 ESLint 警告 3. 补充缺失的测试

1
2
3
4
5
6
7
8

You: 还记得上周我们讨论的那个性能优化方案吗？执行它

Claude: 记得，上周我们讨论了：
1. 将大型列表改为虚拟滚动
2. 添加 React.memo 包装
3. 使用 useMemo 缓存计算结果

我现在开始实施...

1
2

Claude: 我需要执行 rm -rf node_modules，允许吗？
[Allow] [Deny] [Allow All npm commands]