Claude Code 系列教程(二):实战上手,让 AI 帮你写代码

本文是 Claude Code 系列的第二篇。假设你已经按第一篇完成安装和配置,现在开始真正用 Claude 干活。

一、让 Claude 先理解项目

进入 Claude CLI 后,不要急着让它写代码,先让它了解项目:

先快速浏览项目结构,告诉我它的技术栈、入口文件、主要模块。

Claude 会自动:

  • 列目录
  • 读 package.json / README
  • 总结结构

二、让 Claude 写一个功能

描述需求要具体,包括路由、接口、展示、异常处理:

在 React 前端里新增一个「用户列表」页面:
- 路由 /users
- 调后端 GET /api/users
- 表格展示 name/email/role
- 失败时显示 toast
请直接改代码并告诉我改了哪些文件。

Claude 会:

  1. 读现有路由/组件/请求封装
  2. 修改相关文件
  3. 给你 diff 和说明

三、让 Claude 修 bug

直接粘贴报错信息:

我跑 npm test 报错如下(贴错误日志)。
请定位原因并修复。

Claude 会:

  • 读测试文件
  • 找到失败点
  • 修改代码
  • 建议你跑测试验证

四、让 Claude 重构

现在 src/utils/date.ts 有很多重复逻辑。
请重构成更清晰可维护的版本,保证所有单测仍通过。

五、常用交互技巧

1. 用 @ 引用文件

请看 @src/app.tsx 帮我加一个 loading

2. 用 @ 引用目录

请扫一遍 @src/components 里所有组件

3. 查看 diff

给我展示 diff

4. 引用文件示例

请看 @src/app.tsx,帮我加一个 loading 状态

六、四种核心用法对比

场景 你说什么 Claude 做什么
理解项目 浏览项目结构,告诉我技术栈 列目录、读配置、总结
写功能 新增用户列表页面,要求… 读代码、改文件、给 diff
修 bug 报错如下…,定位并修复 读测试、找原因、改代码
重构 date.ts 重复逻辑太多,重构 分析、重构、保测试通过

七、写需求的小技巧

需求写得越具体,结果越好。对比一下:

模糊(差):

帮我写个登录功能

具体(好):

用 JWT 实现登录:
- 接口 POST /api/login
- 接收 email + password
- 验证成功返回 JWT,有效期 7 天
- 参考 src/auth/ 的代码风格

第二篇到此结束。 下一篇讲进阶玩法:先规划再动手、Git 协作、自动补测试、多任务管理。