claude code development

1. 安装

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

# upgrade
sudo npm install -g @anthropic-ai/claude-code@latest

1.1 使用deepseek模型

配置环境变量，直接使用 DeepSeek API 接入 Claude Code。

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
export ANTHROPIC_AUTH_TOKEN=${DEEPSEEK_API_KEY}
export API_TIMEOUT_MS=600000
export ANTHROPIC_MODEL=deepseek-chat
export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1

# 启动
claude

1.2 使用deepseek模型(自定义命令)

通过创建自定义脚本，实现独立的 DeepSeek 调用命令，互不影响。

mkdir -p ~/claude-model/bin
# 将 bin 目录加入 PATH，例如在 ~/.zshrc 中添加:
# export PATH="$HOME/claude-model/bin:$PATH"

创建脚本 ~/claude-model/bin/claude-deepseek

#!/usr/bin/env bash
# Wrapper for Claude Code CLI using DeepSeek API

CLAUDE_BIN="$(which claude)"

# 配置 DeepSeek 环境变量
export ANTHROPIC_BASE_URL="https://api.deepseek.com/anthropic"
export ANTHROPIC_AUTH_TOKEN="YOUR_DEEPSEEK_API_KEY"
export ANTHROPIC_MODEL="deepseek-chat"
export ANTHROPIC_SMALL_FAST_MODEL="deepseek-chat"
export API_TIMEOUT_MS=600000
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1

# 使用独立的配置目录，避免与原版配置冲突
export CLAUDE_CONFIG_DIR="$HOME/.claude-deepseek"

exec "$CLAUDE_BIN" "$@"

赋予权限并使用

chmod +x ~/claude-model/bin/claude-deepseek

# 使用新命令
claude-deepseek

1.3. 路由代理访问方式

sudo npm install -g @musistudio/claude-code-router@latest

vi ~/.claude-code-router/config.json, more config see https://github.com/musistudio/claude-code-router:

{
  "PROXY_URL": "http://127.0.0.1:7890",
  "LOG": true,
  "API_TIMEOUT_MS": 600000,
  "NON_INTERACTIVE_MODE": false,
  "Providers": [
    {
      "name": "deepseek",
      "api_base_url": "https://api.deepseek.com/anthropic",
      "api_key": "sk-xxx",
      "models": ["deepseek-chat", "deepseek-reasoner"],
      "transformer": {
        "use": ["deepseek"],
        "deepseek-chat": {
          "use": ["tooluse"]
        }
      }
    }
  ],
  "Router": {
    "default": "deepseek,deepseek-chat",
    "background": "deepseek,deepseek-chat",
    "think": "deepseek,deepseek-reasoner",
    "longContext": "deepseek,deepseek-reasoner",
    "longContextThreshold": 60000
  }
}

通过代理启动claud code: ccr code

2. 基本使用

2.1. 计划模式

2.2. 风格

3. 链接IDE

安装： Claude Code for VSCode 插件, 通过 /ide 命令链接ide， 链接 IDE 功能是什么

4. Agents（子代理）

Claude Code 的 Sub-agents（子代理） 功能，可以根据特定任务创建专属的AI助手，它们拥有独立的上下文和精密的工具权限，非常适合处理代码审查、调试、UI设计等专业性强的任务。

几个典型场景：

场景 主代理 (Claude) 子代理 (Sub-agent) 优势
代码审查 接收编写新功能的指令 被自动委派或显式调用，专门检查代码规范、安全性 上下文隔离：主对话线程不被审查细节干扰，保持清晰
博客写作 负责撰写文章核心内容 被调用以生成博客封面图或SVG图标 专业化处理：每个代理专注于其最擅长的领域，输出质量更高
复杂探索 将任务（如为项目生成文档）分解 并行启动多个子代理，分别处理不同模块 高效并行：将潜在耗时的单线程任务拆解为高效并行流程

🛠️ 如何配置与使用 Sub-agents

创建 Sub-agent

  1. 打开管理界面：在 Claude Code 会话中输入命令 /agents。
  2. 创建新代理：选择 “Create New Agent”。
  3. 定义代理属性：你需要配置以下几个核心要素：
    • name：代理的唯一标识符（小写字母+连字符），如 code-reviewer。
    • description：清晰描述代理的用途和触发场景，这决定了Claude何时会自动委派任务。
    • tools：授予其必要的工具权限列表（如 Read, Grep, Bash），遵循权限最小化原则以保证安全。
    • system prompt：在Markdown文件中编写详细的行为规范、工作流程和约束条件，这是代理的”灵魂”。

配置路径:

参考社区 sub-agents 配置:

调用 Sub-agent

💡 进阶技巧与最佳实践

希望这份指南能帮助你快速上手 Claude Code 的 Sub-agents 功能。如果你在创建第一个子代理时遇到问题，比如不确定某个任务应该配置哪些工具权限，可以随时追问。

5. 自定义命令

在 Claude Code 中创建自定义命令（Custom Commands）可以让你把一些复杂或常用的指令固化下来，极大地提升工作效率。下面我将为你介绍如何创建和使用它们，并提供一个包含多种场景的实用范例表格。

自定义命令通过创建特定的 Markdown (.md) 文件来实现，你需要根据命令的适用范围，将其放在正确的目录下：

创建文件并编辑后，重启 Claude Code 即可通过输入 / 来看到并使用你新创建的命令。

💡 高级用法与技巧

除了上面表格中的基础用法，自定义命令还支持一些高级功能，可以让你的命令更加强大和智能。

⚠️ 温馨提示

希望这些范例和说明能帮助你更好地利用 Claude Code 的自定义命令功能。如果你对实现某个特定功能的命令有疑问，或者想了解更复杂的组合用法，随时可以再问我。

6. 配置 MCP (Model Context Protocol)

MCP (Model Context Protocol) 是一种开放标准，允许 AI 助手（如 Claude）安全地连接到本地或远程的数据源和工具。通过配置 MCP 服务器，你可以让 Claude 访问数据库、文件系统、API 等外部资源。

配置路径:

配置文件的基本结构如下：

{
  "mcpServers": {
    "server-name": {
      "command": "executable-command",
      "args": ["arg1", "arg2"],
      "env": {
        "ENV_VAR": "value"
      }
    }
  }
}

命令添加:

# 通过 -s user 指定用户级别
claude mcp add <MCP服务器名称> -s user <启动命令>
claude mcp remove <MCP服务器名称> -s user

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

以下是几个常见的 MCP 服务器配置范例：

6. Chrome DevTools (浏览器调试)

允许 Claude 控制 Chrome 浏览器进行调试、页面分析等。 需要先安装：npm install -g chrome-devtools-mcp

添加: claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest

手动配置:

"mcp__chrome-devtools": {
  "command": "npx",
  "args": [
    "-y",
    "chrome-devtools-mcp@latest"
  ]
}

6.3 调试与验证

配置完成后，重启 Claude Code。你可以通过询问 Claude “列出当前可用的 MCP 工具” 来验证服务器是否加载成功。

6.3 调试与验证

配置完成后，重启 Claude Code。你可以通过询问 Claude “列出当前可用的 MCP 工具” 来验证服务器是否加载成功。

7. Plugins (插件)

Claude Code 的插件系统（Plugins）允许你扩展其能力，包括自定义命令、Agents、Skills 和 MCP 服务器等。

7.1 安装与使用

7.1.1 发现插件

你可以通过以下两种方式查看市场上有哪些可用的插件：

  1. 命令行交互界面： 在 Claude Code 中输入 /plugin 命令，会打开一个交互式界面。使用 Tab 键在不同标签页之间切换（如 Discover, Installed, Marketplaces）。在 Discover 标签页中，你可以浏览所有已添加市场的插件列表。

  2. 网页浏览： 访问非官方的插件索引站 claude-plugins.dev 浏览社区插件，或者直接查看 Anthropic 官方 GitHub 仓库。

7.1.2 安装插件

安装插件最简单的方法是使用 /plugin install 命令。

推荐安装方式：项目级别 (Project Scope) 建议使用 --scope project 参数将插件安装到当前项目。这样做的好处是：

项目级安装后的文件变化： 当你使用 --scope project 安装插件（例如 frontend-design）后，你的项目目录中通常会生成或更新以下配置文件：

  1. .claude/settings.json: 记录已启用的插件及其配置。 
    
{
  "plugins": {
    "frontend-design": {
      "enabled": true,
      "scope": "project"
    }
  }
}
  2. （可选）插件相关文件: 取决于插件类型，某些插件可能会在 .claude/ 目录下生成特定的配置文件或缓存。 注意：实际的插件源码通常缓存在全局目录中，项目内仅保存引用配置。

基本语法：

/plugin install <plugin-id> --scope project

示例： 安装官方提供的 Frontend Design 插件到当前项目：

/plugin install frontend-design@claude-code-plugins --scope project

或者

/plugin install @anthropics/claude-code-plugins/frontend-design --scope project

如果不加 --scope project，默认会安装到用户级别 (User Scope)，即对该用户的所有项目生效。

7.1.3 常用命令参考

以下是 /plugin 命令的常用用法：

7.2 常用插件推荐

插件名 ID 说明
Frontend Design frontend-design@claude-code-plugins 专注于生成高质量、非通用的前端界面代码，包含设计审美和最佳实践。
Commit Commands @anthropics/claude-code-plugins/commit-commands 包含 git 提交、推送和创建 PR 的相关命令。
Code Review @anthropics/claude-code-plugins/code-review 自动化的代码审查插件，提供基于置信度的审查意见。

7.3 使用建议

  1. 按需安装：不要一次性安装过多插件，以免造成环境混乱或上下文过载。根据当前项目的需求选择合适的插件。
  2. 查看文档：许多插件（特别是官方插件）在 GitHub 上有详细的 SKILL.md 或说明文档，安装前建议阅读以了解其具体能力和触发方式。
  3. 插件管理：
    • 列出已安装插件：/plugin list (或使用 npx claude-plugins list)
    • 移除插件：/plugin remove <plugin-id>
    • 更新插件：通常需要重新安装最新版本。

提示：插件本质上是 Skills、Prompts 和工具配置的集合。如果你发现某个插件特别好用，可以研究其源码（通常是开源的），学习如何编写更好的 System Prompts 和 Skills。

8. Skills (技能)

Skills 是 Claude Code 中用于扩展模型能力的一种机制。与由用户显式触发的“命令”(/command)不同，Skills 是由模型自主决定调用的。

8.1 什么是 Skills

Skills 本质上是一组结构化的提示词（Prompts）和指令，告诉 Claude 如何处理特定类型的任务。当你在对话中提出请求时，Claude 会根据已安装 Skill 的描述（Description），判断是否需要激活某个 Skill 来辅助完成任务。

8.2 创建与存放位置

Skills 以文件夹的形式存在，核心是一个 SKILL.md 文件。

你可以将 Skills 存放在以下两个位置：

  1. 个人级 (Personal)：~/.claude/skills/
    • 对你个人的所有项目生效。
  2. 项目级 (Project)：.claude/skills/ (位于项目根目录)
    • 仅对当前项目生效，且可以提交到 Git 仓库与团队共享。

目录结构示例：

.claude/
└── skills/
    └── my-custom-skill/      <-- Skill 文件夹名称
        ├── SKILL.md          <-- 核心定义文件 (必须)
        ├── reference.md      <-- (可选) 额外的参考文档
        └── scripts/          <-- (可选) 辅助脚本
            └── helper.py

8.3 SKILL.md 文件格式

SKILL.md 由两部分组成：YAML Frontmatter (元数据) 和 Markdown 正文 (指令)。

基本模板：

---
name: skill-name-id            # 唯一标识符，只能包含小写字母、数字和连字符
description: 简短描述这个 Skill 是做什么的，以及 Claude 何时应该使用它。 # 关键字段！Claude 根据此描述决定是否调用
allowed-tools: [Read, Grep]    # (可选) 限制该 Skill 运行时允许使用的工具，提高安全性
---

# Skill 名称

## Instructions (指令)
在这里详细说明 Claude 应该如何执行这个任务。
1. 第一步...
2. 第二步...

## Examples (示例)
提供具体的输入输出示例，帮助 Claude 理解预期效果。
- 用户输入: ...
- 期望行为: ...

8.4 实战示例：创建一个 “Vue3 组件生成器” Skill

假设我们希望 Claude 在生成 Vue 组件时，始终遵循团队特定的 <script setup> 风格。

  1. 创建目录：mkdir -p .claude/skills/vue-component-gen
  2. 创建文件：.claude/skills/vue-component-gen/SKILL.md
  3. 写入内容：
---
name: vue-component-gen
description: Generate Vue 3 components following team best practices. Use this whenever the user asks to create or refactor a Vue component.
---

Vue 3 Component Generator

Instructions

When generating Vue 3 components, you MUST follow these rules:

  1. Syntax: Always use <script setup lang="ts">.
  2. Naming: Use PascalCase for component filenames (e.g., UserProfile.vue).
  3. Structure:
    • <script setup> first
    • <template> second
    • <style scoped> last
  4. Props: Use interface-based prop definitions with defineProps<Props>().

Examples

User: “Create a button component”

Output:

<script setup lang="ts">
interface Props {
  label: string;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
});

const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void;
}>();
</script>

<template>
  <button :disabled="props.disabled" @click="emit('click', $event)">
    {{ props.label }}
  </button>
</template>

<style scoped>
button {
  /* styles */
}
</style>

8.5 如何使用

创建好 Skill 后（通常需要重启 Claude Code 或重新加载配置），你不需要输入任何特殊命令。

直接用自然语言提问：

“帮我写一个展示用户信息的 Vue 组件”

Claude 会：

  1. 分析你的请求。
  2. 检索所有可用 Skills 的 description。
  3. 发现 vue-component-gen 的描述匹配请求。
  4. 加载该 Skill 的 Prompt 到上下文中。
  5. 按照 SKILL.md 中的规范生成代码。

查看已加载的 Skills： 你可以直接问 Claude：

“What skills are available?”

9. 常用快捷键 (Shortcuts)

熟练使用快捷键可以大幅提升 Claude Code 的交互效率。

9.1 通用控制

快捷键 功能 说明
Ctrl+C 取消/中断 取消当前输入或中断正在生成的回答。
Ctrl+D 退出 发送 EOF 信号，退出 Claude Code 会话。
Ctrl+L 清屏 清除终端屏幕显示，但保留对话历史。
Ctrl+O 切换详细模式 显示/隐藏工具执行的详细日志 (Verbose Output)。
Ctrl+R 搜索历史 交互式反向搜索命令历史 (Reverse Search)。
Esc + Esc 回退 (Rewind) 快速回退对话和代码到上一个状态（撤销最近的更改）。
Shift+Tab 切换模式 在自动批准 (Auto-Accept)、计划模式 (Plan Mode) 和普通模式间切换。

9.2 输入与编辑

快捷键 功能 说明
Option+Enter 换行 (macOS 默认) 在输入框中插入新行，而不是发送消息。
\ + Enter 快速换行 在所有终端通用的换行方式。
Up/Down 历史导航 浏览上一条/下一条输入的命令。
Ctrl+V 粘贴图片 (macOS/Linux) 将剪贴板中的图片或图片路径粘贴到输入框。

9.3 进阶操作

提示：不同终端模拟器可能会拦截某些快捷键（如 Option 键）。如果遇到问题，请检查终端的 Meta/Option 键配置，或运行 /terminal-setup 进行自动配置。

A. 感受