代码补全与内联对话

引言：让 AI 成为你的编码搭档

想象一下：你正在编写一个 React 组件，刚写完函数签名，AI 就自动补全了整个函数体；你遇到一个类型错误，选中代码按一个快捷键，AI 就给出修复方案。这不是未来，这是 CodeBuddy 的代码补全和内联对话功能。

本章将深入讲解这两个核心功能的工作原理、使用技巧和实战场景。

---

1. 代码补全的工作原理

1.1 项目级上下文理解

CodeBuddy 的代码补全不仅仅是简单的语法补全，它基于对整个项目上下文的理解：

上下文来源	作用
当前文件	理解当前代码结构和逻辑
项目文件	理解模块间的关系和依赖
类型定义	提供准确的类型信息
编码风格	学习团队的代码风格
最近编辑	优先补全相关的代码

1.2 补全触发机制

场景	触发方式	说明
自动触发	输入时自动显示	输入 2-3 个字符后触发
手动触发	Ctrl+Space	强制触发补全
接受建议	Tab	接受完整建议
拒绝建议	Escape	关闭补全面板
逐词接受	Cmd+Right	只接受下一个词
部分行接受	Ctrl+Down	接受到下一行

---

2. 多行补全实战

2.1 函数体补全

当你写完函数签名，AI 会自动补全函数体：

// 你写的代码：
function calculateTotal(items: CartItem[]): number {

// AI 补全的代码：
  return items.reduce((total, item) => {
    const itemPrice = item.price * item.quantity;
    const discount = item.discountRate ? itemPrice * item.discountRate : 0;
    return total + itemPrice - discount;
  }, 0);
}

2.2 接口实现补全

定义接口后，AI 可以补全实现类：

// 你写的接口：
interface UserRepository {
  findById(id: string): Promise<User | null>;
  findByEmail(email: string): Promise<User | null>;
  create(data: CreateUserDTO): Promise<User>;
  update(id: string, data: UpdateUserDTO): Promise<User>;
  delete(id: string): Promise<void>;
}

// AI 补全的实现：
class PostgresUserRepository implements UserRepository {
  constructor(private prisma: PrismaClient) {}

  async findById(id: string): Promise<User | null> {
    return this.prisma.user.findUnique({ where: { id } });
  }

  async findByEmail(email: string): Promise<User | null> {
    return this.prisma.user.findUnique({ where: { email } });
  }

  async create(data: CreateUserDTO): Promise<User> {
    return this.prisma.user.create({ data });
  }

  async update(id: string, data: UpdateUserDTO): Promise<User> {
    return this.prisma.user.update({ where: { id }, data });
  }

  async delete(id: string): Promise<void> {
    await this.prisma.user.delete({ where: { id } });
  }
}

2.3 测试用例补全

// 你写的测试描述：
describe('calculateTotal', () => {
  it('should calculate total with discounts', () => {

// AI 补全的测试体：
    const items = [
      { price: 100, quantity: 2, discountRate: 0.1 },
      { price: 50, quantity: 1, discountRate: 0 },
    ];
    const result = calculateTotal(items);
    expect(result).toBe(230); // (200 - 20) + 50
  });
});

---

3. 内联对话的四种场景

内联对话允许你在代码编辑区直接与 AI 对话，无需切换到侧边面板。

3.1 场景一：解释代码

选中一段复杂代码，按 Cmd+I（Mac）/ Ctrl+I（Win），输入：

用中文解释这段代码的逻辑

AI 会在代码旁边显示解释，不会修改代码。

3.2 场景二：修改代码

选中代码后：

将这段回调风格的代码改为 async/await

AI 会直接在编辑区内联修改代码，你可以逐行审查。

3.3 场景三：修复错误

当代码有红色波浪线时：

修复这个类型错误

AI 会分析错误信息，给出修复方案并直接应用。

3.4 场景四：添加注释和文档

为这个函数添加 JSDoc 文档注释，包括参数说明和返回值

AI 会在函数上方添加标准的文档注释。

3.5 内联对话 vs 侧边对话

特性	内联对话	侧边对话
位置	代码编辑区内	右侧面板
上下文	自动包含选中代码	需手动引用
适用场景	快速修改、解释	复杂任务、多文件操作
快捷键	Cmd+I / Ctrl+I	Cmd+K / Ctrl+K
修改方式	直接在编辑区修改	生成代码块

---

4. 错误修复流程

4.1 自动诊断

CodeBuddy 会实时检测代码错误：

• 红色波浪线：语法错误，立即标红并建议修复
• 黄色波浪线：类型警告，提供类型修正方案
• 蓝色标记：代码异味，建议重构方案

4.2 一键修复流程

光标移到错误位置
    -> 点击灯泡图标
    -> 选择 CodeBuddy 修复建议
    -> 一键应用

4.3 批量修复

对于项目中的同类错误：

项目中所有使用 any 类型的地方，都改为具体的类型定义

AI 会遍历项目文件，逐一修复。

---

5. 实战技巧

5.1 用注释引导补全

在代码中写注释，AI 会根据注释补全：

// 创建一个防抖函数，支持泛型和取消功能
function debounce<T extends (...args: any[]) => any>(
// AI 会自动补全完整的防抖函数实现

5.2 用类型引导补全

定义类型后，AI 补全会更准确：

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// AI 补全时会自动使用这个类型
async function fetchUsers(): Promise<ApiResponse<User[]>> {
// AI 知道要返回 ApiResponse<User[]> 格式

5.3 链式调用补全

AI 支持链式调用的智能补全：

users
  .filter(u => u.isActive)
  .map(u => ({
// AI 会根据 users 的类型补全 map 的回调

---

6. 常见陷阱

陷阱 1：补全建议不准确

现象：AI 补全的代码与项目风格不一致

解决：

• 在 Rules 中定义编码规范
• 使用注释引导补全方向
• 确保项目类型定义完整

陷阱 2：大文件补全延迟

现象：超过 1000 行的文件，补全有明显延迟

解决：

• 将大文件拆分为多个小文件
• 使用 @ 引用关键文件
• 关闭不必要的扩展

陷阱 3：过度依赖补全

现象：不理解代码逻辑就接受补全

解决：

• 补全是辅助工具，不是替代品
• 逐词接受，理解每一步
• 复杂逻辑先理解再接受

---

总结

功能	核心价值
代码补全	基于项目上下文的智能补全，支持多行和链式调用
内联对话	在编辑区直接对话，快速修改和解释代码
错误修复	自动诊断 + 一键修复，支持批量修复
注释引导	用注释和类型引导 AI 生成更准确的代码

下一章预告：我们将学习 Figma 集成功能，了解如何将设计稿一键转为代码。