第四部分：AI 编辑器（Cursor/Trae）交互进阶

AI 编辑器如 Cursor 和 Trae 为开发者提供了强大的辅助功能，掌握它们的交互技巧可以显著提高开发效率。以下是一些进阶交互技巧：

1. 核心逻辑：@ 符号的索引机制

基本原理

@ 符号是 AI 编辑器中的核心索引机制，用于引用代码库、文件和文档，让 AI 能够理解和利用项目的上下文信息。

主要用法

@Codebase

• 功能：索引整个代码库，让 AI 了解项目的整体结构和代码风格
• 使用场景：当需要生成与整个项目风格一致的代码时
• 示例：@Codebase 生成一个与项目风格一致的登录组件

@Files

• 功能：索引指定的文件，让 AI 了解特定文件的内容和结构
• 使用场景：当需要基于特定文件的内容生成相关代码时
• 示例：@Files src/components/Button.tsx 基于此文件生成一个相似的 Input 组件

@Docs

• 功能：索引文档文件，让 AI 参考项目的文档说明
• 使用场景：当需要根据文档要求生成代码时
• 示例：@Docs README.md 基于文档要求生成项目初始化脚本

高级技巧

• 组合使用：可以同时使用多个 @ 符号来提供更丰富的上下文
• 路径指定：可以使用相对路径或绝对路径指定文件
• 通配符：可以使用通配符匹配多个文件，如 @Files src/components/*.tsx

实战示例

@Files src/components/Button.tsx src/components/Input.tsx
基于这两个组件的风格，生成一个新的 Select 组件，要求：
1. 支持下拉选项
2. 支持多选
3. 与现有组件风格一致

2. Composer / Chat 模式的区别

Composer 模式

• 功能：全量生成模式，适合一次性生成完整的代码块
• 使用场景：
  • 生成新文件或新功能
  • 重构现有代码
  • 生成完整的函数或类
• 优点：
  • 生成内容完整
  • 上下文理解更全面
  • 适合复杂任务
• 缺点：
  • 生成速度相对较慢
  • 占用更多资源

Chat 模式

• 功能：对话模式，适合交互式地解决问题
• 使用场景：
  • 代码调试和问题排查
  • 概念解释和学习
  • 小范围的代码修改
• 优点：
  • 响应速度快
  • 支持多轮对话
  • 适合解决具体问题
• 缺点：
  • 生成内容可能不够完整
  • 上下文理解可能有限

模式选择指南

任务类型	推荐模式	原因
生成新组件	Composer	需要完整的上下文和代码结构
调试 Bug	Chat	可以交互式地分析和解决问题
代码重构	Composer	需要理解整个代码结构
概念解释	Chat	可以通过对话深入理解
生成脚本	Composer	需要完整的脚本结构
代码审查	Chat	可以逐点讨论代码问题

3. 规则文件（.cursorrules / .traerules）

基本原理

规则文件是 AI 编辑器的配置文件，用于定义全局规则来约束 AI 的编码风格和行为。

文件位置

• Cursor：项目根目录下的 .cursorrules 文件
• Trae：项目根目录下的 .traerules 文件

规则文件结构

规则文件通常使用 YAML 或 JSON 格式，包含以下主要部分：

编码风格规则

• 缩进：指定缩进方式（空格或制表符）和缩进大小
• 命名规范：指定变量、函数、类的命名规范
• 代码格式：指定代码的格式化规则

技术栈规则

• 框架偏好：指定优先使用的框架和库
• 语言版本：指定使用的语言版本
• 依赖管理：指定依赖管理的方式

行为规则

• 输出格式：指定默认的输出格式
• 思考过程：指定是否显示 AI 的思考过程
• 代码注释：指定代码注释的风格和要求

实战示例

.traerules 示例

# 编码风格
codeStyle:
  indentation: 2 spaces
  naming:
    variables: camelCase
    functions: camelCase
    classes: PascalCase
  formatting:
    semicolons: true
    singleQuotes: true

# 技术栈
techStack:
  framework: React
  language: TypeScript
  preferredLibraries:
    - lodash
    - axios

# 行为规则
behavior:
  outputFormat: code with comments
  showReasoning: false
  requireTests: true

# 禁止使用
ban:
  libraries:
    - jQuery
  patterns:
    - eval
    - var

规则文件的作用

• 一致性：确保生成的代码与项目风格一致
• 规范性：强制执行编码规范
• 效率：减少后续的代码格式化和修改工作
• 质量：提高生成代码的质量和可维护性

4. 多轮迭代技巧：追加上下文

基本原理

当 AI 生成的代码不符合预期时，不是重复指令，而是通过追加上下文来引导 AI 修正错误。

常见错误场景

• 逻辑错误：生成的代码逻辑不正确
• 风格不符：代码风格与项目不一致
• 功能缺失：缺少某些功能或边界情况处理
• 性能问题：生成的代码存在性能问题

多轮迭代策略

1. 具体指出问题

• 错误："代码不对，重新生成"
• 正确："生成的代码中，第 15 行的条件判断逻辑有误，应该检查 user 是否为 null 而不是 undefined"

2. 提供参考示例

• 错误："生成一个更好的版本"
• 正确："参考以下代码风格，重新生成：

  function handleUser(user: User | null) {
    if (!user) {
      return { error: 'User not found' };
    }
    // 其他逻辑
  }
  ```"

3. 逐步引导修正

• 首先指出主要问题
• 然后提供具体的修正建议
• 最后要求 AI 重新生成

实战示例

初始提示

@Files src/components/Button.tsx
生成一个新的 Button 组件，支持 loading 状态

生成结果（存在问题）

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  loading: boolean;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick, loading }) => {
  return (
    <button onClick={onClick} disabled={loading}>
      {loading ? 'Loading...' : label}
    </button>
  );
};

问题分析

• 缺少加载动画
• 没有处理 loading 状态的样式
• 没有类型定义文件

追加提示

生成的代码缺少以下内容：
1. 加载动画效果（使用 CSS 动画）
2. loading 状态的样式（灰色背景、光标变化）
3. 完整的 TypeScript 类型定义

请参考以下样式风格：
```css
.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

请重新生成完整的组件代码。

#### 修正后的结果
```tsx
import React from 'react';
import './Button.css';

interface ButtonProps {
  label: string;
  onClick: () => void;
  loading: boolean;
  variant?: 'primary' | 'secondary';
}

export const Button: React.FC<ButtonProps> = ({ 
  label, 
  onClick, 
  loading, 
  variant = 'primary' 
}) => {
  return (
    <button 
      className={`button button-${variant} ${loading ? 'button-loading' : ''}`}
      onClick={onClick} 
      disabled={loading}
    >
      {loading ? (
        <>
          <span className="loading"></span>
          <span>Loading...</span>
        </>
      ) : (
        label
      )}
    </button>
  );
};

/* Button.css */
.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.button-primary {
  background-color: #3498db;
  color: white;
}

.button-secondary {
  background-color: #95a5a6;
  color: white;
}

.button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.button-loading {
  background-color: #ccc;
}

.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

多轮迭代的关键

• 具体性：具体指出问题所在
• 参考性：提供参考示例或风格指南
• 渐进性：逐步引导 AI 修正问题
• 一致性：保持上下文的一致性

通过掌握这些 AI 编辑器的交互技巧，开发者可以更有效地利用 AI 辅助开发，提高编码效率和代码质量。