01 · 环境与工作流搭建

工具再强，配置不对也发挥不出来。这节课建立你和 Claude Code 协作的基础设施。

CLAUDE.md：你的项目说明书

Claude Code 启动时会自动读取项目根目录的 CLAUDE.md 文件。这是你告诉 Claude「这个项目是什么、怎么工作、有哪些规范」的地方。

为什么重要：没有它，每次都要反复解释项目背景。有了它，Claude Code 一启动就有完整上下文。

一份好的 CLAUDE.md 至少包含：

# 项目说明

大齐 AI 课堂官网，Next.js 14 + TypeScript + Tailwind CSS。

## 技术栈

- 框架：Next.js 14（App Router）
- 样式：Tailwind CSS v3 + shadcn/ui
- 状态：Zustand
- 请求：SWR + Axios
- 测试：Vitest + Playwright

## 代码规范

- 组件用函数式 + hooks，不用 class 组件
- 文件名 PascalCase（组件）、camelCase（工具函数）
- hooks 文件名用 use 前缀
- 优先用 shadcn/ui 现有组件，不重复造轮子
- TypeScript 严格模式，不允许 any

## 项目结构

- /src/components — 通用组件
- /src/app — Next.js 页面
- /src/hooks — 自定义 hooks
- /src/lib — 工具函数和配置

## 常用命令

- 开发：`pnpm dev`
- 测试：`pnpm test`
- 构建：`pnpm build`
- 类型检查：`pnpm type-check`

全局 CLAUDE.md

除了项目级，还可以在 ~/.claude/CLAUDE.md 放全局配置，对所有项目生效。适合放你的个人偏好：

# 我的全局设置

- 总是用中文解释，代码注释用英文
- 生成代码时先说明方案，再写代码
- 不要过度注释，只注释不显而易见的逻辑
- 测试用 Vitest，不用 Jest

理解 Context Window

Claude Code 的核心限制是 context window（对话上下文长度）。超出后会自动压缩历史，早期对话内容会被总结浓缩。

几个用好 context 的原则：

1. 大任务拆小：一次只做一件完整的事，完成后再开新对话或新任务
2. 主动指定文件：说「读 /src/components/Button.tsx」比「看 Button 组件」精准
3. 用 /compact：手动压缩对话历史，腾出空间给新内容
4. 开新对话：任务切换时，/clear 清空，保持 context 干净

常用 Slash Commands

在对话框里输入 / 可以看到所有可用命令：

命令	作用
/add-dir <路径>	把目录加入 Claude 的工作范围
/compact	压缩对话历史
/clear	清空对话
/cost	查看本次对话消耗
/model	切换使用的模型
/help	查看所有命令

工作流建议

把日常开发节奏从：

写代码 → 调试 → 提交

改成：

描述需求 → Claude 生成 → 你审查 diff → 调整要求 → 提交

你的主要精力变成：描述清楚需求、审查生成结果、给出反馈迭代。

这个切换刚开始会不适应——好像「没事可做了」。但实际上你在做最重要的决策工作，把执行交给 Claude。