Claude Code 完全指南:从安装配置到实战,重新定义你的编程方式
不只是代码补全,Claude Code 是一个能理解整个项目、直接修改文件、执行命令的 AI 编程 Agent。这篇文章带你从零开始,把它变成你的核心开发工具。
我用 Claude Code 做了三个月的主力开发工具。从最初的「这玩意儿能干嘛」到现在「离了它我不会写代码了」,中间踩了不少坑,也摸索出了一套高效的工作流。这篇教程不是官方文档的复读机,而是我实际使用中的经验总结——哪些功能真的好用,哪些坑要绕着走,怎么配置才能让它发挥最大威力。
先说结论:Claude Code 和 Cursor/Windsurf 这类 IDE 集成工具的本质区别是——它是一个终端里的 Agent,不是编辑器插件。它能读写文件、执行 shell 命令、理解 git 历史、跑测试。这意味着它不只是帮你写代码,而是帮你「做事」。一旦你理解了这个定位,就知道该怎么用它了。
1. 安装与初始配置
安装 Claude Code
# 需要 Node.js 18+
npm install -g @anthropic-ai/claude-code
# 验证安装
claude --version
# 首次运行,会引导你登录 Anthropic 账号
claude 安装后在任意项目目录下运行 claude 即可启动。它会自动识别项目类型、读取 git 信息、理解项目结构。
认证方式
Claude Code 支持多种认证方式,根据你的网络环境和需求选择:
# 方式 1:直接登录(推荐个人用户)
# 首次运行 claude 时会自动引导登录浏览器
# 方式 2:官方 API Key
export ANTHROPIC_API_KEY="sk-ant-..."
claude
# 方式 3:第三方中转站 / API 代理(国内用户常用)
# 设置 API Key(中转站提供的 key)
export ANTHROPIC_API_KEY="sk-..."
# 关键:设置 Base URL 指向中转站地址
export ANTHROPIC_BASE_URL="https://your-proxy.example.com"
claude
# 方式 4:Amazon Bedrock / Google Vertex
# 适合企业用户走云厂商的 AI 网关
export CLAUDE_CODE_USE_BEDROCK=1
export AWS_REGION="us-east-1"
claude中转站配置详解
如果你无法直接访问 Anthropic 官方 API(网络限制、延迟高等原因),使用第三方 API 中转站是最常见的方案。配置方式有几种:
# 方法 1:环境变量(推荐,最灵活)
# 在 ~/.bashrc 或 ~/.zshrc 中添加:
export ANTHROPIC_BASE_URL="https://api.your-proxy.com"
export ANTHROPIC_API_KEY="sk-your-proxy-key"
# 方法 2:写入 Claude Code 的 settings.json
# 路径:~/.claude/settings.json
{
"env": {
"ANTHROPIC_BASE_URL": "https://api.your-proxy.com",
"ANTHROPIC_API_KEY": "sk-your-proxy-key"
}
}
# 方法 3:仅当前会话临时使用
ANTHROPIC_BASE_URL="https://api.your-proxy.com" \
ANTHROPIC_API_KEY="sk-your-proxy-key" \
claude安全提醒:选择中转站时务必注意数据安全。你的所有代码和对话内容都会经过中转站的服务器。建议选择信誉好的服务商,不要在中转站上处理包含敏感凭证(数据库密码、API Key 等)的代码。如果对数据安全要求高,建议自建代理或使用官方渠道。
验证连接是否正常
# 启动 claude 后,运行:
/cost
# 如果能正常显示用量信息,说明连接没问题
# 也可以用 /status 查看当前连接状态
/status
# 如果连接失败,常见原因:
# 1. Base URL 末尾不要加 /(错:https://api.xxx.com/)
# 2. 确认中转站支持 Claude Code 所需的 API 端点
# (需要支持 /v1/messages 的 streaming 接口)
# 3. 检查中转站是否支持你选择的模型版本选择模型
Claude Code 默认使用 Sonnet(速度和质量的平衡),可以按需切换:
# 在对话中切换模型
/model
# 可选项:
# - claude-sonnet-4-6 → 日常开发(默认,速度快)
# - claude-opus-4-6 → 复杂任务(更聪明,更贵)
# - claude-haiku-4-5 → 简单任务(最快最便宜)
# 也可以用快捷切换
/model opus # 切到 Opus
/model sonnet # 切回 Sonnet省钱技巧:日常开发用 Sonnet 就够了,只有在做复杂架构设计、大规模重构、或者 Sonnet 搞不定的时候才切 Opus。Haiku 适合简单的问答和格式转换。这样能把 API 费用控制在合理范围内。
国内网络环境:如果你无法直接访问 Anthropic 官方 API,使用中转站是最主流的方案。下面的「认证方式」部分有详细配置说明。注意选择支持 /v1/messages streaming 接口的中转站,普通的 OpenAI 格式转发可能不兼容 Claude Code。
2. 核心概念:理解 Claude Code 的工作方式
Claude Code 和普通的 AI 对话工具最大的区别是:它有一套工具系统(Tools),能主动调用文件读写、命令执行、搜索等操作。理解这一点很重要,因为你和它对话的方式会直接影响它选择哪些工具。
内置工具
- Read — 读取文件内容
- Write — 创建新文件
- Edit — 精确修改文件的某一部分
- Glob — 按模式搜索文件名
- Grep — 在文件内容中搜索
- Bash — 执行 Shell 命令
- Agent — 启动子 Agent 处理复杂任务
- LSP — 代码跳转、引用查找
权限模式
- Ask mode — 每个操作都需要你确认
- Auto mode — 自动执行大部分操作
- 可以按工具类型精细配置权限
- 支持全局和项目级权限设置
- 敏感操作(git push 等)始终需要确认
# 切换权限模式
Shift+Tab # 在对话中快速切换常用斜杠命令
/help # 查看所有可用命令
/clear # 清空当前对话上下文
/compact # 压缩对话历史,释放上下文空间
/model # 切换模型
/cost # 查看当前会话的 token 消耗和费用
/memory # 编辑项目记忆(CLAUDE.md)
/review # 让 Claude 审查当前的 git diff
/commit # 自动生成 commit message 并提交
/init # 初始化项目的 CLAUDE.md 文件
/status # 查看当前账户状态和配额3. CLAUDE.md:让 AI 记住你的项目
CLAUDE.md 是 Claude Code 最强大的功能之一。它是一个 Markdown 文件,放在项目根目录,每次对话时 Claude 都会自动读取。你可以用它来告诉 Claude 项目的技术栈、代码规范、常见坑点。
一个实际的 CLAUDE.md 示例
# 项目:OneKit Hub
## 技术栈
- Nuxt 4 + Vue 3.5 + TypeScript
- UnoCSS(Tailwind 兼容语法)
- 文件路由:app/pages/
- 自动导入:app/components/、app/composables/
## 代码规范
- 使用 Composition API + <script setup lang="ts">
- 组件命名:PascalCase,文件名用 kebab-case
- 优先用 reactive() 管理相关状态,用 toRefs() 解构
- 不要使用 any 类型,不要添加不必要的注释
## 常见陷阱
- Vue 模板中 <div /> 自闭合标签在嵌套时容易导致
标签不匹配,改用 <div></div>
- 中文引号 "" 在 JS 字符串中会导致解析错误,用「」替代
- 修改深层嵌套模板后务必 npx nuxi build 验证
## 构建和测试
- 开发:pnpm dev
- 构建:pnpm build
- 类型检查:pnpm typecheck好的做法:把项目特有的约定和踩过的坑写进去。Claude 会严格遵守这些规则,避免反复犯同样的错误。
不好的做法:把整个项目架构文档复制进去。CLAUDE.md 应该简洁精炼,太长会浪费上下文 token。只写那些 Claude 不看代码就不知道的信息。
多层级 CLAUDE.md
Claude Code 支持在不同目录层级放置 CLAUDE.md,越深层的规则优先级越高:
# 优先级从低到高:
~/.claude/CLAUDE.md # 全局配置(所有项目生效)
项目根目录/CLAUDE.md # 项目级配置
项目根目录/src/CLAUDE.md # 子目录配置(更具体的规则)
# 还有一个用户级别的(不会被 git 追踪):
项目根目录/.claude/CLAUDE.local.md # 个人偏好,不提交到仓库4. Hooks 事件系统:自动化你的工作流
Hooks 是 Claude Code 的事件驱动扩展机制。你可以在特定事件发生时自动执行 shell 命令——比如每次编辑文件后自动跑 lint,每次启动对话时自动拉取最新代码。
配置 Hooks
Hooks 在 settings.json 中配置(通过 /settings 命令打开):
{
"hooks": {
// 在 Claude 编辑文件之后触发
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
"command": "npx eslint --fix $CLAUDE_FILE_PATH"
}
]
}
],
// 每次启动新对话时触发
"PreSession": [
{
"hooks": [
{
"type": "command",
"command": "git pull --rebase origin main"
}
]
}
],
// Claude 发送通知时触发
"Notification": [
{
"hooks": [
{
"type": "command",
"command": "notify-send 'Claude Code' '$CLAUDE_NOTIFICATION'"
}
]
}
]
}
}可用的 Hook 事件
| 事件 | 触发时机 | 典型用途 |
|---|---|---|
| PreToolUse | 工具调用前 | 拦截危险操作、参数校验 |
| PostToolUse | 工具调用后 | 自动格式化、lint、类型检查 |
| PreSession | 对话开始时 | 拉取最新代码、环境检查 |
| PostSession | 对话结束时 | 生成工作日志、清理临时文件 |
| Notification | 发送通知时 | 桌面通知、Slack/钉钉推送 |
实战:编辑后自动 lint + 类型检查
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
// 只对 ts/vue 文件执行
"command": "echo $CLAUDE_FILE_PATH | grep -E '\\.(ts|vue)$' && npx eslint --fix $CLAUDE_FILE_PATH || true"
}
]
}
]
}
}实战:拦截危险的 git 操作
{
"hooks": {
"PreToolUse": [
{
"matcher": "Bash",
"hooks": [
{
"type": "command",
// 拦截 force push 和 reset --hard
"command": "echo \"$CLAUDE_TOOL_INPUT\" | grep -qE '(push.*--force|reset.*--hard)' && echo 'BLOCKED: 禁止 force push 和 hard reset' && exit 1 || true"
}
]
}
]
}
}注意:Hook 命令的 exit code 非 0 会阻止 Claude 继续执行。这是实现「安全护栏」的关键机制——你可以在 PreToolUse 中检查命令是否安全,不安全就 exit 1 拦截掉。
5. 环境配置:打造你的专属设置
settings.json 层级
Claude Code 的配置文件有三个层级,优先级从低到高:
# 1. 全局配置(所有项目生效)
~/.claude/settings.json
# 2. 项目团队配置(提交到 git,团队共享)
项目/.claude/settings.json
# 3. 项目个人配置(不提交到 git)
项目/.claude/settings.local.json权限配置
精细控制 Claude 可以执行哪些操作:
{
"permissions": {
// 允许的 Bash 命令模式
"allow": [
"Bash(npm run *)",
"Bash(pnpm *)",
"Bash(npx nuxi *)",
"Bash(git status)",
"Bash(git diff *)",
"Bash(git log *)",
"Edit(*)",
"Read(*)",
"Write(*.vue)",
"Write(*.ts)"
],
// 始终拒绝的操作
"deny": [
"Bash(rm -rf *)",
"Bash(git push --force*)",
"Write(.env*)"
]
}
}环境变量
{
"env": {
// 传递给 Claude 的 shell 环境
"NODE_ENV": "development",
"DEBUG": "true",
// Anthropic 相关
"ANTHROPIC_API_KEY": "sk-ant-...",
// 代理设置(公司网络)
"HTTPS_PROXY": "http://proxy.company.com:8080"
}
}6. MCP 工具集成:扩展 Claude 的能力边界
MCP(Model Context Protocol)让你可以给 Claude Code 接入外部工具——数据库查询、Jira 任务管理、Figma 设计稿读取等。它是一个开放协议,社区有大量现成的 MCP Server 可以直接用。
配置 MCP Server
// 在 settings.json 中添加:
{
"mcpServers": {
// GitHub 集成:查看 PR、Issue
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_TOKEN": "ghp_..."
}
},
// 数据库查询(只读)
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://..."
}
},
// 文件系统(限定目录)
"filesystem": {
"command": "npx",
"args": [
"-y", "@modelcontextprotocol/server-filesystem",
"/path/to/allowed/directory"
]
}
}
}推荐 MCP Server:server-github(GitHub 操作)、server-postgres(数据库)、server-brave-search(网络搜索)、server-memory(持久化记忆)。可以在 claude /doctor 命令中查看 MCP 连接状态。
7. IDE 集成:VS Code 里的 Claude
Claude Code 虽然是 CLI 工具,但和 VS Code 深度集成后体验非常好。
VS Code 扩展
# 安装 VS Code 扩展
# 在 VS Code 扩展市场搜索 "Claude Code" 安装
# 或者命令行安装
code --install-extension anthropic.claude-code
# 启动后可以用 Ctrl+Shift+P 搜索 Claude 相关命令
# 也可以直接在 VS Code 终端中运行 claudeVS Code 中的实用操作
- 选中代码 → 右键 → Ask Claude:直接对选中的代码提问或要求修改
- 终端面板中使用:Claude Code 会自动感知 VS Code 打开的文件
- 自动跳转:Claude 编辑文件时,VS Code 会自动高亮变更位置
- Diff 预览:所有文件修改都可以在 VS Code 的 Diff 视图中查看
8. 实战案例:用 Claude Code 完成一个完整功能
下面以「给博客系统添加标签筛选功能」为例,展示完整的 Claude Code 工作流。
Step 1:描述需求
> 给博客列表页添加标签筛选功能。
参考现有的 category 筛选实现方式,
在 BlogPost 类型中添加 tags 字段,
在列表页添加标签筛选器,支持多选。Claude 会自动读取 useBlogPosts.ts、index.vue 等相关文件来理解现有实现。
Step 2:Review 计划
Claude 通常会先提出一个实现计划。这时候你要认真看——确认它理解了需求,修改方向没问题。如果它理解偏了,现在纠正比写完代码再改成本低得多。
Step 3:让它执行
确认计划后,Claude 会依次修改类型定义、composable、组件。过程中你可以看到每一步的文件变更。如果中途发现方向不对,随时打断纠正。
Step 4:验证和提交
# 让 Claude 自己验证
> 跑一下 build 看看有没有报错
# 满意后直接提交
> /commit
# Claude 会基于所有变更自动生成 commit message:
# "feat(blog): add multi-tag filtering to blog list page"9. 高效使用的 10 个技巧
1. 用 /compact 节省 token:对话变长后,用 /compact 压缩历史。Claude 会保留关键上下文但释放 token 空间,一次对话能做更多事。
2. 善用 @ 引用文件:在对话中用 @filename 直接引用文件,Claude 会自动读取内容。比手动粘贴代码更高效,而且能保持文件路径的上下文。
3. 让 Claude 先看再改:不要直接说「修改 xxx 文件」,而是先说「看看 xxx 文件的实现」。让它理解代码后再动手,质量会好很多。
4. 用 git diff 做 Review:每次修改后用 /review 让 Claude 自己检查变更,它经常能发现自己刚才犯的错误。
5. 复杂任务拆分执行:不要一次性给一个超大的需求。拆分成 3-5 个小步骤,每步确认后再进行下一步,成功率高很多。
6. CLAUDE.md 写踩过的坑:每次遇到 Claude 反复犯的错误,立刻加到 CLAUDE.md 里。这是最有价值的投资——下次对话它就不会再犯了。
7. 用 Opus 做架构决策:日常编码用 Sonnet,但涉及架构设计、技术选型时切换到 Opus。它的推理能力更强,能给出更全面的分析。
8. 利用子 Agent 并行:遇到需要同时查看多个文件或执行多个独立任务时,Claude 会自动启动子 Agent 并行处理,速度快很多。
9. 管道命令集成:Claude Code 支持管道输入,可以和其他 CLI 工具组合。比如 cat error.log | claude "分析这个错误日志"。
10. 建立项目 Skills:在 .claude/skills/ 目录下创建 Markdown 文件,定义可复用的指令模板(Skill)。比如一个 review-pr.md skill,每次 /review-pr 就能按照你的标准审查 PR。
10. 成本控制与计费
| 计划 | 费用 | 适合人群 |
|---|---|---|
| Pro 订阅 | $20/月 | 个人开发者,有用量限制 |
| Max 订阅 | $100-200/月 | 重度使用者,更高限额 |
| API 按量计费 | 按 token 计费 | 团队/企业,灵活控制预算 |
| 中转站 API | 通常官方价格的 0.7-1.5 倍 | 网络受限用户,按量计费 |
中转站用户的费用考量
使用第三方中转站的成本结构和官方有所不同:
- 价格波动大:不同中转站的定价差异可能达到 2-3 倍,要货比三家。有些按官方原价转发,有些加价 30-50%,也有些批量采购后反而更便宜。
- 注意隐藏成本:部分中转站按「请求次数」而非 token 计费,Claude Code 每次对话可能发送几十次请求,这种计费方式会非常贵。确认是按 token 计费的。
- 额度和限流:中转站通常有并发限制和日限额。Claude Code 在执行复杂任务时可能密集调用 API,容易触发限流。遇到 429 错误时,适当降低任务复杂度或等一会儿。
- 充值建议:先小额充值测试连通性和速度,确认好用后再大额充值。避免一次性充太多——中转站跑路的事不是没有。
控制成本的关键:用 /cost 命令随时查看当前会话的 token 消耗(中转站用户看到的是 token 数,实际费用以中转站后台为准)。善用 /compact 压缩上下文,避免重复发送大段代码。日常开发用 Sonnet,只在关键决策时切 Opus。一个 Sonnet 对话通常消耗 10k-100k tokens,一个 Opus 对话可能到 200k+ tokens。
相关阅读
想了解更多 AI 编程工具的对比?看看 AI 编程助手实战指南。要提高和 AI 的沟通效率,推荐 Prompt Engineering 实用指南。如果你对 AI 在前端的应用感兴趣,可以看 AI 如何改变前端开发。