Claude Code 完全指南：使用方式、技巧与最佳实践

1.1 什么是 Claude Code?

Claude Code(CC)是由 Anthropic 开发的系统级 AI Agent,它不仅是一个代码编写工具,更是一个可以通过自然语言指令完成各种电脑任务的智能助手。

核心特性:

1.2 Claude Code vs 传统工具

传统开发工具

代码编辑器

Chat AI工具

Coding助手

Claude Code

代码编写

对话问答

数据分析

文件管理

爬虫自动化

Office处理

核心差异:

• 传统工具:单一功能,需要人工操作多个工具完成复杂任务
• Claude Code:系统级 AI Agent,通过自然语言指令即可完成全流程任务

二、安装与配置

2.1 前置准备

必需工具:

验证安装:

# 检查 Node.js 版本 node -v # 检查 Git 版本 git --version

2.2 安装 Claude Code

全局安装(推荐):

npm install -g @anthropic-ai/claude-code

验证安装:

claude --version

2.3 配置模型

Claude Code 支持多种模型配置方式,你可以根据自己的需求选择合适的模型。

方式一:手动配置(通用方式)

手动配置适用于所有兼容 Anthropic API 的模型。配置方式如下:

Windows:

setx ANTHROPIC_BASE_URL "模型API地址" setx ANTHROPIC_AUTH_TOKEN "你的API密钥" setx ANTHROPIC_MODEL "模型名称"

macOS/Linux:

export ANTHROPIC_BASE_URL=模型API地址 export ANTHROPIC_AUTH_TOKEN=你的API密钥 export ANTHROPIC_MODEL=模型名称 # 永久配置(添加到 ~/.bashrc 或 ~/.zshrc) echo 'export ANTHROPIC_BASE_URL=模型API地址' >> ~/.bashrc echo 'export ANTHROPIC_AUTH_TOKEN=你的API密钥' >> ~/.bashrc echo 'export ANTHROPIC_MODEL=模型名称' >> ~/.bashrc source ~/.bashrc

常用国内模型配置示例:

配置示例(以智谱GLM为例):

export ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic export ANTHROPIC_AUTH_TOKEN=your_glm_api_key export ANTHROPIC_MODEL=GLM-4.7

注意:配置环境变量后需要重启终端或运行source ~/.bashrc使配置生效。

方式二:使用自动化助手(仅适用于智谱GLM)

如果选择使用智谱GLM系列模型,还可以使用自动化配置助手:

npx @z_ai/coding-helper

按照交互式提示完成配置:

1. 选择界面语言
2. 设置 Coding 套餐
3. 配置 API 密钥
4. 选择编码工具

这种方式可以自动完成智谱GLM模型的配置,适合不想手动设置环境变量的用户。

国内模型对比

2.4 启动 Claude Code

基本启动:

claude

危险模式(跳过权限确认):

claude --dangerously-skip-permissions

Headless 模式(非交互式):

git diff | claude -p "解释这些更改"

三、核心概念详解

了解了 Claude Code 的安装配置后，深入了解一下它的一些核心概念。这些概念是充分发挥 Claude Code 能力的基础。

3.1 Skills(技能包)

什么是 Skills?

Skills是预封装的工作流,就像游戏中的"技能包",用完即走,不占用上下文。它是别人已经编写好的、可直接使用的功能模块。

官方 Skills 库:https://github.com/anthropics/skills (32k+ Stars)

Skills 的类型

常用官方 Skills

# 前端设计技能 npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code # 文档协同技能 npx skills-installer install @anthropics/claude-code/doc-coauthoring --client claude-code # Canvas 设计技能 npx skills-installer install @anthropics/claude-code/canvas-design --client claude-code # PDF 处理技能 npx skills-installer install @anthropics/claude-code/pdf --client claude-code # 算法艺术生成 npx skills-installer install @anthropics/claude-code/algorithmic-art --client claude-code

如何使用 Skills

查看可用 Skills:

claude /skills

调用 Skill:

# 在 Claude Code 对话中 使用 frontend-design skill 优化 https://example.com 使用 pdf skill 提取 report.pdf 中的表格数据

如何编写自己的 Skills

Skill 目录结构:

my-skill/ ├── skill.json # Skill 元数据 ├── skill.md # Skill 文档 ├── api/ # API 定义(可选) └── tools/ # 自定义工具(可选)

skill.json 示例:

{ "name": "my-custom-skill", "description": "我的自定义技能", "version": "1.0.0", "author": "Your Name", "categories": ["automation"], "license": "MIT", "skill": { "file": "skill.md", "description": "这个技能用于..." } }

skill.md 示例:

# My Custom Skill 这个技能帮助用户快速完成[特定任务]。 ## 使用场景 - 场景1:描述... - 场景2:描述... ## 使用方式 用户只需要告诉你要完成什么,这个技能就会自动: 1. 分析需求 2. 执行步骤 3. 返回结果 ## 注意事项 - 注意事项1 - 注意事项2

安装本地 Skill:

# 将技能复制到 Claude Code 配置目录 cp -r my-skill ~/.claude/skills/ # 或使用安装命令 npx skills-installer install ./my-skill --client claude-code

3.2 Hooks(钩子)

什么是 Hooks?

Hooks是在特定事件触发时自动执行的脚本,用于自定义工作流、拦截危险操作、自动格式化代码等。

核心价值:

事件触发

Hook 拦截

执行自定义脚本

返回结果

继续/阻止操作

Hook 事件类型

Hook 配置方式

方式一:通过 /hooks 命令

# 在 Claude Code 中 /hooks

方式二:通过配置文件

在~/.claude/settings.json或项目.claude/settings.json中配置:

{ "hooks": { "user-prompt-submit-hook": { "command": "npm run validate-prompt", "enabled": true }, "tool-use-hook": { "command": "~/.claude/hooks/check-permission.sh", "enabled": true, "blocking": true }, "after-tool-use-hook": { "command": "echo 'Tool used: {{toolName}}' >> ~/.claude/hooks.log", "enabled": true } } }

Hook 实战示例

拦截危险命令:

#!/bin/bash # ~/.claude/hooks/check-dangerous.sh # 读取工具调用信息 TOOL_NAME=$(jq -r '.toolName' <<< "$CLAUDE_HOOK_INPUT") # 危险操作列表 DANGEROUS_TOOLS=("rm" "delete" "format" "shutdown") if [[ " ${DANGEROUS_TOOLS[@]} " =~ " ${TOOL_NAME} " ]]; then echo "⚠️ 警告:即将执行危险操作 - $TOOL_NAME" echo "请确认是否继续? (yes/no)" read -r confirmation if [[ "$confirmation" != "yes" ]]; then exit 1 # 阻止操作 fi fi

自动格式化代码:

{ "hooks": { "after-write-hook": { "command": "if [[ {{filePath}} == *.js ]]; then prettier --write {{filePath}}; fi", "enabled": true, "blocking": false } } }

发送通知:

{ "hooks": { "task-complete-hook": { "command": "notify-send 'Claude Code' '任务已完成'", "enabled": true } } }

自动格式化代码(PostToolUse Hook):

来自创始人的实战经验 - 彻底消灭 CI 里的格式报错:

{ "hooks": { "after-tool-use-hook": { "command": "bun run format || true", "enabled": true, "blocking": false } } }

工作原理:

1. 每次 Claude 使用Write或Edit工具后自动触发
2. 运行格式化命令(这里是bun run format)
3. || true确保即使格式化失败也不阻塞流程
4. 虽然 Claude 已经写得很规范,但这最后 10% 的自动化处理能彻底解决格式问题

效果:

• ✅ CI 中不再有格式报错
• ✅ 代码风格始终一致
• ✅ 无需手动运行格式化
• ✅ Git diff 更清晰

3.3 Plugins(插件)

什么是 Plugins?

Plugins是打包在一起的扩展集合,可以包含:

• 5 个 Skills
• 10 个斜杠命令
• 3 个 MCP 服务器配置
• 2 个 SubAgent 定义
• 若干 Hooks

Plugins vs Skills:

Plugin 安装与使用

哪里获取已有 Plugins?

官方插件市场:

添加插件市场:

# 添加官方Anthropic插件市场 claude /plugin marketplace add anthropics/skills # 添加本地插件市场 claude /plugin marketplace add ~/my-marketplace # 浏览可用插件 claude /plugin # 选择 "Browse Plugins" 查看完整列表

常用官方插件:

# 文档处理插件套件 claude /plugin marketplace add anthropics/skills claude /plugin install document-skills # 前端开发插件 claude /plugin install frontend-design # Git工作流插件 claude /plugin install git-workflow

安装 Plugin

从市场安装:

claude plugin install <plugin-name>

从本地安装:

# 安装本地插件 claude plugin install ./my-plugin # 或使用完整路径 claude plugin install /path/to/my-plugin

从GitHub安装:

# 直接从GitHub仓库安装 claude plugin install github:user/repo

查看 Plugins

查看已安装 Plugins:

claude /plugin

浏览可用插件:

# 在Claude Code中输入 /plugin # 选择 "Browse Plugins"

卸载 Plugin:

claude plugin uninstall <plugin-name>

创建自定义 Plugin:

my-plugin/ ├── plugin.json # Plugin 配置 ├── skills/ # Skills 目录 │ ├── skill1/ │ └── skill2/ ├── commands/ # 自定义斜杠命令 │ └── my-command.md ├── mcp/ # MCP 配置 │ └── mcp-config.json ├── agents/ # SubAgent 定义 │ └── agent1.json └── hooks/ # Hook 脚本 └── hook1.sh

plugin.json 示例:

{ "name": "my-plugin", "version": "1.0.0", "description": "我的自定义插件", "author": "Your Name", "skills": [ "skills/skill1", "skills/skill2" ], "commands": [ { "name": "/my-command", "description": "我的自定义命令", "file": "commands/my-command.md" } ], "mcpServers": [ { "name": "my-mcp", "config": "mcp/mcp-config.json" } ], "agents": [ { "name": "my-agent", "config": "agents/agent1.json" } ] }

3.4 MCP Servers(模型上下文协议服务器)

什么是 MCP?

MCP (Model Context Protocol)是 AI 的扩展接口标准,通过添加 MCP 服务器可以扩展 Claude Code 获取外部工具、资源、服务的能力。

核心概念:

Claude Code

MCP Client

MCP Server 1

MCP Server 2

MCP Server N

GitHub API

Database

Browser

常用 MCP 服务器

MCP 安装方式

方式一:命令行安装

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

方式二:配置文件安装

编辑~/.claude/mcp.json:

{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"], "disabled": false }, "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_TOKEN": "your_github_token_here" } }, "postgres": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-postgres"], "env": { "POSTGRES_CONNECTION_STRING": "postgresql://user:password@localhost:5432/db" } } } }

验证安装:

# 在 Claude Code 中 /mcp # 或通过命令行 claude mcp list claude mcp test chrome-devtools

Chrome DevTools MCP 实战

安装:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

使用示例:

# 在 Claude Code 中 用Chrome浏览器打开 https://example.com,然后通过 chrome devtools mcp 完成以下任务: 1. 截取页面截图 2. 提取所有链接 3. 分析页面结构 4. 获取页面性能数据

26个内置工具包括:

• chrome_navigate: 导航到指定 URL
• chrome_screenshot: 截取页面截图
• chrome_click: 点击元素
• chrome_fill: 填写表单
• chrome_select: 选择元素
• chrome_evaluate: 执行 JavaScript
• 等等...

3.5 Subagents(子代理)

什么是 Subagents?

Subagents是可以并行处理任务的独立 AI 代理,每个子代理拥有独立的 200K 上下文窗口,可以分配不同任务以提高效率。

核心理念：把常用工作流看作自动化运行的"子智能体",就像圣诞老人分派任务给精灵一样,每个子智能体专注于特定领域。

核心优势:

主代理 Claude Code

子代理1: 代码审查

子代理2: 测试编写

子代理3: 文档生成

子代理4: 性能优化

并行处理

结果汇总

Subagent 配置

方式一:通过 /agents 命令

claude /agents

方式二:配置文件

在~/.claude/agents.json或项目.claude/agents.json中配置:

{ "agents": { "code-reviewer": { "description": "专门负责代码审查的子代理", "model": "claude-opus-4-5", "instructions": "你是一个专业的代码审查专家,专注于检查代码质量、安全漏洞和性能问题。", "tools": ["read", "search", "git"], "permissions": { "allowWrite": false } }, "test-writer": { "description": "专门负责编写测试的子代理", "model": "claude-sonnet-4-5", "instructions": "你是一个测试工程师,专注于编写全面的单元测试和集成测试。", "tools": ["read", "write", "bash"] }, "doc-generator": { "description": "专门负责生成文档的子代理", "model": "claude-sonnet-4-5", "instructions": "你是一个技术文档专家,专注于生成清晰、准确的技术文档。", "tools": ["read", "write"] } } }

Subagent 使用示例

场景:完成一个功能开发

# 主任务 我需要完成用户认证功能,请帮我: 1. 使用 code-reviewer agent 审查现有认证代码 2. 使用 test-writer agent 编写测试用例 3. 使用 doc-generator agent 更新 API 文档 这三个任务并行执行

Claude Code 会自动:

1. 创建三个独立的子代理
2. 分配各自的上下文(200K × 3)
3. 并行执行任务
4. 汇总结果返回

实战子代理案例

来自 Claude Code 创始人 Boris Cherny 的实际使用案例:

code-simplifier:

# .claude/agents/code-simplifier.md 你是一个代码精简专家。在 Claude 完成工作后,你的任务是: 1. 分析代码的复杂度和可读性 2. 识别可以简化的逻辑 3. 提供优化建议但保持功能不变 4. 优先考虑性能和可维护性

verify-app:

# .claude/agents/verify-app.md 你是一个端到端测试专家。你的任务是验证应用功能: 1. 运行完整的测试套件 2. 检查所有关键路径 3. 验证边界情况 4. 确保用户体验"感觉对劲" 5. 如果发现问题,提供详细的修复步骤

使用方式:

# 在 Claude Code 中 使用 code-simplifier agent 优化刚才写的代码 使用 verify-app agent 验证应用是否正常工作

3.6 CLAUDE.md(项目记忆文件)

什么是 CLAUDE.md?

CLAUDE.md是 Claude Code 的"项目记忆文件",记录项目结构、构建命令、代码规范、架构决策等信息,让 Claude Code 快速理解项目上下文。

CLAUDE.md 的作用

CLAUDE.md 最佳位置

项目根目录_CLAUDE.md

src_.claude_CLAUDE.md

.claude_rules_auth.md

home_.claude_CLAUDE.md

全局项目配置

模块级配置

特定规则

用户级配置

优先级:特定规则 > 模块配置 > 项目配置 > 用户配置

CLAUDE.md 示例

完整示例:

# 项目名称: E-Commerce Platform ## 项目概述 这是一个基于 Node.js + React 的电商平台,支持商品管理、订单处理、支付集成等功能。 ## 技术栈 - **前端:** React 18, TypeScript, Tailwind CSS, Redux Toolkit - **后端:** Node.js 20, Express, TypeScript - **数据库:** PostgreSQL 15, Redis 7 - **认证:** JWT, OAuth 2.0 - **测试:** Jest, Playwright - **部署:** Docker, Kubernetes ## 项目结构 \`\`\` src/ ├── frontend/ # React 前端 │ ├── components/ # 可复用组件 │ ├── pages/ # 页面组件 │ ├── store/ # Redux store │ └── utils/ # 工具函数 ├── backend/ # Node.js 后端 │ ├── controllers/ # 控制器 │ ├── services/ # 业务逻辑 │ ├── models/ # 数据模型 │ └── routes/ # API 路由 └── shared/ # 共享代码 └── types/ # TypeScript 类型定义