<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>开发 on 一只芝士鱼</title><link>https://carlchanie.me/tags/%E5%BC%80%E5%8F%91/</link><description>Recent content in 开发 on 一只芝士鱼</description><generator>Hugo -- gohugo.io</generator><language>zh-cn</language><copyright>一只芝士鱼</copyright><lastBuildDate>Sun, 08 Feb 2026 19:29:29 +0800</lastBuildDate><atom:link href="https://carlchanie.me/tags/%E5%BC%80%E5%8F%91/index.xml" rel="self" type="application/rss+xml"/><item><title>“智研达人”系列分享活动：AI 编程工具 Trae 入门教程</title><link>https://carlchanie.me/2026/02/08/ai-coding-TRAE/</link><pubDate>Sun, 08 Feb 2026 19:29:29 +0800</pubDate><guid>https://carlchanie.me/2026/02/08/ai-coding-TRAE/</guid><description>&lt;img src="https://carlchanie.me/img/covers/ai-coding-TRAE.webp" alt="Featured image of post “智研达人”系列分享活动：AI 编程工具 Trae 入门教程" />&lt;aside>
这是由中科大图书馆主办的“智研达人” AI 工具分享活动，我分享的主题是 AI 编程工具 Trae 入门教程，这个博客是我分享内容的详细大纲与讲义。Trae 是由字节跳动团队研发的一款类似于 VSCode 的编译器，覆盖从编码、调试到测试、重构、部署等多类开发任务，其深度融合 AI 能力，是一名个能够理解需求、调用工具并独立完成各类开发任务的AI开发工具。
&lt;/aside>
&lt;h2 id="1-引言">1 引言
&lt;/h2>&lt;h3 id="11-我的科研工作流">1.1 我的科研工作流
&lt;/h3>&lt;p>大语言模型已经成为了科研工作中不可或缺的工具，它可以帮助我们快速完成各种任务，如阅读文献、代码编写、论文润色等。通过大语言模型，我们可以更高效地完成科研工作，显著提高工作效率。&lt;/p>
&lt;h3 id="12-当前ai辅助科研的痛点">1.2 当前AI辅助科研的痛点
&lt;/h3>&lt;ul>
&lt;li>大语言模型与科研工具彼此独立。&lt;/li>
&lt;li>大语言模型难以共享科研知识库。&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image.png"
loading="lazy"
alt="简约性准则"
>&lt;/p>
&lt;h3 id="13-ai编程工具trae">1.3 AI编程工具Trae
&lt;/h3>&lt;p>三大核心功能：&lt;/p>
&lt;ul>
&lt;li>Tab-Cue&lt;/li>
&lt;li>智能体聊天模式&lt;/li>
&lt;li>Editor 内 AI 编码&lt;/li>
&lt;/ul>
&lt;h2 id="2-tab-cue">2 Tab-Cue
&lt;/h2>&lt;p>说明：Tab-Cue 是其核心交互功能，通过AI驱动的智能补全和上下文感知能力显著提升编码效率。&lt;/p>
&lt;ul>
&lt;li>代码补全&lt;/li>
&lt;li>智能代码重写&lt;/li>
&lt;li>变量与字段联想&lt;/li>
&lt;li>光标位置预测&lt;/li>
&lt;li>接受、接受部分和拒绝&lt;/li>
&lt;li>配置&lt;/li>
&lt;/ul>
&lt;h3 id="21-代码补全与重写">2.1 代码补全与重写
&lt;/h3>&lt;div class="highlight">&lt;div class="chroma">
&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-java" data-lang="java">&lt;span class="line">&lt;span class="cl">&lt;span class="kd">public&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kd">class&lt;/span> &lt;span class="nc">Array&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="n">Sort&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c1">// 编写一个方法，可以接受数组，并排序，排序方法使用冒泡排序&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c1">// 智能代码重写 -&amp;gt; 从大到小排列&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c1">// 编写一个方法，可以接收数组，并打印数组&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c1">// 编写一个main方法，测试sort方法&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="p">}&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-1.png"
loading="lazy"
alt="代码补全"
>&lt;/p>
&lt;div style="display: flex; gap: 16px; align-items: flex-start;">
&lt;div style="flex: 0 0 50%; max-width: 50%;">
&lt;h3 style="margin-top: 0;">2.2 变量与字段联想&lt;/h3>
&lt;p>当编写成员变量（字段）时，会进行自动联想和补全&lt;/p>
&lt;p>另外，也支持多行批量修改&lt;/p>
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-2.png" alt="变量联想示例1" style="max-width: 100%;" />
&lt;br />&lt;br />
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-3.png" alt="变量联想示例2" style="max-width: 100%;" />
&lt;/div>
&lt;div style="flex: 0 0 50%; max-width: 50%;">
&lt;h3 style="margin-top: 0;">2.3 光标位置预测&lt;/h3>
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-28.png" alt="光标位置预测" style="max-width: 100%;" />
&lt;/div>
&lt;/div>
&lt;p>&lt;br />&lt;br />&lt;/p>
&lt;div style="display: flex; gap: 16px; align-items: flex-start;">
&lt;div style="flex: 0 0 50%; max-width: 50%;">
&lt;h3 style="margin-top: 0;">&lt;strong>2.4 接受，接受部分和拒绝&lt;/strong>&lt;/h3>
&lt;ul>
&lt;li>tab 接受补全&lt;/li>
&lt;li>Ctrl + ➡️ 接受部分补全（逐词接受）&lt;/li>
&lt;li>Esc / 继续输入 表示拒绝补全&lt;/li>
&lt;/ul>
&lt;pre style="font-size: 1rem; line-height: 1.6; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; margin: 0;">&lt;code class="language-java" style="font-size: inherit;">public class Calculator {
/*
* 这是一个加法方法，用于计算两个整数的和
*/
public int add(int a, int b) {
return a + b;
}
/*
* 这是一个减法方法
*/
public int subtract(int a, int b) {
return a - b;
}
}&lt;/code>&lt;/pre>
&lt;/div>
&lt;div style="flex: 0 0 50%; max-width: 50%;">
&lt;h3 style="margin-top: 0;">&lt;strong>2.5 配置&lt;/strong>&lt;/h3>
&lt;p>直接在代码中输入指令，无需切换到聊天窗口&lt;/p>
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-31.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;/div>
&lt;h2 id="3-智能体聊天模式">3 智能体聊天模式
&lt;/h2>&lt;h3 id="31-内置智能体">3.1 内置智能体
&lt;/h3>&lt;p>Trae 提供 IDE 模式和 SOLO 模式两种开发模式，分别侧重人机协作与AI自主开发，以下是核心区别：&lt;/p>
&lt;p>&lt;strong>IDE模式&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>特点：保留传统开发流程，支持智能问答、代码补全等辅助功能，用户对开发过程有更强的掌控感。&lt;/li>
&lt;li>适用场景：适合需要惊喜控制代码或逐步验证逻辑的开发者&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>SOLO模式&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>特点：AI 主导全流程（需求理解、编码、测试、部署），通过自然语言输入即可自主完成开发任务，自动化程度高。&lt;/li>
&lt;li>分类：
&lt;ul>
&lt;li>SOLO Builder：聚焦快速原型开发，通过自然语言描述快速生成完整Web应用（含前后端），适合从零到一的场景&lt;/li>
&lt;li>SOLO Coder：面向专业开发者，处理复杂项目迭代、代码重构、Bug 修复等工程化任务，支持多任务并行和智能体协同，提供 Plan 模式辅助开发规划&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-4.png"
loading="lazy"
alt="SOLO Building 与 SOLO Coder"
>&lt;/p>
&lt;p>&lt;strong>选择建议&lt;/strong>&lt;/p>
&lt;ol>
&lt;li>若需要保留开发自主性，选择 IDE 模式；&lt;/li>
&lt;li>若追求效率或处理标准化任务，SOLO 模式更高效。&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>应用案例1：大众点评&lt;/strong>&lt;/p>
&lt;p>通过 SOLO Builder 开发一个类似大众点评的网站应用。详细过程如下：&lt;/p>
&lt;ol>
&lt;li>创建一个文件夹，使用 SOLO Builder 智能体进行 AI 编程&lt;/li>
&lt;li>集成 Supabase 服务，用于用户认证和数据存储&lt;/li>
&lt;li>创建 Supabase 项目，并连接至当前 Trae 项目&lt;/li>
&lt;/ol>
&lt;blockquote>
&lt;p>提示词：&lt;/p>
&lt;p>我想开发一个简化版的大众点评网站的应用，需要首先以下核心功能模块：&lt;/p>
&lt;ol>
&lt;li>用户系统&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>用户注册/登陆功能（支持手机号+验证码或邮箱+密码方式）&lt;/li>
&lt;li>个人资料管理（头像、昵称、联系方式等基本信息）&lt;/li>
&lt;li>用户权限管理（普通用户/商家用户）&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>商家模块&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>商家信息展示（名称、地址、联系方式、营业时间）&lt;/li>
&lt;li>商家分类检索（餐饮、娱乐、购物等分类）&lt;/li>
&lt;li>地理位置展示（集成地图 API 显示商家位置）&lt;/li>
&lt;/ul>
&lt;ol start="3">
&lt;li>评价系统&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>用户评价功能（星级评分+文字评价）&lt;/li>
&lt;li>评价展示（按照时间排序，支持分页）&lt;/li>
&lt;li>商家回复功能&lt;/li>
&lt;/ul>
&lt;ol start="4">
&lt;li>基础搜索功能&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>按照商家名称/位置/地理位置搜索&lt;/li>
&lt;li>简单筛选功能（按评分、距离等）&lt;/li>
&lt;/ul>
&lt;ol start="5">
&lt;li>技术实现要求&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>可运行的完整系统模型&lt;/li>
&lt;li>基础功能测试报告&lt;/li>
&lt;li>简单的使用说明文档&lt;/li>
&lt;li>源代码和部署指南&lt;/li>
&lt;/ul>&lt;/blockquote>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-5.png"
loading="lazy"
alt="SOLO Builder生成产品需求文档和技术架构文档"
>&lt;/p>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-6.png"
loading="lazy"
alt="大众点评网页版应用"
>&lt;/p>
&lt;p>&lt;a class="link" href="https://codepen.io/Long-Chen-the-builder/pen/jErxoQd" target="_blank" rel="noopener"
>&lt;strong>应用案例2：网页游戏贪吃蛇&lt;/strong>&lt;/a>&lt;/p>
&lt;div style="display: flex; gap: 16px; align-items: flex-start;">
&lt;div style="flex: 1;">
&lt;p> &lt;strong>Plan 模式：&lt;/strong> 为完成任务制定详细的计划，先和用户沟通制定计划，确认后再执行 &lt;/p>
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-7.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;div style="flex: 1;">
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-8.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;/div>
&lt;blockquote>
&lt;p>提示词：&lt;/p>
&lt;p>你现在是一名资深的网页游戏开发工程师，请帮我使用原生 HTML + CSS + JavaScript 编写一个可以直接在浏览器中运行的网页版贪吃蛇游戏，要求如下&lt;/p>
&lt;ol>
&lt;li>功能要求&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>要求有积分统计&lt;/li>
&lt;li>页面要有多种背景可以切换&lt;/li>
&lt;li>代码添加中文注释&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>技术要求&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>不适用任何框架或库（如 React、Vue、jQuery 等）&lt;/li>
&lt;li>所有代码写在同一个 HTML 文件中&lt;/li>
&lt;li>有详细注释，逻辑清晰&lt;/li>
&lt;/ul>
&lt;ol start="3">
&lt;li>输出格式要求&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>一次性输出完整的 HTML 代码，并直接保存为 “snakeGame01.html” 文件到当前文件夹下&lt;/li>
&lt;li>代码可以直接运行，无需任何依赖&lt;/li>
&lt;li>包含 &amp;lt;\style&amp;gt; 和 &amp;lt;\script&amp;gt; 标签&lt;/li>
&lt;/ul>&lt;/blockquote>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-9.png"
loading="lazy"
alt="SOLO Coder所制定的详细规划"
>&lt;/p>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-10.png"
loading="lazy"
alt="网页版贪吃蛇游戏"
>&lt;/p>
&lt;h3 id="32-自定义智能体">3.2 自定义智能体
&lt;/h3>&lt;p>&lt;strong>创建说明：&lt;/strong> 我们在 Trae 中创建自定义智能体可以帮助我们高效处理各种任务。&lt;/p>
&lt;div style="display: flex; gap: 16px; align-items: flex-start;">
&lt;div style="flex: 1;">
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-11.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;div style="flex: 1;">
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-27.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;br />&lt;br />
&lt;/div>
&lt;blockquote>
&lt;p>创建提示词：&lt;/p>
&lt;ol>
&lt;li>信息速览专家：自动搜索、整理信息并生成总结文档和可视化网页，适合快速了解新概念或行业报告&lt;/li>
&lt;li>可视化讲师：将复杂概念转化为直观的可视化网页，通过图文并茂的方式帮你深入理解&lt;/li>
&lt;li>MCP 自动化助手：结合多种 MCP 工具，帮你完成文件操作、网页搜索、截图等重复性工作&lt;/li>
&lt;li>Java 技术专家：你是一名 Java 开发专家，非常擅长 Java 的各种框架，算法和性能优化&lt;/li>
&lt;li>前端架构师：前端开发高级工程师，非常牛的那种，级别可以达到阿里 P8&lt;/li>
&lt;/ol>&lt;/blockquote>
&lt;h4 id="应用案例1可视化算法">&lt;a class="link" href="https://inquisitive-licorice-943188.netlify.app/" target="_blank" rel="noopener"
>&lt;strong>应用案例1：可视化算法&lt;/strong>&lt;/a>
&lt;/h4>&lt;blockquote>
&lt;p>使用智能体：&lt;/p>
&lt;p>使用可视化讲师智能体：用网页动画的形式，讲解一下冒泡排序&lt;/p>&lt;/blockquote>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-12.png"
loading="lazy"
alt="网页动画讲解冒泡排序"
>&lt;/p>
&lt;h4 id="应用案例2数据收集">&lt;a class="link" href="https://trae45f0rwo8.vercel.app" target="_blank" rel="noopener"
>&lt;strong>应用案例2：数据收集&lt;/strong>&lt;/a>
&lt;/h4>&lt;blockquote>
&lt;p>使用智能体（润色前）：&lt;/p>
&lt;p>帮我收集美国主流大学的工业工程/运筹学PhD项目的申请信息并汇总到Excel表格中，列名包括学校、学院、申请链接、截止日期、材料要求等信息&lt;/p>&lt;/blockquote>
&lt;blockquote>
&lt;p>使用智能体（润色后）：&lt;/p>
&lt;p>开发一个完整的数据收集与管理系统，用于收集美国主流大学的工业工程/运筹学PhD项目申请信息。系统需要包含以下核心功能：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>数据收集模块：系统性地收集美国排名前 50 大学的工业工程 (Industrial Engineering) 和运筹学 (Operations Research) PhD 项目的详细信息，包括但不限于：学校名称、所属学院、项目官方申请链接、申请截止日期（区分春季和秋季入学）、所需申请材料清单（GRE 成绩、TOEFL/IELTS 要求、推荐信数量、个人陈述、简历等）、项目时长、奖学金信息、导师联系方式、研究方向等关键信息。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>Excel 数据管理：将收集到的所有信息按照标准化格式整理到 Excel 表格中，确保列名统一为：学校名称 (School)、学院名称 (College/School)、申请链接 (Application Link)、申请截止日期 (Application Deadline)、材料要求 (Document Requirements)、GRE 要求、语言成绩要求、推荐信要求、个人陈述要求、简历要求、项目时长、奖学金信息、备注等。每个字段都需要有清晰的格式规范和数据验证规则。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>网页可视化界面：开发一个响应式网页应用，实现 Excel 数据的动态展示和交互功能。界面需要包含数据表格视图、搜索筛选功能（按学校名称、截止日期、GRE要求等条件筛选）、排序功能、分页显示。同时提供数据编辑功能，允许用户在网页上直接添加新学校信息、修改现有数据、删除过时信息，所有更改需要实时同步到后端数据库。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>数据持久化与同步：实现Excel文件与网页数据库的双向同步机制，确保用户在网页上的任何修改都能自动更新到 Excel 文件中，同时支持 Excel 文件导入功能，保持数据的一致性和完整性。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>用户权限管理：为不同用户设置相应的权限级别，普通用户可以查看和补充信息，管理员用户可以审核和修改所有数据，确保数据质量和安全性。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>数据验证与质量控制：建立严格的数据验证机制，包括URL格式验证、日期格式统一、必填字段检查、重复数据检测等功能，确保收集到的信息准确可靠。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>导出与备份功能：提供多种格式的数据导出选项（Excel、CSV、PDF），并实现定期自动备份机制，防止数据丢失。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;p>系统需要支持多语言界面（中英文切换），提供详细的使用文档和操作指南，确保用户能够高效地完成数据收集、管理和维护工作。&lt;/p>&lt;/blockquote>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-13.png"
loading="lazy"
alt="工业工程/运筹学 PhD 项目任务管理系统"
>&lt;/p>
&lt;div style="display: flex; gap: 16px; align-items: flex-start;">
&lt;div style="flex: 1;">
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-14.png" alt="示例图片" style="max-width: 100%;" />
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-15.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;div style="flex: 1;">
&lt;p>&lt;strong>常用配置：&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>Auto Mode：基于效果与速度帮助选择最优模型&lt;/li>
&lt;li>Max Mode：适用于复杂任务，支持长上下文，适合对质量要求高、能接受额外成本的用户&lt;/li>
&lt;li>制定模型：对相关模型进行勾选即可&lt;/li>
&lt;li>添加自定义模型：除了内置模型外，可以额外添加模型（服务商、模型、API 密钥）&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;h4 id="注意事项">注意事项
&lt;/h4>&lt;ul>
&lt;li>
&lt;p>代码生成、修改等需要注意的地方&lt;/p>
&lt;ul>
&lt;li>完整的保留或拒绝：Ctrl + Enter 接受 Ctrl + Backspace 拒绝&lt;/li>
&lt;li>某处内容保留或拒绝：Alt+N 前进 Alt+Y 后退&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-16.png"
loading="lazy"
alt="image.png"
>&lt;/p>
&lt;/li>
&lt;li>
&lt;p>回退：Trae 在发出每次请求时，可以回退到本轮对话发起前的状态，⚠️ 回退后，回退点后面的数据状态不再保留&lt;/p>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-30.png"
loading="lazy"
alt="image.png"
>&lt;/p>
&lt;/li>
&lt;/ul>
&lt;h2 id="4-编辑器内ai编码">4 编辑器内AI编码
&lt;/h2>&lt;p>使用 ‘Ctrl+I’ 启用 Editor 内 AI 编码，直接在编辑器窗口中生成新代码或编辑现有代码，适合精准修改代码/内容，也支持选中一段代码进行修改、以及增加新的功能（选中整个代码）。&lt;/p>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-17.png"
loading="lazy"
alt="image.png"
>&lt;/p>
&lt;h3 id="一个简单的案例风扇">&lt;a class="link" href="https://codepen.io/Long-Chen-the-builder/pen/YPWLbvV" target="_blank" rel="noopener"
>一个简单的案例：风扇&lt;/a>
&lt;/h3>&lt;blockquote>
&lt;p>提示词：&lt;/p>
&lt;p>创建一个页面，该页面有一个小风扇，创建两个按钮，分别控制开风扇和关风扇，使用 html + css + javascript 实现。&lt;/p>&lt;/blockquote>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-29.png"
loading="lazy"
alt="网页版风扇"
>&lt;/p>
&lt;h2 id="5-其他的一些设置">5 其他的一些设置
&lt;/h2>&lt;h3 id="51-trae上下文">5.1 Trae上下文
&lt;/h3>&lt;p>在 Trae 里，“上下文（context）”是指AI工具在回答问题或辅助编程时所能“看到”和“理解”的信息范围，有助于 Trae 能精准响应。&lt;/p>
&lt;div style="display: flex; gap: 16px; align-items: flex-start;">
&lt;div style="flex: 1;">
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-18.png" alt="示例图片" style="max-width: 100%;" />
&lt;br />&lt;br />
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-19.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;div style="flex: 1;">
&lt;p>&lt;strong>代码索引管理&lt;/strong>&lt;/p>
&lt;p>对工作区中的代码进行全局索引构建，发起#workspace问答时将自动全局前所遇问题相关的跨文件上下文，给出与项目更相关的回复&lt;/p>
&lt;p>&lt;strong>忽略文件&lt;/strong>&lt;/p>
&lt;p>功能：通过将’.ignore’文件添加到根目录来控制哪些文件/文件夹被忽略。&lt;/p>
&lt;p>作用：提升索引速度，排除依赖目录（如：node_modules/、vendor/）、构建输出目录（如：build/、out/）、大型媒体和数据文件（如：*.mp4、*.mov、*.avi），从而避免某些与当前任务无关的文件造成干扰&lt;/p>
&lt;p>&lt;strong>文档集&lt;/strong>&lt;/p>
&lt;p>通过URL、本地上传的方式添加常用的文档集作为上下文与AI问答&lt;/p>
&lt;p>&lt;strong>#符号与引用&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>#File 引用文件&lt;/li>
&lt;li>#Folder 引用文件夹&lt;/li>
&lt;li>#Code 将函数或类的相关代码作为AI助手对话的上下文&lt;/li>
&lt;li>#Doc 指定文档集&lt;/li>
&lt;li>#Workspace 引用工作区&lt;/li>
&lt;li>#Web 联网搜索&lt;/li>
&lt;li>#Problems 分析报错并提供解决方案&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;blockquote>
&lt;p>提示词：&lt;/p>
&lt;ol>
&lt;li>#workspace 有哪些文件？&lt;/li>
&lt;li>#workspace 哪些文件被忽略了？&lt;/li>
&lt;li>根据 #Doc:Gurobi，告诉我如何求解二次规划？&lt;/li>
&lt;/ol>&lt;/blockquote>
&lt;h3 id="52-rules规则">&lt;strong>5.2 Rules规则&lt;/strong>
&lt;/h3>&lt;div style="display: flex; gap: 16px; align-items: flex-start;">
&lt;div style="flex: 1;">
&lt;p>Rules 是给 Trae AI 功能生成结果添加规则和限制，让 Trae 生成的代码贴合团队规范，主要的作用如下：&lt;/p>
&lt;ul>
&lt;li>约束代码风格（如强制用驼峰命名、要求方法写注释等）&lt;/li>
&lt;li>能限定技术选型（如指定优先使用某技术/框架/库，禁止使用某组建/框架/库）&lt;/li>
&lt;li>提前指定配置参数（如提前设置连接数据库方式、账号密码等）&lt;/li>
&lt;/ul>
&lt;p>⚠️ &lt;em>注意事项：若项目规则与用户规则冲突，则项目规则的优先级更高&lt;/em>&lt;/p>
&lt;/div>
&lt;div style="flex: 1;">
&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-20.png" alt="示例图片" style="max-width: 100%;" />
&lt;/div>
&lt;/div>
&lt;br>
&lt;table>
&lt;thead>
&lt;tr>
&lt;th>&lt;/th>
&lt;th>&lt;strong>项目规则（Project Rules）&lt;/strong>&lt;/th>
&lt;th>&lt;strong>用户规则（User Rules）&lt;/strong>&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>作用范围&lt;/td>
&lt;td>仅对当前项目生效，团队成员共享相同规则&lt;/td>
&lt;td>对所有项目生效，个人专属配置&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>适用场景&lt;/td>
&lt;td>同意团队编码规范（如技术栈、依赖版本）&lt;/td>
&lt;td>个人习惯（如通用偏好和工作风格）&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;h2 id="6-使用案例">6 使用案例
&lt;/h2>&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/image-21.png"
loading="lazy"
alt="项目开发流程"
>&lt;/p>
&lt;h3 id="案例1网页小程序">案例1：网页小程序
&lt;/h3>&lt;blockquote>
&lt;p>提示词：&lt;/p>
&lt;p>你现在是已经资深网页前端开发工程师，请帮我使用原生 HTML + CSS + JavaScript 编写一个可直接在浏览器中打开使用的【在线投票程序】，要求如下：&lt;/p>
&lt;ol>
&lt;li>功能：&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>创建投票：输入投票标题，至少含2个选项；支持添加/删除选项&lt;/li>
&lt;li>开始投票：显示选项列表，点击为某一选项投票，实时更新票数与百分比&lt;/li>
&lt;li>防重复投票：同一设备对同一投票仅能投一次（使用 localStorage 记录）&lt;/li>
&lt;li>结果展示：显示每个选项票数和百分比，提供简单进度条或条形图效果&lt;/li>
&lt;li>数据持久化：投票标题、选项、票数、是否已投状态均使用 localStorage 保存，刷新后保留&lt;/li>
&lt;li>重置：提供“重置投票”按钮，清空数据并重新创建新的投票&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>界面与技术：&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>风格简洁淡雅（浅灰/浅蓝），居中卡片布局，按钮圆角阴影&lt;/li>
&lt;li>使用 CSS Flex 或 Grid 布局；当前日期不需要显示&lt;/li>
&lt;li>不使用任何框架或库； 全部代码在同一个 HTML 文件中&lt;/li>
&lt;li>使用原生 JavaScript 操作 DOM， 逻辑清晰， 适量注释&lt;/li>
&lt;/ul>&lt;/blockquote>
&lt;blockquote>
&lt;ol start="3">
&lt;li>输出格式：&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>直接保存为 “vote.html” 文件，并在浏览器中打开即可使用&lt;/li>
&lt;li>代码可直接运行，无需任何依赖&lt;/li>
&lt;/ul>&lt;/blockquote>
&lt;h3 id="案例2数据分析可视化">案例2：数据分析可视化
&lt;/h3>&lt;ol>
&lt;li>配置 mcp-server-chart：一个通过 AntV 生成图表模型上下文协议（Model Context Protocal）服务器。我们可以使用这个 MCP 服务器来进行图表生成和数据分析。其中，MCP 是让 AI 助手能调用外部工具和数据的协议，从而使得 Trae 能做更多的事情。&lt;/li>
&lt;li>提示词：帮我制作词云图，使用不同的颜色，词的大小根据数值区分，做到漂亮好看&lt;/li>
&lt;/ol>
&lt;h3 id="案例3文档可视化">案例3：文档可视化
&lt;/h3>&lt;blockquote>
&lt;p>提示词：&lt;/p>
&lt;p>请参考&lt;a class="link" href="https://mp.weixin.qq.com/s/VtMDgCV75QnaTCdNiDiY0g" target="_blank" rel="noopener"
>积极推动物价合理回升&lt;/a>，生成可视化的报告网页。&lt;/p>
&lt;ol>
&lt;li>内容要求&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>讲文档生成一个页面&lt;/li>
&lt;li>所有页面内容必须为简体中文&lt;/li>
&lt;li>保持原文件的核心信息，但以更易读、可视化的方式呈现&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>设计风格&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>整体风格参照 Linear App 的简约现代设计&lt;/li>
&lt;li>使用清晰的视觉层次结构，突出重要内容&lt;/li>
&lt;li>配色方案应专业、和谐，适合长时间阅读&lt;/li>
&lt;/ul>
&lt;ol start="3">
&lt;li>技术规范&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>使用 HTML5、TailwindCS3 3.0+（通过CDN引入）和必要的J avaScript&lt;/li>
&lt;li>实现完整的深色/浅色模式切换功能，默认跟随系统设置&lt;/li>
&lt;li>代码结构清晰，包含适当注释，便于理解和维护&lt;/li>
&lt;/ul>&lt;/blockquote>
&lt;p>&lt;img src="https://carlchanie.me/img/ai-coding-trae/price.png"
loading="lazy"
alt="报告正文及其可视化网页"
>&lt;/p>
&lt;h2 id="7-结语">7 结语
&lt;/h2>&lt;p>大模型发展日益强大今天，想象力才是最重要的因素。&lt;/p></description></item></channel></rss>