智能提示 (Cue)

Trae 插件的智能提示功能（Cue）是一个强大的 AI 驱动的编程助手，能够在您编写代码时提供实时的智能建议、代码补全和上下文感知的提示。本指南将详细介绍如何使用和配置智能提示功能。

什么是智能提示

智能提示（Cue）是 Trae 插件的核心功能之一，它利用先进的 AI 技术为开发者提供：

🧠 智能代码补全：基于上下文的精准代码建议
💡 实时编程提示：在编写代码时获得即时帮助
🔍 错误检测和修复：自动识别并建议修复代码问题
📚 API 文档集成：内联显示函数和方法的文档
🎯 最佳实践建议：推荐符合行业标准的编码方式
🔄 重构建议：提供代码优化和重构的智能建议

启用智能提示

自动启用

智能提示功能默认在安装 Trae 插件后自动启用，无需额外配置。

手动控制

您可以通过以下方式控制智能提示：

快捷键

启用/禁用提示：Ctrl+Alt+C（Windows/Linux）或 Cmd+Option+C（macOS）
手动触发提示：Ctrl+Space（所有平台）
接受建议：Tab 或 Enter
拒绝建议：Esc

命令面板

打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）
输入 "Trae: Toggle Cue"
选择相应的选项

智能提示界面

1. 内联建议

javascript

function calculateTotal(items) {
  // 当您开始输入时，智能提示会出现
  return items.reduce((sum, item) => {
    return sum + item.price * item.quantity; // ← AI 建议的代码
  }, 0);
}

┌─────────────────────────────────────────────────────┐
│ 💡 Trae Cue 建议                                    │
├─────────────────────────────────────────────────────┤
│ return sum + item.price * item.quantity;           │
│                                                     │
│ 💬 计算商品总价，考虑数量和单价                      │
│ 🔧 建议：添加输入验证                               │
│ 📖 相关：Array.reduce() 文档                        │
│                                                     │
│ [Tab] 接受  [Esc] 拒绝  [→] 查看更多                │
└─────────────────────────────────────────────────────┘

2. 悬浮提示

typescript

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

// 当鼠标悬停在 User 上时
const user: User = { // ← 显示 User 接口的详细信息
  id: "123",
  name: "张三",
  email: "zhangsan@example.com"
};

3. 错误检测

javascript

function divide(a, b) {
  return a / b; // ⚠️ 智能提示：可能的除零错误
}

// 建议的修复
function divide(a, b) {
  if (b === 0) {
    throw new Error('Division by zero is not allowed');
  }
  return a / b;
}

智能提示类型

1. 代码补全

变量和函数名补全

javascript

const userName = "Alice";
const userAge = 25;

// 输入 "user" 时的建议
console.log(user|); // userName, userAge

方法链补全

javascript

const numbers = [1, 2, 3, 4, 5];

numbers
  .filter(n => n > 2)  // ← AI 建议
  .map(n => n * 2)     // ← AI 建议
  .reduce((a, b) => a + b, 0); // ← AI 建议

对象属性补全

javascript

const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

// 输入 "config." 时的建议
fetch(config.apiUrl, { // ← apiUrl, timeout, retries
  timeout: config.timeout
});

2. 模板和代码片段

React 组件模板

jsx

// 输入 "rfc" 触发 React Function Component 模板
import React from 'react';

const ComponentName = ({ prop1, prop2 }) => {
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

export default ComponentName;

异步函数模板

javascript

// 输入 "async" 触发异步函数模板
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
}

错误处理模板

javascript

// 输入 "try" 触发错误处理模板
try {
  // 可能出错的代码
} catch (error) {
  console.error('Error occurred:', error);
  // 错误处理逻辑
} finally {
  // 清理代码
}

3. API 文档集成

javascript

// 当您使用 Array.map 时，显示内联文档
const doubled = numbers.map(num => num * 2);
/*
📖 Array.prototype.map()
创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。

参数：
- callback: 生成新数组元素的函数
- thisArg: 执行 callback 函数时值被用作 this

返回值：一个由原数组每个元素执行回调函数的结果组成的新数组
*/

4. 最佳实践建议

性能优化建议

javascript

// 原始代码
function expensiveOperation(data) {
  return data.map(item => {
    return processItem(item); // 💡 建议：考虑使用 useMemo 缓存结果
  });
}

// AI 建议的优化
import { useMemo } from 'react';

function OptimizedComponent({ data }) {
  const processedData = useMemo(() => {
    return data.map(item => processItem(item));
  }, [data]);
  
  return <div>{/* 使用 processedData */}</div>;
}

安全性建议

javascript

// 原始代码
const userInput = req.body.input;
const query = `SELECT * FROM users WHERE name = '${userInput}'`; // ⚠️ SQL 注入风险

// AI 建议的安全版本
const userInput = req.body.input;
const query = 'SELECT * FROM users WHERE name = ?';
const result = await db.query(query, [userInput]); // ✅ 使用参数化查询

5. 重构建议

函数提取建议

javascript

// 原始代码
function processOrder(order) {
  // 验证订单
  if (!order.id || !order.items || order.items.length === 0) {
    throw new Error('Invalid order');
  }
  
  // 计算总价
  let total = 0;
  for (const item of order.items) {
    total += item.price * item.quantity;
  }
  
  // 应用折扣
  if (order.discountCode) {
    total *= 0.9;
  }
  
  return { ...order, total };
}

// AI 建议的重构版本
function processOrder(order) {
  validateOrder(order);
  const total = calculateTotal(order.items, order.discountCode);
  return { ...order, total };
}

function validateOrder(order) {
  if (!order.id || !order.items || order.items.length === 0) {
    throw new Error('Invalid order');
  }
}

function calculateTotal(items, discountCode) {
  let total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  if (discountCode) {
    total *= 0.9;
  }
  return total;
}

语言特定功能

JavaScript/TypeScript

类型推断

typescript

// AI 自动推断类型
const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 }
]; // 推断为 Array<{id: number, name: string, age: number}>

// 智能类型建议
function processUser(user: typeof users[0]) { // ← AI 建议的类型
  return user.name.toUpperCase();
}

导入建议

javascript

// 当您使用未导入的函数时
const result = lodash.debounce(callback, 300); // ⚠️ lodash 未导入

// AI 建议添加导入
import { debounce } from 'lodash'; // ← 自动建议的导入
const result = debounce(callback, 300);

Python

类型注解建议

python

# 原始代码
def calculate_average(numbers):
    return sum(numbers) / len(numbers)

# AI 建议的类型注解版本
from typing import List

def calculate_average(numbers: List[float]) -> float:
    """计算数字列表的平均值"""
    if not numbers:
        raise ValueError("Cannot calculate average of empty list")
    return sum(numbers) / len(numbers)

异常处理建议

python

# 原始代码
def read_file(filename):
    with open(filename, 'r') as f:
        return f.read()

# AI 建议的改进版本
def read_file(filename: str) -> str:
    """安全地读取文件内容"""
    try:
        with open(filename, 'r', encoding='utf-8') as f:
            return f.read()
    except FileNotFoundError:
        raise FileNotFoundError(f"File '{filename}' not found")
    except IOError as e:
        raise IOError(f"Error reading file '{filename}': {e}")

Java

设计模式建议

java

// 原始代码
public class DatabaseConnection {
    private static DatabaseConnection instance;
    
    public static DatabaseConnection getInstance() {
        if (instance == null) {
            instance = new DatabaseConnection();
        }
        return instance;
    }
}

// AI 建议的线程安全版本
public class DatabaseConnection {
    private static volatile DatabaseConnection instance;
    
    public static DatabaseConnection getInstance() {
        if (instance == null) {
            synchronized (DatabaseConnection.class) {
                if (instance == null) {
                    instance = new DatabaseConnection();
                }
            }
        }
        return instance;
    }
}

配置和自定义

1. 基本配置

json

{
  "trae.cue.enabled": true,
  "trae.cue.autoTrigger": true,
  "trae.cue.delay": 300,
  "trae.cue.maxSuggestions": 5,
  "trae.cue.showDocumentation": true,
  "trae.cue.showBestPractices": true,
  "trae.cue.enableErrorDetection": true
}

2. 高级配置

json

{
  "trae.cue.languages": {
    "javascript": {
      "enabled": true,
      "priority": "high",
      "features": ["completion", "documentation", "refactoring"]
    },
    "python": {
      "enabled": true,
      "priority": "high",
      "features": ["completion", "type-hints", "error-detection"]
    },
    "java": {
      "enabled": true,
      "priority": "medium",
      "features": ["completion", "patterns", "documentation"]
    }
  },
  "trae.cue.contextWindow": 1000,
  "trae.cue.cacheSize": 100,
  "trae.cue.confidenceThreshold": 0.7
}

3. 自定义提示规则

json

{
  "trae.cue.customRules": [
    {
      "name": "console-log-warning",
      "pattern": "console\\.log\\(",
      "message": "考虑使用日志库而不是 console.log",
      "severity": "warning",
      "suggestion": "使用 logger.info() 或 logger.debug()"
    },
    {
      "name": "async-without-await",
      "pattern": "async function.*{[^}]*}",
      "condition": "!contains('await')",
      "message": "异步函数中没有使用 await",
      "severity": "info"
    }
  ]
}

性能优化

1. 缓存策略

javascript

// 智能提示会缓存常用的建议
const cache = {
  'react-component': {
    template: 'function Component() { return <div></div>; }',
    lastUsed: Date.now(),
    frequency: 15
  },
  'async-function': {
    template: 'async function name() { try { } catch (error) { } }',
    lastUsed: Date.now(),
    frequency: 8
  }
};

2. 上下文感知

javascript

// 基于文件类型和项目结构的智能建议
const context = {
  fileType: 'react-component',
  projectFramework: 'react',
  dependencies: ['react', 'react-dom', 'typescript'],
  recentImports: ['useState', 'useEffect', 'useCallback'],
  codeStyle: 'functional-components'
};

故障排除

常见问题

智能提示不显示

检查插件是否已启用
验证语言支持
检查网络连接
重启 IDE

建议不准确

提供更多上下文
检查代码语法
更新插件版本
调整配置参数

性能问题

减少上下文窗口大小
降低建议频率
清理缓存
关闭不需要的功能

调试模式

json

{
  "trae.cue.debug": true,
  "trae.cue.logLevel": "verbose",
  "trae.cue.showTimings": true,
  "trae.cue.trackUsage": true
}

快捷键参考

功能	Windows/Linux	macOS
手动触发提示	`Ctrl+Space`	`Ctrl+Space`
接受建议	`Tab`	`Tab`
拒绝建议	`Esc`	`Esc`
下一个建议	`Alt+]`	`Option+]`
上一个建议	`Alt+[`	`Option+[`
显示文档	`Ctrl+K Ctrl+I`	`Cmd+K Cmd+I`
启用/禁用	`Ctrl+Alt+C`	`Cmd+Option+C`

最佳实践

1. 有效使用智能提示

提供清晰的上下文：编写有意义的变量名和函数名
保持代码整洁：良好的代码结构有助于更准确的建议
及时接受建议：不要让建议窗口长时间停留
学习建议模式：观察和学习 AI 的建议模式

2. 配置优化

根据项目调整：为不同项目配置不同的提示规则
平衡性能和功能：在功能丰富性和性能之间找到平衡
定期更新：保持插件和配置的最新状态

3. 团队协作

共享配置：在团队中共享智能提示配置
统一标准：建立团队的代码风格和最佳实践
培训团队：确保团队成员了解如何有效使用智能提示

下一步

掌握智能提示功能后，您可以继续学习：

快速应用功能 - 高效应用代码更改
构建器模式 - 快速生成项目结构
快捷键大全 - 提高操作效率

让智能提示成为您编程路上的得力助手，提升编码效率和代码质量！

智能提示 (Cue) ​

什么是智能提示 ​

启用智能提示 ​

自动启用 ​

手动控制 ​

快捷键 ​

命令面板 ​

智能提示界面 ​

1. 内联建议 ​

2. 悬浮提示 ​

3. 错误检测 ​

智能提示类型 ​

1. 代码补全 ​

变量和函数名补全 ​

方法链补全 ​

对象属性补全 ​

2. 模板和代码片段 ​

React 组件模板 ​

异步函数模板 ​

错误处理模板 ​

3. API 文档集成 ​

4. 最佳实践建议 ​

性能优化建议 ​

安全性建议 ​

5. 重构建议 ​

函数提取建议 ​

语言特定功能 ​

JavaScript/TypeScript ​

类型推断 ​

导入建议 ​

Python ​

类型注解建议 ​

异常处理建议 ​

Java ​

设计模式建议 ​

配置和自定义 ​

1. 基本配置 ​

2. 高级配置 ​

3. 自定义提示规则 ​

性能优化 ​

1. 缓存策略 ​

2. 上下文感知 ​

故障排除 ​

常见问题 ​

智能提示不显示 ​

建议不准确 ​

性能问题 ​

调试模式 ​

快捷键参考 ​

最佳实践 ​

1. 有效使用智能提示 ​

2. 配置优化 ​

3. 团队协作 ​

下一步 ​

智能提示 (Cue)

什么是智能提示

启用智能提示

自动启用

手动控制

快捷键

命令面板

智能提示界面

1. 内联建议

2. 悬浮提示

3. 错误检测

智能提示类型

1. 代码补全

变量和函数名补全

方法链补全

对象属性补全

2. 模板和代码片段

React 组件模板

异步函数模板

错误处理模板

3. API 文档集成

4. 最佳实践建议

性能优化建议

安全性建议

5. 重构建议

函数提取建议

语言特定功能

JavaScript/TypeScript

类型推断

导入建议

Python

类型注解建议

异常处理建议

Java

设计模式建议

配置和自定义

1. 基本配置

2. 高级配置

3. 自定义提示规则

性能优化

1. 缓存策略

2. 上下文感知

故障排除

常见问题

智能提示不显示

建议不准确

性能问题

调试模式

快捷键参考

最佳实践

1. 有效使用智能提示

2. 配置优化

3. 团队协作

下一步