Trae Chat 与 Inline Edit：日常编码的 AI 搭档

开篇：日常编码最常用的两个 AI 功能

Builder 和 SOLO 很酷，但你日常用得最多的其实是两件事：问 AI 一个问题，或者让 AI 帮你改一段代码。这就是 Chat Mode 和 Inline Edit 的主场。

Chat 负责”聊”——讨论、分析、生成代码。Inline Edit 负责”改”——选中代码，原地修改，逐行审查 diff。两者配合，覆盖日常编码 80% 的 AI 场景。

Chat Mode 详解：多轮对话

打开与基本使用

# macOS: Cmd + L / Windows: Ctrl + L
# 或点击侧边栏 Chat 图标

直接输入问题就行。和 ChatGPT 不同的是，Trae 的 Chat 天然理解你的项目上下文：

你：这个项目用的什么状态管理方案？
Trae：根据 package.json 和代码分析，项目使用 Zustand...

你：帮我写一个新的 store，管理购物车状态
Trae：好的，基于项目现有的 store 风格，这是购物车 store：

如果你之前的 store 都用了 immer 中间件，它生成的新 store 也会自动用上。

多轮对话技巧

核心原则：每一轮建立在上一轮基础上，不要每次从头开始。

# 第一轮：让 AI 理解现状
你：分析一下 src/services/api.ts 的错误处理逻辑

# 第二轮：基于分析提需求
你：针对你发现的问题，重构错误处理，统一使用自定义 Error 类

# 第三轮：细化
你：把 NetworkError 的重试改成指数退避，最多 3 次

Trae 会记住整个对话链，不需要重复上下文。

上下文引用：@files / @folders 基础

用 @ 符号把文件、目录、代码符号”喂”给 AI，这是 Chat 最强大的能力之一。

你：@src/utils/format.ts 日期格式化函数有 bug，UTC 时间少 8 小时
你：@src/components/ 这个目录下哪些组件没做 loading 状态处理？

常用 @ 引用速查

引用方式	作用	示例
`@file`	引用单个文件	`@src/index.ts 解释这个文件`
`@folder`	引用整个目录	`@src/hooks/ 有哪些自定义 Hook`
`@symbol`	引用代码符号	`@UserService 这个类的职责是什么`
`@selection`	引用选中代码	选中后在 Chat 中提问
`@terminal`	引用终端输出	`@terminal 这个报错怎么解决`
`@git`	引用 Git 变更	`@git 这次改动有没有副作用`

输入 @ 后会弹出自动补全列表，方向键选择，回车确认，不需要手动输完整路径。

Inline Editing：选中代码，原地修改

基本流程

# 1. 选中要修改的代码
# 2. 按 Cmd + I (macOS) / Ctrl + I (Windows)
# 3. 描述你想要的修改
# 4. AI 以 inline diff 形式展示修改
# 5. 逐处接受或拒绝

Inline Diff 审查

AI 不会直接覆盖你的代码，而是展示 diff，你可以逐个审查：

  function calculateTotal(items: CartItem[]): number {
-   let total = 0;
-   for (const item of items) {
-     total += item.price * item.quantity;
-   }
-   return total;
+   return items.reduce(
+     (total, item) => total + item.price * item.quantity, 0
+   );
  }

点击 ✅ 接受、❌ 拒绝，多处修改可以选择性接受。

Chat vs Inline Edit 场景选择

场景	推荐方式	原因
理解代码逻辑	Chat	需要解释，不改代码
添加类型注解	Inline Edit	范围明确，选中即改
重构整个模块	Chat	需要讨论，可能跨文件
修复小 bug	Inline Edit	定位明确，改完就走
设计 API 接口	Chat	多轮讨论，逐步完善
添加错误处理	Inline Edit	现有代码上增量修改
学习新概念	Chat	纯问答
性能优化	Inline Edit	选中热点代码优化
代码审查	Chat + @git	审查整体变更
写单元测试	Chat	需要生成新文件

简单记：改现有代码用 Inline Edit，讨论或生成新内容用 Chat。

实战：用 Chat 重构函数

你有一个越写越复杂的订单处理函数：

async function processOrder(orderId: string, userId: string) {
  const order = await db.orders.findById(orderId);
  if (!order) throw new Error('Order not found');
  if (order.userId !== userId) throw new Error('Unauthorized');
  if (order.status !== 'pending') throw new Error('Order is not pending');

  const items = await db.orderItems.findByOrderId(orderId);
  let totalAmount = 0;
  for (const item of items) {
    const product = await db.products.findById(item.productId);
    if (!product) throw new Error(`Product ${item.productId} not found`);
    if (product.stock < item.quantity)
      throw new Error(`Insufficient stock for ${product.name}`);
    totalAmount += product.price * item.quantity;
  }
  // ... 扣库存、支付、回滚、通知，全塞在一个函数里
}

在 Chat 中输入：

@src/services/order.ts processOrder 太长了，帮我拆分：
1. 验证逻辑单独抽出
2. 库存检查和扣减单独抽出
3. 支付失败要有回滚
4. 保持 TypeScript 类型安全

Trae 会输出拆分后的多个函数：validateOrder、calculateAndValidateStock、deductStock、rollbackStock，以及精简后的 processOrder 主函数。你可以继续追问”把自定义 Error 类也定义一下”，Chat 会基于上下文继续生成。

实战：用 Inline Edit 添加错误处理

你写了一个没有错误处理的 API 函数：

export async function fetchUserProfile(userId: string) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data;
}

选中这个函数，按 Cmd + I，输入”添加错误处理：状态码检查、超时、类型校验”。AI 会生成 diff：

export async function fetchUserProfile(userId: string): Promise<UserProfile> {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000);

  try {
    const response = await fetch(`/api/users/${userId}`, {
      signal: controller.signal,
    });
    if (!response.ok) {
      throw new ApiError('Failed to fetch user profile', response.status);
    }
    const data = await response.json();
    if (!isUserProfile(data)) {
      throw new ApiError('Invalid response format', response.status);
    }
    return data;
  } catch (error) {
    if (error instanceof DOMException && error.name === 'AbortError') {
      throw new ApiError('Request timeout', 408);
    }
    throw error;
  } finally {
    clearTimeout(timeoutId);
  }
}

审查 diff 时觉得哪里不对，直接拒绝那一处，手动调整就行。Inline Edit 的输出是起点，不是终点。

代码补全：整行与整函数

除了 Chat 和 Inline Edit，代码补全是你每时每刻都在用的功能。

// 你输入函数签名：
function debounce<T extends (...args: any[]) => any>(fn: T, delay: number) {

// Trae 自动补全整个函数体：
  let timeoutId: ReturnType<typeof setTimeout>;
  return (...args: Parameters<T>) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

操作	快捷键	说明
接受补全	`Tab`	接受整个建议
接受单词	`Cmd + →`	只接受到下一个单词
拒绝补全	`Esc`	忽略当前建议
触发补全	`Alt + \`	手动触发建议

补全不理想？按 Esc 后多输入几个字符，Trae 会重新生成建议。

对话历史管理技巧

Chat 用久了历史会越来越多，几个管理习惯：

1. 一个对话聚焦一个主题
   ✅ "购物车功能开发" 一个对话搞定
   ❌ 购物车、认证、支付混在一起

2. 第一轮就把上下文给足
   ✅ "React + TS 电商项目，Zustand 状态管理，现在需要..."
   ❌ "帮我写个组件"

3. 善用 @ 引用代替复制粘贴
   ✅ "@src/components/Cart.tsx 性能有问题"
   ❌ 把整个文件粘贴到对话框

4. 对 AI 输出及时反馈
   ✅ "方向对了，但 handleSubmit 不需要 try-catch，上层有统一处理"
   ❌ 默默接受，后面手动改

什么时候新建对话？如果你想说”忘掉之前的内容”，那就该新建了。历史对话可以右键重命名，方便后续查找。

小结

Chat 负责聊，Inline Edit 负责改。@ 引用给 AI 精准上下文，diff 审查让你对每处修改有掌控感，代码补全是无感的效率提升。

下一篇聊 Builder Mode——Trae 真正和其他 AI IDE 拉开差距的地方。

好的工具不会替代你思考，但会让你把更多时间花在值得思考的事情上。Chat 和 Inline Edit 处理重复和琐碎，你专注创造和决策。

加载中...