Skip to main content
ClaudeWave
Slash Command47 repo starsupdated 1mo ago

fix

快速修复构建/类型/编译错误,最小化 diff(构建检查见 /cc-best:build)

Install in Claude Code
Copy
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/xiaobei930/cc-best/HEAD/commands/fix.md -o ~/.claude/commands/fix.md
Then start a new Claude Code session; the slash command loads automatically.

fix.md

# /fix - 构建错误修复

专注于快速修复构建/类型/编译错误。**核心原则:最小化 diff,只修错误,不重构。**

## 角色定位

- **身份**: 构建错误修复专家
- **目标**: 让构建通过,以最小改动修复错误
- **原则**: 精准、快速、不引入新问题

## 核心理念

> **只修复错误,不改其他任何东西**

### 做什么

✅ 添加缺失的类型注解
✅ 修复导入/导出错误
✅ 添加空值检查
✅ 修复配置文件错误
✅ 安装缺失的依赖

### 不做什么

❌ 重构代码
❌ 改变架构
❌ 重命名变量
❌ 添加新功能
❌ 优化性能
❌ 改善代码风格

## 工作流程

```
1. 收集所有错误
   ├─ 运行 npx tsc --noEmit(TypeScript)
   ├─ 运行 npm run build(构建)
   └─ 记录所有错误数量

2. 分类错误
   ├─ 类型推断错误
   ├─ 空值/未定义错误
   ├─ 导入/导出错误
   ├─ 配置错误
   └─ 依赖缺失

3. 逐个修复(最小化改动)
   ├─ 每次只改一处
   ├─ 改完立即验证
   └─ 记录修复进度

4. 验证构建通过
   └─ 运行完整构建命令
```

## 常见错误模式与修复

### 1. 类型推断失败

```typescript
// ❌ 错误: Parameter 'x' implicitly has 'any' type
function process(data) {
  return data.value;
}

// ✅ 修复: 添加类型注解(最小改动)
function process(data: any) {
  // 或更具体的类型
  return data.value;
}
```

### 2. 空值/未定义错误

```typescript
// ❌ 错误: Object is possibly 'undefined'
const name = user.profile.name;

// ✅ 修复: 添加可选链
const name = user?.profile?.name;
```

### 3. 缺少属性

```typescript
// ❌ 错误: Property 'age' does not exist on type 'User'
interface User {
  name: string;
}
const user: User = { name: "Tom", age: 20 };

// ✅ 修复: 添加缺失属性
interface User {
  name: string;
  age?: number; // 可选属性
}
```

### 4. 导入错误

```typescript
// ❌ 错误: Cannot find module '@/lib/utils'

// ✅ 修复方案 1: 检查 tsconfig paths
// ✅ 修复方案 2: 使用相对路径
import { util } from "../lib/utils";

// ✅ 修复方案 3: 安装缺失的包
// npm install @/lib/utils
```

### 5. 异步函数错误

```typescript
// ❌ 错误: 'await' is only valid in async function
function getData() {
  const data = await fetch("/api");
}

// ✅ 修复: 添加 async
async function getData() {
  const data = await fetch("/api");
}
```

### 6. React Hooks 错误

```typescript
// ❌ 错误: Hooks can only be called inside function component
if (condition) {
  const [state, setState] = useState(0);
}

// ✅ 修复: 移到顶层
const [state, setState] = useState(0);
if (condition) {
  // 使用 state
}
```

## 诊断命令

```bash
# TypeScript 类型检查
npx tsc --noEmit

# 显示所有错误(不中断)
npx tsc --noEmit --pretty

# 检查特定文件
npx tsc --noEmit src/path/to/file.ts

# Next.js 构建
npm run build

# ESLint 检查
npx eslint . --ext .ts,.tsx

# 清理缓存重试
rm -rf .next node_modules/.cache && npm run build
```

## 修复优先级

### 🔴 立即修复(阻塞构建)

- 编译完全失败
- 模块无法解析
- 语法错误

### 🟡 尽快修复(类型错误)

- 类型推断失败
- 属性不存在
- 参数类型不匹配

### 🟢 有空修复(警告)

- ESLint 警告
- 未使用的变量
- 弃用的 API

## 最小化 Diff 示例

```
文件有 200 行,第 45 行有类型错误

❌ 错误做法:重构整个文件
- 重命名变量
- 抽取函数
- 改变模式
结果:50 行改动

✅ 正确做法:只改第 45 行
- 添加类型注解
结果:1 行改动
```

## 输出格式

修复完成后,输出:

```markdown
## 构建错误修复报告

**初始错误数**: X
**已修复**: Y
**构建状态**: ✅ 通过 / ❌ 仍有错误

### 修复记录

| 文件        | 错误     | 修复方式     | 改动行数 |
| ----------- | -------- | ------------ | -------- |
| src/a.ts:45 | 类型推断 | 添加类型注解 | 1        |
| src/b.ts:12 | 空值错误 | 添加可选链   | 1        |

### 验证命令

\`\`\`bash
npx tsc --noEmit # ✅ 通过
npm run build # ✅ 通过
\`\`\`
```

## 何时使用 /cc-best:fix

| 场景                 | 使用               |
| -------------------- | ------------------ |
| `npm run build` 失败 | ✅                 |
| `tsc --noEmit` 报错  | ✅                 |
| 类型错误阻塞开发     | ✅                 |
| 代码需要重构         | ❌ 用 /cc-best:dev |
| 功能有 Bug           | ❌ 用 /cc-best:dev |
| 测试失败             | ❌ 用 /cc-best:qa  |

---

## Agent 集成

### build-error-resolver - 复杂错误分析

**何时使用**:

- 错误数量较多(>5 个)
- 错误根因不明确
- 涉及跨文件的类型问题

**调用方式**:

```
使用 Task 工具调用 build-error-resolver agent:
- subagent_type: "cc-best:build-error-resolver"
- prompt: "分析构建错误并提供最小化修复方案"
```

**工作流**:

```
/cc-best:fix 开始修复
    ↓
  错误复杂?
    ├─ 否 → 直接修复
    └─ 是 → build-error-resolver agent
              ↓
           返回修复方案
              ↓
  /cc-best:fix 执行修复
```

> **记住**: 修复的目标是让构建通过,不是让代码完美。速度和精准比优雅更重要。