大家好，我是霖呆呆 🎉。Zui近在玩一款叫 Claude Code 的编程神器，感觉它比传统的 ChatGPT geng像一位Neng动手写代码的老师。今天把从「装箱」到「上课」的每一步dou拆开来聊，希望Neng帮你快速上手，也给你点灵感，让 AI 真正成为你项目里的导师。

Claude Code 本质是一个agentic loop系统用户下达任务 → LLM 思考 → 调用内部工具 → 获得结果 → 推理 … 如此反复直到目标完成。和普通聊天模型只走“一轮输入‑输出”不同，它Ke以在本地文件系统里直接编辑代码、执行命令、打开 PR，甚至跑单元测试。

💡 小技巧：把「每次改完文件后自动跑 prettier」写进 CLAUDE.md，再配上对应 Hook，AI 就会在写完后主动帮你格式化。

即时反馈：不必复制粘贴代码片段，只要在 VS Code 窗口里说一句话，它就Neng定位文件并修改。

并行子任务：通过 Sub‑agent 把不相干的工作拆成多个线程，同时进行。

可审计：所有 Bash 调用dou会记录日志，安全性比裸露的 CLI 高出不少。

# 全局安装 Claude‑code
npm i -g @anthropic-ai/claude-code
# 检查版本
claude --version   # 例如 2.0.14

Windows 用户记得先创建隐藏目录 C:\Users\你的用户名\.claude，然后在里面放置 settings.json

{
  "env": {
    "ANTHROPIC_API_KEY": "sk-xxxxxxxxxxxxxxxxxxxx"
  },
  "permissions": {
    "allow": 
  }
}

这样一来当 Claude Code 想要执行上述命令时就不会弹出确认框，省去繁琐操作。

CLAUDE.md 是 AI 老师的“入职手册”。它会在每次对话开始时自动读取，为 LLM 提供项目背景、代码风格以及常用规则。

~/.claude/CLAUDE.md  ——个人全局偏好；所有仓库共享。

{项目根目录}/CLAUDE.md  ——团队共识，提交到 Git 时同步。

{子目录}/CLAUDE.md  ——前端或后端专属规范，优先级Zui高。

⚠️ 别一次性塞进太多文字——超过 500 行容易被截断。建议把独立规则拆成 .claude/rules/xxx.md 再统一引用。

# 项目概览
## 前端技术栈
- React + TypeScript
- TailwindCSS
## 后端技术栈
- Node.js 
- Prisma
# 编码约定
* 所有新增文件必须通过 `prettier --write` 格式化。
* 提交前运行 `npm run lint` 确保无 eslint 警告。
# 禁止操作
❌ 不要一次性重构大型 Service 文件，请分模块提交。
✅ 把验证逻辑抽离到 `src/api/validation.ts` 再Zuo PR。

AIs Neng根据这些指令判断「该Zuo」与「该不Zuo」，尤其是大范围改动时尤为关键。

Claude Code 提供三种权限模式：

Bash Auto‑confirm：所有Yi列入 allow 的命令直接执行，无弹窗；适合 CI/CD 或内部安全环境。

Bash Prompt：每次调用dou会弹出确认，对外部操作保持警惕；推荐新手使用。

Bash Deny‑All：默认阻止所有 Bash，仅允许 Read/Edit；Zui保守策略。

🔒 YOLO 模式kan似爽快，却相当于给 AI 一把根钥匙——git push --force,srm -rf / , dou可Neng被误触。所以请务必结合 allow 列表Zuo好限制。

"我想让每次保存后自动跑 ESLint"

# 在 settings.json 中声明 Hook
{
  "hooks": {
    "postWrite": 
  }
}

AIs 在完成 Write/Edit 操作后会自动触发上述命令，实现「写完即检查」。Ru果你geng喜欢显式指令，也Ke以使用 Slash‑Command：

/review   # 自动创建 PR 并运行 CI
/sigma     # 调用自研 skill，让 AI 按 Bloom’s‑Sigma 方法教学
/openSpec   # 快速生成需求文档模板

✨ 小提示：把常用的 Slash‑Command 放进 CLAUDE.md 的 “快捷键” 区块，这样每次对话douNeng省去重复描述。

# 启动 Claude Code：

claude init   # 自动扫描当前目录并生成 ~./Claude.md
生成成功后你会kan到类似：
🗂️ src/
🗂️ tests/
📄 package.json
这个文件以后会成为所有对话的基础上下文。
 

# 配置 CLAUDE.md：按照上文示例添加技术栈与禁忌条目。

# 定义 Hook：`postWrite` → `prettier --write`，`postBash` → `git status`。

/generatePRD "实现用户登录功Neng，需要邮箱验证码校验"
Claude 会返回一份 markdown 文档，内容包括：
- 功Neng概述
- 接口定义
- UI 流程图
 

/openspec:proposal → Claude 输出对应 HTML/CSS 框架代码。

/preview → 自动启动本地 dev server 并打开浏览器预览。

/implement src/pages/Login.tsx --with-typescript --tailwind
AI 会在指定路径创建或修改文件，并在提交前执行：
PreToolUse + Write → TypeScript 类型检查  
PostToolUse + Write → prettier 格式化  
 

/review → 创建 Pull Request 并运行 CI 流水线；若检测到冲突，会自动打开子 Agent 来解决冲突再重新提交。

/merge if-passing → 所有检查通过后直接合并到主分支。

Pitfall 1 – 并行任务冲突：*不要* 同时让两个 Sub‑agent 修改同一批 .tsx 文件，否则会产生覆盖冲突。可通过 {filePattern} 限制各自处理的范围来规避。.

Pitfall 2 – 模糊提示导致重构失控：*错* 用 “帮我改一下登录页面”，AI 往往会全盘重写。正确Zuo法是明确指出：“只在 src/pages/Login.tsx 添加 loading 状态”。这样才Neng保持其他代码不变。

Pitfall 3 – Bash 权限遗漏：*别* 把高危命令放进 allow 列表，例如 `rm -rf *`。即使 Auto‑edit 开启，也应保留确认弹窗防止误删仓库历史记录。

TIPS:

Sed 与 Grep 虽好，但查询系统信息时直接使用 Bash geng省事：

node -v   # 快速获取 Node 版本
git --version   # 查kan Git 客户端版本
    

    
"Glob" 按文件名搜索，“Grep” 按内容搜索，两者搭配Ke以极大提升定位效率。
    
    
Bash 调用前加上 “--dry-run” 参数预演，一旦确认再正式执行。
    
\end{ul}
\end{ul}
八、让 AI 成为真正的老师，而不是只会答题的机器人 🤖💡 
AIs 越来越擅长“说”，但真正价值在于“Zuo”。Claude Code 把 LLM 的思考链路嵌进了本地工具生态，让它们Neng够自行读写代码、跑测试，再回馈给人类。这种闭环正是我们所说的"agentic loop"——从指令到结果，全程可视可控。只要把项目规范沉淀进 CLAUDE.md，把安全边界写进 settings.json，再配上一点点 Hook，你就拥有了一个随叫随来的编程导师。
🚀 开始你的第一堂课吧！让 Claude Code 带领你从零搭建 React+TS 项目，一路踩坑、一路成长。Ru果本文帮助到了你，请点个赞或关注，我会持续geng新前端干货和原创教程 🎉！祝大家 coding 顺利，无 bug 🎈！ 
    © 2026 霖呆呆 | 保留所有权利 | 本文采用 CC BY-NC-SA 协议发布