Claude Code 初体验

什么是 Claude Code？

Claude Code 是 Anthropic 官方推出的 CLI 工具，它将强大的 Claude AI 直接集成到你的开发环境中。通过命令行界面，你可以：

• 📝 智能代码生成 - 快速编写、重构和优化代码
• 🐛 高效调试 - 智能诊断和修复 bug
• 📚 代码解释 - 理解复杂代码逻辑
• 🔄 自动化任务 - 处理重复性开发工作

国内使用说明

⚠️ 重要提示：Claude Code 官方服务在国内无法直接访问，DeepSeek、通义千问、GLM等各大厂商都已适配Claude Code,本教程已GLM为例，配置Claude Code：

安装与配置

步骤 1：安装Claude Code

前提条件：

• 您需要安装 Node.js 18 或更新版本环境
• Windows 用户还需安装 Git for Windows 进入命令行界面，安装 Claude Code

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

运行如下命令，查看安装结果，若显示版本号则表示安装成功

claude --version

步骤 2：获取智谱 API Key

1. 访问智谱 AI 开放平台，可以使用我的链接购买模型，享九折优惠，也可以看看万能的闲鱼🐟
2. 进入 API Keys 页面创建新的 API Key
3. 保存好你的 API Key

步骤 3：配置 GLM API

编辑settings.json文件

# 编辑或新增 `settings.json` 文件
# MacOS & Linux 为 `~/.claude/settings.json`
# Windows 为`用户目录/.claude/settings.json`
# 新增或修改里面的 env 字段
# 注意替换里面的 `your_zhipu_api_key` 为您上一步获取到的 API Key
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "your_zhipu_api_key",
    "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1
  }
}
# 再编辑或新增 `.claude.json` 文件
# MacOS & Linux 为 `~/.claude.json`
# Windows 为`用户目录/.claude.json`
# 新增 `hasCompletedOnboarding` 参数
{
  "hasCompletedOnboarding": true
}

步骤 4：验证配置

配置完成后，进入一个您的代码工作目录，在终端中执行 claude 命令即可开始使用 Claude Code

实战示例：构建待办事项应用

让我们使用Claude Code构建一个完整的应用：

第一步：生成项目结构

在终端中输入：

创建一个 React + TypeScript + Vite 的待办事项应用项目结构，
要求：
1. 组件化设计
2. 使用 hooks 管理状态
3. 包含类型定义文件
4. 支持 TypeScript 严格模式

AI 会建议项目结构：

todo-app/
├── src/
│   ├── components/
│   │   ├── TodoList.tsx
│   │   ├── TodoItem.tsx
│   │   └── TodoForm.tsx
│   ├── hooks/
│   │   └── useLocalStorage.ts
│   ├── types/
│   │   └── todo.ts
│   ├── utils/
│   │   └── helpers.ts
│   ├── App.tsx
│   ├── App.css
│   └── main.tsx
├── package.json
├── tsconfig.json
├── vite.config.ts
└── index.html

第二步：生成类型定义

创建 src/types/todo.ts 文件，定义待办事项的 TypeScript 类型，
包含：id、text、completed、createdAt 等字段

AI 生成：

// types/todo.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
  createdAt: string;
}

export interface TodoItemProps {
  todo: Todo;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

export interface TodoFormProps {
  onAdd: (text: string) => void;
}

export interface TodoListProps {
  initialTodos?: Todo[];
}

export interface TodoStats {
  total: number;
  completed: number;
  active: number;
}

第三步：生成自定义 Hook

创建 useLocalStorage hook，要求：
- 支持泛型
- 自动序列化/反序列化
- 支持默认值
- 包含错误处理

AI 生成：

// hooks/useLocalStorage.ts
import { useState, useEffect, useCallback } from 'react';

export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((prev: T) => T)) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }

    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error loading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  const setValue = useCallback((value: T | ((prev: T) => T)) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;

      setStoredValue(valueToStore);

      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error);
    }
  }, [key, storedValue]);

  return [storedValue, setValue];
}

第四步：生成 TodoList 组件

生成 TodoList.tsx 组件：
- 使用 TypeScript
- 实现添加、删除、切换完成状态
- 使用 useLocalStorage hook
- 添加统计功能
- 优化性能（使用 useCallback）

AI 生成：

// components/TodoList.tsx
import { useCallback, useMemo } from 'react';
import { Todo } from '../types/todo';
import { useLocalStorage } from '../hooks/useLocalStorage';
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';

export default function TodoList() {
  const [todos, setTodos] = useLocalStorage<Todo[]>('todos', []);

  const addTodo = useCallback((text: string) => {
    const newTodo: Todo = {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date().toISOString()
    };
    setTodos(prev => [...prev, newTodo]);
  }, [setTodos]);

  const toggleTodo = useCallback((id: number) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  }, [setTodos]);

  const deleteTodo = useCallback((id: number) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }, [setTodos]);

  const clearCompleted = useCallback(() => {
    setTodos(prev => prev.filter(todo => !todo.completed));
  }, [setTodos]);

  const stats = useMemo(() => ({
    total: todos.length,
    completed: todos.filter(t => t.completed).length,
    active: todos.filter(t => !t.completed).length
  }), [todos]);

  const sortedTodos = useMemo(() => {
    return [...todos].sort((a, b) => {
      if (a.completed === b.completed) {
        return b.id - a.id;
      }
      return a.completed ? 1 : -1;
    });
  }, [todos]);

  return (
    <div className="todo-list">
      <h1>待办事项</h1>

      <TodoForm onAdd={addTodo} />

      <ul className="todo-items">
        {sortedTodos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onToggle={toggleTodo}
            onDelete={deleteTodo}
          />
        ))}
      </ul>

      {stats.total > 0 && (
        <div className="todo-stats">
          <p>
            总计: {stats.total} |
            已完成: {stats.completed} |
            未完成: {stats.active}
          </p>
          {stats.completed > 0 && (
            <button onClick={clearCompleted}>
              清除已完成
            </button>
          )}
        </div>
      )}
    </div>
  );
}

第五步：生成 TodoItem 组件

生成 TodoItem.tsx 组件：
- 显示单个待办项
- 支持切换完成状态
- 支持删除
- 添加过渡动画

AI 生成：

// components/TodoItem.tsx
import { Todo } from '../types/todo';

interface TodoItemProps {
  todo: Todo;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

export default function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
  return (
    <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span className="todo-text">{todo.text}</span>
      <button
        className="delete-btn"
        onClick={() => onDelete(todo.id)}
      >
        删除
      </button>
    </li>
  );
}

第六步：代码审查和优化

请审查我的待办事项应用代码，从以下角度分析：
1. 代码质量和可读性
2. 性能优化建议
3. 潜在的安全问题
4. React 最佳实践
5. TypeScript 类型安全性

AI 会提供详细的审查意见和改进建议。

提示词工程技巧

1. 明确具体

好的提示词：

创建一个 React 自定义 Hook 用于数据获取：
- 使用 TypeScript
- 函数签名：useData<T>(url: string): { data: T | null, loading: boolean, error: Error | null }
- 支持请求缓存（5分钟）
- 实现自动重试（最多3次，指数退避）
- 支持请求取消
- 包含完整的错误处理

不好的提示词：

写个获取数据的 hook

2. 提供上下文

我正在使用 React 18 + TypeScript + Vite + Tailwind CSS 开发一个电商网站，
需要创建一个购物车组件。数据库使用 PostgreSQL，后端是 Node.js + Express。

请生成以下功能：
1. 商品列表展示（包含图片、价格、库存）
2. 添加/删除商品
3. 数量调整（+/- 按钮）
4. 价格计算（含税、运费）
5. 使用 localStorage 持久化购物车数据
6. 添加加载状态和错误处理

3. 分步骤

不要一次要求太多：

第一步：先创建购物车的基础数据结构和 TypeScript 类型定义

第二步：创建 useShoppingCart 自定义 Hook 管理状态

第三步：实现 ShoppingCart 主组件

第四步：添加动画效果和过渡

第五步：编写单元测试

4. 指定代码风格

创建一个 Button 组件：
- 代码风格：shadcn/ui
- 支持多种变体：default、outline、ghost、destructive
- 支持多种尺寸：sm、md、lg、icon
- 使用 Tailwind CSS
- 遵循无障碍设计（WCAG 2.1 AA）
- 支持通过 asChild 渲染为不同元素
- 添加完整的 TypeScript 类型

恭喜你开启了 AI 辅助编程之旅！善用这些工具，让你的开发效率倍增！