第二部分：交互艺术——如何给 Trae 下达“高质量指令”

Builder 模式 vs. Chat 模式

模式对比

特性	Builder 模式（底部全量构建）	Chat 模式（左侧聊天窗口）
适用场景	生成完整代码、重构、大型修改	咨询问题、调试、小范围修改
上下文范围	更大，可包含整个文件或项目	相对较小，适合特定问题
交互方式	一次性输入，全量生成	多轮对话，逐步深入
生成速度	相对较慢，质量更高	相对较快，响应及时
适用任务	复杂任务，需要深度思考	简单任务，需要快速反馈

Builder 模式使用指南

最佳使用场景

生成新文件：从头开始创建一个新文件
大规模重构：修改整个文件或模块的结构
复杂功能实现：实现需要多步思考的复杂功能
代码风格统一：统一整个项目的代码风格

使用技巧

提供完整上下文：在 Builder 模式中，提供尽可能完整的上下文信息
明确输出格式：清晰指定需要的输出格式和结构
使用 @ 符号引用：利用 @Files、@Codebase 等引用相关代码
设置约束条件：明确代码风格、性能要求等约束条件

示例

@Files src/components/Button.tsx

请根据现有 Button 组件的风格，创建一个新的 Input 组件，要求：
1. 支持 placeholder 属性
2. 支持 disabled 状态
3. 支持 error 状态
4. 与 Button 组件风格一致
5. 提供完整的 TypeScript 类型定义

输出格式：完整的 React 组件代码，包含必要的注释

Chat 模式使用指南

最佳使用场景

代码调试：分析和解决代码中的错误
概念解释：询问代码的工作原理或最佳实践
小范围修改：对现有代码进行小幅修改
快速咨询：快速获取关于特定问题的建议

使用技巧

问题具体化：将问题描述得具体而清晰
提供相关代码：只提供与问题相关的代码片段
逐步深入：通过多轮对话逐步解决复杂问题
使用追问技巧：当回答不完整时，使用追问获取更多信息

示例

我在使用 React 时遇到了一个问题，以下是相关代码：

```tsx
function useCounter() {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count + 1);
  };
  
  return { count, increment };
}

当我多次快速点击按钮时，计数没有正确增加，这是为什么？


## 精准引用（The Power of @）

### @Files：快速定位相关逻辑

#### 功能介绍
@Files 指令允许你快速引用特定文件，让 Trae 理解该文件的内容和上下文。

#### 使用方法

@Files path/to/file.js

[任务描述]


#### 高级用法
- **引用多个文件**：`@Files file1.js file2.js file3.js`
- **使用通配符**：`@Files src/components/*.tsx`
- **引用目录**：`@Files src/utils/`

#### 示例

@Files src/utils/date.js src/utils/format.js

请基于这两个文件中的工具函数，创建一个新的时间格式化工具，支持多种日期格式。


### @Codebase：处理跨模块引用

#### 功能介绍
@Codebase 指令让 Trae 理解整个代码库的结构和依赖关系，适用于跨模块的任务。

#### 使用方法

@Codebase

[任务描述]


#### 最佳实践
- **大型项目**：结合 @Files 使用，先引用核心文件，再使用 @Codebase
- **跨模块任务**：使用 @Codebase 确保 Trae 理解模块间的依赖关系
- **代码风格统一**：使用 @Codebase 让 Trae 学习项目的整体代码风格

#### 示例

@Codebase

请分析整个代码库，找出所有使用 deprecated 方法的地方，并提供替代方案。


### @Docs：喂入第三方库文档

#### 功能介绍
@Docs 指令允许你将第三方库的文档链接喂给 Trae，让它学习最新的 API 和使用方法。

#### 使用方法

@Docs https://example.com/api-docs

[任务描述]


#### 支持的文档类型
- **官方 API 文档**：库的官方 API 文档
- **GitHub README**：项目的 GitHub README 文件
- **技术博客**：相关的技术博客文章
- **本地文档**：项目中的本地文档文件

#### 示例

@Docs https://react.dev/reference/react

请基于最新的 React 文档，实现一个使用 React 18 新特性的组件。


## 多轮对话的“纠偏”技巧

### 常见问题
- **理解偏差**：Trae 对任务的理解与预期不符
- **输出质量**：生成的代码质量不高或不符合要求
- **偏离主题**：对话逐渐偏离原始任务

### 纠偏策略

#### 1. 明确指出问题
- **错误示例**："不对，重新生成"
- **正确示例**："生成的代码中缺少错误处理逻辑，请添加 try-catch 块"

#### 2. 提供参考示例
- **错误示例**："生成一个更好的版本"
- **正确示例**："请参考以下代码风格，重新生成：
  ```tsx
  function handleError(error) {
    console.error('An error occurred:', error);
    return { success: false, error: error.message };
  }
  ```"

#### 3. 重新定义任务
- **错误示例**："我需要一个函数"
- **正确示例**："请重新实现一个函数，要求：
  1. 接收两个数字参数
  2. 返回它们的和
  3. 包含参数类型检查
  4. 使用 TypeScript 编写"

#### 4. 逐步引导
- 首先指出主要问题
- 然后提供具体的修正建议
- 最后要求重新生成

### 实战示例

#### 初始对话

**Q:** 请生成一个 React 组件，显示用户列表

**A:**

```tsx
import React from 'react';

interface User {
  id: number;
  name: string;
}

interface UserListProps {
  users: User[];
}

const UserList: React.FC<UserListProps> = ({ users }) => {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export default UserList;

纠偏对话

Q: 生成的组件缺少加载状态和错误处理，请添加：

当 users 为 null 或 undefined 时显示加载状态
当 users 为空数组时显示 "No users found" 消息
添加适当的 CSS 样式

tsx

import React from 'react';
import './UserList.css';

interface User {
  id: number;
  name: string;
}

interface UserListProps {
  users: User[] | null | undefined;
  isLoading?: boolean;
  error?: string;
}

const UserList: React.FC<UserListProps> = ({ 
  users, 
  isLoading = false, 
  error 
}) => {
  if (isLoading) {
    return <div className="user-list-loading">Loading users...</div>;
  }
  
  if (error) {
    return <div className="user-list-error">Error: {error}</div>;
  }
  
  if (!users || users.length === 0) {
    return <div className="user-list-empty">No users found</div>;
  }
  
  return (
    <div className="user-list">
      {users.map(user => (
        <div key={user.id} className="user-item">
          {user.name}
        </div>
      ))}
    </div>
  );
};

export default UserList;

css

/* UserList.css */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.user-item {
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.user-list-loading {
  padding: 16px;
  text-align: center;
  color: #666;
}

.user-list-error {
  padding: 16px;
  text-align: center;
  color: #e74c3c;
  background-color: #fadbd8;
  border-radius: 4px;
}

.user-list-empty {
  padding: 16px;
  text-align: center;
  color: #666;
  font-style: italic;
}

通过掌握这些交互技巧，你可以更有效地与 Trae 进行沟通，获得更高质量的代码和建议。

第二部分：交互艺术——如何给 Trae 下达“高质量指令” ​

Builder 模式 vs. Chat 模式 ​

模式对比 ​

Builder 模式使用指南 ​

最佳使用场景 ​

使用技巧 ​

示例 ​

Chat 模式使用指南 ​

最佳使用场景 ​

使用技巧 ​

示例 ​

纠偏对话 ​

第二部分：交互艺术——如何给 Trae 下达“高质量指令”

Builder 模式 vs. Chat 模式

模式对比

Builder 模式使用指南

最佳使用场景

使用技巧

示例

Chat 模式使用指南

最佳使用场景

使用技巧

示例

纠偏对话