▲戳蓝色字关注我们！

Claude Code 实战指南：从入门到精通，掌握 AI 编程的十五个核心技巧

通过实战项目，穿插讲解 Agent Skills、MCP、Hooks、子代理、插件等进阶能力

🚀 开篇：Claude Code 是什么？

Claude Code 是 Anthropic 推出的AI 原生代码编辑器，它不只是代码补全工具，而是一个能够理解项目上下文、自主执行任务、与开发环境深度集成的智能编程助手。

与传统 AI 编程工具的区别：

本文将通过一个实战项目——创建个人简历网站，穿插讲解 15 个核心知识点，帮助你从入门到精通。

📁 实战项目：极简高级风个人简历网站

项目目标

创建一个响应式个人简历网站，包含：

• 基本信息模块

• 技能展示模块

• 项目经历模块

• 联系方式模块

配色方案：黑白灰极简风格技术栈：HTML + CSS + JavaScript（纯原生，无框架）

🔑 知识点一：Claude Code 的三种权限模式

Claude Code 提供了三种权限模式，对应不同的协作深度：

模式切换演示

启动 Claude Code 后，按 Shift+Tab 循环切换模式：

默认模式 → 编辑模式 → 计划模式 → 默认模式

底部状态栏会显示当前模式：

• ? for shortcuts → 默认模式

• accept edits on → 编辑模式

• plan mode on → 计划模式

安全提示：危险参数

如需完全自动执行（包括 Shell 命令），可使用：

claude --dangerously-skip-permissions

⚠️ 警告：此模式会绕过所有权限确认，仅在隔离环境（如容器/虚拟机）中使用。

🔑 知识点二：历史会话管理 /resume

Claude Code 会自动保存会话历史，支持随时恢复。

恢复会话：

# 方式一：启动时加载claude -c# 方式二：启动后加载/resume

执行 /resume 后，会列出当前目录下的所有历史会话，支持搜索选择。

🔑 知识点三：会话命名 /rename

Claude Code 会自动生成会话名称，但通常不够直观。建议手动命名：

/rename 分离CSS和JS代码

命名规范建议：

• 使用动词开头（创建、修复、重构、优化）

• 包含关键操作对象

• 保持简洁（20字以内）

命名后，在 /resume 列表中更容易识别。

🔑 知识点四：计划模式实战——代码重构规划

任务背景

初始生成的 index.html 将 CSS、JS 代码混在一起，不利于维护。我们需要将其拆分为三个独立文件。

操作步骤

1. 切换到计划模式（按 Shift+Tab 两次）

2. 输入任务描述：

将这份个人简历网站代码拆分为3个独立文件

1. Claude Code 会分析代码结构，生成执行计划：

主要变更：1. 创建 style.css - 存放 320 行 CSS2. 创建 script.js - 存放 43 行 JS3. 精简 index.html - 只保留 HTML 结构，通过外部链接引入 CSS/JS代码本身不做任何修改，只是物理分离。

1. 确认计划后，选择执行方式：

• Yes, clear context and auto-accept edits：清除无关上下文，自动执行

• Yes, auto-accept edits：保留上下文，自动执行

• Yes, manually approve edits：每步手动确认

小贴士

• 计划不合理？按 Esc 中断，重新输入需求

• 需要调整细节？直接在输入框中反馈，Claude Code 会更新计划

🔑 知识点五：Agent Skills——任务特定能力包

Claude Skills 是可加载的任务特定资源包，让 Claude Code 具备领域专业知识。

使用场景

加载方式

# 加载官方 Skill/model to try Opus 4.5# 加载自定义 Skill# 将 skill 文件放入项目目录，Claude Code 自动识别

🔑 知识点六：MCP——模型上下文协议

MCP（Model Context Protocol）是 Anthropic 推出的开放协议，标准化 AI 模型与外部工具的连接。

核心价值

• 标准化：统一工具定义和调用方式

• 可扩展：工具可以像插件一样热插拔

• 跨平台：不同 AI 模型共享同一套工具

在 Claude Code 中的应用

Claude Code 内置了多个 MCP 工具：

• 文件系统：读取、写入、搜索文件

• Shell 执行：运行命令、Git 操作

• 代码分析：语法检查、依赖分析

🔑 知识点七：Hooks——生命周期钩子

Hooks 允许你在 Claude Code 执行特定操作时，触发自定义逻辑。

常见 Hook 类型

实战示例：自动格式化

配置 PostEdit Hook，在 Claude Code 修改文件后，自动运行 Prettier：

{"hooks":{"PostEdit":{"command":"npx prettier --write {{filePath}}","filePattern":"*.{js,ts,html,css}"}}}

🔑 知识点八：子代理——任务分解与并行

复杂任务可以分解为多个子代理并行执行，提升效率。

架构示意

主代理（协调者）├── 子代理 A：生成 HTML 结构├── 子代理 B：编写 CSS 样式└── 子代理 C：实现 JavaScript 交互

使用场景

• 多文件项目：不同子代理负责不同模块

• 代码审查：一个子代理检查语法，另一个检查逻辑

• 测试生成：并行生成单元测试和集成测试

🔑 知识点九：插件系统——扩展能力边界

Claude Code 支持插件机制，集成第三方服务。

常用插件类型

🔑 知识点十：上下文工程——让 Claude 更懂你

Claude Code 的上下文不仅包括当前对话，还包括：

自动上下文

• 项目结构：目录树、文件关系

• 依赖信息：package.json、requirements.txt

• Git 历史：最近提交、分支信息

手动添加上下文

# 添加特定文件到上下文/add path/to/file# 添加整个目录/add src/# 查看当前上下文/context

最佳实践

• 大项目先 /add 核心文件，避免上下文过载

• 使用 .claudeignore 排除无关文件（如 node_modules）

• 复杂任务前，先创建 CLAUDE.md 说明项目背景

🔑 知识点十一：调试技巧——当 Claude 出错时

常见场景与应对

有用的命令

/undo          # 撤销最后一次编辑/clear         # 清空当前上下文/bug           # 标记当前问题，便于后续追踪

🔑 知识点十二：代码审查模式

Claude Code 不仅是代码生成工具，也是代码审查助手。

审查流程

1. 加载代码：/add 需要审查的文件

2. 发起审查：

请审查这段代码，关注：1. 潜在的性能问题2. 安全漏洞3. 代码可读性4. 是否符合最佳实践

1. 迭代修复：根据审查意见，Claude Code 可以自动修复或提供建议

🔑 知识点十三：文档生成——从代码到文档

Claude Code 可以自动生成项目文档：

# 生成 README请根据项目结构，生成一份详细的 README.md# 生成 API 文档请为 src/api/ 目录下的接口生成文档# 生成架构图请用 Mermaid 语法绘制系统架构图

🔑 知识点十四：测试驱动——AI 辅助 TDD

Claude Code 支持测试驱动开发流程：

1. 编写测试：先描述功能，让 Claude 生成测试用例

2. 实现功能：根据测试，实现最小可用代码

3. 重构优化：测试通过后，优化代码结构

我需要一个用户认证模块，请先编写测试用例，然后实现功能。

🔑 知识点十五：持续集成——与 CI/CD 结合

将 Claude Code 集成到开发工作流：

Git 工作流

# Claude Code 生成代码后gitadd.git commit -m"feat: add user authentication"# 推送到远程，触发 CIgit push origin main

自动化脚本

创建 claude-task.sh，批量执行常见任务：

#!/bin/bash# 代码格式化任务claude "请格式化 src/ 目录下的所有代码，确保符合 ESLint 规范"

🎯 总结：Claude Code 的核心价值

适用场景

✅ 适合：

• 快速原型开发

• 代码重构与优化

• 学习新技术栈

• 重复性编码任务

❌ 不适合：

• 高度创造性的架构设计

• 关键核心业务逻辑（需人工把关）

• 安全敏感的代码（需专门审计）

📚 延伸阅读

• Claude Code 官方文档

• MCP 协议规范

• Anthropic 工程博客

本文基于 Claude Code v2.1.31 版本实测，部分功能可能随版本更新调整。

👇 扫码关注      点关注、不迷路，AI赋能我带

未来已来，只是分布不均。这一次，让自己成为Agent时代的"造物主"。