Trae IDE：AI深度集成的智能开发环境

发布于：2025-05-14 ⋅ 阅读:(10) ⋅ 点赞:(0)

（以高效人机协作重塑编程体验）

概述

Trae IDE（发音 /treɪ/）是一款深度集成AI能力的现代化开发工具，结合传统IDE的完备功能与前沿AI技术，提供智能问答、代码自动补全、跨文件编程及AI Agent驱动的自动化开发能力。通过灵活的人机协作模式，帮助开发者显著提升效率，降低编码复杂度，实现从零到一的快速项目构建。

核心优势

  • AI Native设计：AI能力无缝嵌入开发全流程，而非简单插件。

  • 效率跃升：减少重复编码，聚焦核心逻辑与创新。

  • 多场景覆盖：从代码片段到完整项目，AI助手全程支持。

主要功能

1. 完备的传统IDE能力

  • 代码编写：支持多语言语法高亮、调试及版本管理。

  • 项目管理：可视化文件结构、依赖管理及构建工具集成。

  • 扩展性：开放式插件生态，按需定制开发环境。

2. 智能AI助手

  • 📝 代码实时增强

    • 智能补全：基于上下文预测代码，提供精准建议。

    • 错误修复：即时诊断问题，推荐修复方案并解释原因。

    • 代码优化：重构建议、性能提示及注释自动生成。

  • 💬 交互式开发支持

    • 侧边对话：随时提问技术问题，获取解释或示例代码。

    • 内嵌对话：在代码编辑区直接与AI交互，快速解决局部问题。

  • 🚀 自动化项目构建（Builder模式）

    • 需求转代码：通过自然语言描述功能，AI生成可运行代码片段。

    • 跨文件协作：自动创建关联文件（如API接口+前端组件+数据库模型）。

    • 项目脚手架：输入目标描述，AI生成技术选型建议与基础工程结构。

3. 跨平台支持

  • macOS：10.15及以上版本

  • Windows：10、11（64位）

安装以及环境搭建

Trae安装
  1. 前往官网，根据本地计算机系统下载安装包即可 Trae 官网https://www.trae.com.cn
  2. 将 Trae 安装至电脑。（傻瓜式安装即可）
  3. 启动 Trae。

Trae 初始配置

1.点击 开始 按钮

2.配置专题颜色（一般都是默认黑色）

3.从vscode导入配置（插件、IDE 设置、快捷键设置等信息）

4.使用稀土掘金的账号登录（也可以用手机号注册）

5.配置一下AI侧边栏的设置，以及模型

6.在本地新建一个项目，就可以开始使用了

Trae使用（附带小案例）

1.打开终端以及AI侧边栏，画面就像下边那样就可以了

python小案例（自动化办公 - 批量重命名文件）

功能：自动将文件夹内所有图片按日期重命名

如上图将需求甩给AI侧边栏，点击发送按钮

2. 生成的过程中，有视觉log的那种感觉

代码已经生成完毕，询问你是否接受AI的操作，点击接受就行

import os
import time
from datetime import datetime

def rename_images_by_date(folder_path):
    """
    按创建日期重命名文件夹中的所有图片文件
    
    参数:
        folder_path (str): 包含图片文件的文件夹路径
    """
    # 支持的图片文件扩展名
    image_extensions = ('.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff')
    
    # 获取文件夹中的所有文件
    try:
        files = os.listdir(folder_path)
    except FileNotFoundError:
        print(f"错误: 文件夹 {folder_path} 不存在")
        return
    
    # 过滤出图片文件
    image_files = [f for f in files if f.lower().endswith(image_extensions)]
    
    if not image_files:
        print("警告: 没有找到任何图片文件")
        return
    
    # 获取每个文件的创建时间并排序
    files_with_dates = []
    for filename in image_files:
        file_path = os.path.join(folder_path, filename)
        creation_time = os.path.getctime(file_path)
        files_with_dates.append((filename, creation_time))
    
    # 按创建时间排序
    files_with_dates.sort(key=lambda x: x[1])
    
    # 重命名文件
    for index, (filename, creation_time) in enumerate(files_with_dates, start=1):
        # 格式化日期
        date_str = datetime.fromtimestamp(creation_time).strftime('%Y%m%d')
        
        # 获取文件扩展名
        _, ext = os.path.splitext(filename)
        
        # 新文件名格式: 日期_序号.扩展名
        new_filename = f"{date_str}_{index}{ext}"
        new_path = os.path.join(folder_path, new_filename)
        
        # 重命名文件
        old_path = os.path.join(folder_path, filename)
        try:
            os.rename(old_path, new_path)
            print(f"重命名: {filename} -> {new_filename}")
        except Exception as e:
            print(f"重命名 {filename} 失败: {e}")

if __name__ == "__main__":
    # 使用示例
    folder_path = input("请输入包含图片的文件夹路径: ")
    rename_images_by_date(folder_path)

这是生成的代码，你可以在终端运行，也可以用文件的形式，在本地运行

我这是在终端运行的，你输入路径，代码就帮你批量处理了


python小案例（物联网应用 - 树莓派温度监控）

功能：读取传感器数据并记录到CSV

同样的步骤，把需求给AI，对了国内环境优先使用，ds-v3-0324那个模型

import os
import csv
import time
from datetime import datetime

def read_temperature():
    """
    模拟从DS18B20温度传感器读取数据
    返回: 温度值(浮点数)
    """
    # 这里使用随机数模拟传感器读数
    import random
    return round(random.uniform(20.0, 30.0), 2)

def log_temperature(csv_file):
    """
    记录温度数据到CSV文件
    
    参数:
        csv_file (str): CSV文件路径
    """
    # 获取当前时间和温度
    timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
    temperature = read_temperature()
    
    # 写入CSV文件
    file_exists = os.path.isfile(csv_file)
    
    with open(csv_file, 'a', newline='') as f:
        writer = csv.writer(f)
        if not file_exists:
            writer.writerow(['时间戳', '温度(°C)'])
        writer.writerow([timestamp, temperature])
    
    print(f"已记录: {timestamp} - {temperature}°C")

if __name__ == "__main__":
    # CSV文件路径
    csv_file = "temperature_log.csv"
    
    print("树莓派温度监控系统启动...")
    print("按Ctrl+C停止")
    
    try:
        while True:
            log_temperature(csv_file)
            time.sleep(5)  # 每5秒记录一次
    except KeyboardInterrupt:
        print("\n监控已停止")

同样的终端运行，就可以了

静态网站小案例

把需求给他

我将创建一个完整的企业官网案例，包含一个首页和三个子页面。首页将包含导航栏、轮播图、公司简介和页脚；子页面包括关于我们、产品服务和联系我们。建议创建以下文件：index.html(首页)、about.html(关于我们)、products.html(产品服务)、contact.html(联系我们)和配套的CSS/JS文件。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业官网</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="products.html">产品服务</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h1>欢迎来到我们的企业</h1>
            <p>专业的企业解决方案提供商</p>
        </section>
        <section class="about">
            <h2>公司简介</h2>
            <p>这里是公司简介内容...</p>
        </section>
    </main>
    <footer>
        <p>© 2023 企业名称. 保留所有权利.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>
/* 全局样式 */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

/* 导航栏样式 */
header {
    background-color: #2c3e50;
    
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #3498db;
}

/* 主要内容区样式 */
main {
    min-height: calc(100vh - 120px);
}

.hero {
    text-align: center;
    padding: 4rem 2rem;
    background-color: #3498db;
    color: white;
}

.about, .about-content, .products, .contact {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* 产品网格样式 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.product {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 联系表单样式 */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button[type="submit"] {
    padding: 0.75rem;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #2980b9;
}

.contact-info {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #2c3e50;
    color: white;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品服务 - 企业官网</title>
    <link rel="stylesheet" href="style.css">
</head>s
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="products.html">产品服务</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="products">
            <h1>我们的产品与服务</h1>
            <div class="product-grid">
                <article class="product">
                    <h2>产品1</h2>
                    <p>产品1的详细描述...</p>
                </article>
                <article class="product">
                    <h2>产品2</h2>
                    <p>产品2的详细描述...</p>
                </article>
                <article class="product">
                    <h2>服务1</h2>
                    <p>服务1的详细描述...</p>
                </article>
            </div>
        </section>
    </main>
    <footer>
        <p>© 2023 企业名称. 保留所有权利.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 企业官网</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="products.html">产品服务</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="contact">
            <h1>联系我们</h1>
            <div class="contact-container">
                <form class="contact-form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit">提交</button>
                </form>
                <div class="contact-info">
                    <h2>联系方式</h2>
                    <p>电话: 123-456-7890</p>
                    <p>邮箱: info@company.com</p>
                    <p>地址: 中国某省某市某区某街道123号</p>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <p>© 2023 企业名称. 保留所有权利.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 企业官网</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="products.html">产品服务</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="about-content">
            <h1>关于我们</h1>
            <article>
                <h2>公司历史</h2>
                <p>这里是公司发展历程介绍...</p>
            </article>
            <article>
                <h2>我们的团队</h2>
                <p>这里是团队成员介绍...</p>
            </article>
        </section>
    </main>
    <footer>
        <p>© 2023 企业名称. 保留所有权利.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

运行效果图如下：

为何选择Trae IDE？

  • 降低认知负荷：AI处理琐碎编码，开发者专注架构设计与业务逻辑。

  • 学习加速器：实时问答与代码解释，助新手快速掌握复杂技术栈。

  • 企业级工程化：AI生成的代码符合工程规范，支持团队协作与持续集成。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布