一、AI编程工具TRAE
关于TRACE与Cursor的对比请参见《AI编程主力工具Cursor与TRAE全方位对比》。1、TRACE是什么
TRAE 是字节开发的深度集成 AI 的 IDE，支持智能问答、代码自动补全及 AI 自动编程，兼具传统 IDE 功能（代码编写、项目管理等）与强大 AI 能力，可通过自然语言生成代码片段甚至项目级代码，还能以 SOLO 模式（AI 主导全开发流程）高效开发，适配 macOS 10.15+、Windows 10/11 系统。2、快速入门
• 1、 官网下载安装包，安装后启动，按指引选主题语言、导入 VS Code/Cursor 配置、添加命令行，用手机号或稀土掘金账号登录；
• 2、 点击左侧 “打开文件夹” 导入本地项目，或克隆 Git 仓库；
• 3、 左上角切换开发模式，IDE 模式自主控制，SOLO 模式 AI 自动完成开发全流程；
• 4、 可借助内置智能体，或创建自定义智能体协作，也能开启 CUE 工具提升编程效率，还可添加 MCP Server 扩展智能体能力。
本文详细记录使用字节 AI 编程工具 (TRAE) 开发一款跨平台本地 Markdown 编辑器的全过程，通过还原从需求梳理到功能迭代、问题调试的完整实践流程，拆解 AI 编程在实际项目开发中的应用方式、避坑要点与效率提升技巧，希望能为大家使用当下热门的 AI 编程工具提供可落地的参考，助力提升 AI 辅助开发的实战能力。
TRAE 是字节开发的深度集成 AI 的 IDE，支持智能问答、代码自动补全及 AI 自动编程，兼具传统 IDE 功能（代码编写、项目管理等）与强大 AI 能力，可通过自然语言生成代码片段甚至项目级代码，还能以 SOLO 模式（AI 主导全开发流程）高效开发，适配 macOS 10.15+、Windows 10/11 系统。
2、快速入门
• 1、 官网下载安装包，安装后启动，按指引选主题语言、导入 VS Code/Cursor 配置、添加命令行，用手机号或稀土掘金账号登录；
• 2、 点击左侧 “打开文件夹” 导入本地项目，或克隆 Git 仓库；
• 3、 左上角切换开发模式，IDE 模式自主控制，SOLO 模式 AI 自动完成开发全流程；
• 4、 可借助内置智能体，或创建自定义智能体协作，也能开启 CUE 工具提升编程效率，还可添加 MCP Server 扩展智能体能力。
一、AI编程工具TRAE 关于TRACE与Cursor的对比请参见《AI编程主力工具Cursor与TRAE全方位对比》。1、TRACE是什么 TRAE 是字节开发的深度集成 AI 的 IDE，支持智能问答、代码自动补全及 AI 自动编程，兼具传统 IDE 功能（代码编写、项目管理等）与强大 AI 能力，可通过自然语言生成代码片段甚至项目级代码，还能以 SOLO 模式（AI 主导全开发流程）高效开发，适配 macOS 10.15+、Windows 10/11 系统。2、快速入门
• 1、 官网下载安装包，安装后启动，按指引选主题语言、导入 VS Code/Cursor 配置、添加命令行，用手机号或稀土掘金账号登录； • 2、 点击左侧 “打开文件夹” 导入本地项目，或克隆 Git 仓库； • 3、 左上角切换开发模式，IDE 模式自主控制，SOLO 模式 AI 自动完成开发全流程； • 4、 可借助内置智能体，或创建自定义智能体协作，也能开启 CUE 工具提升编程效率，还可添加 MCP Server 扩展智能体能力。
本文详细记录使用字节 AI 编程工具 (TRAE) 开发一款跨平台本地 Markdown 编辑器的全过程，通过还原从需求梳理到功能迭代、问题调试的完整实践流程，拆解 AI 编程在实际项目开发中的应用方式、避坑要点与效率提升技巧，希望能为大家使用当下热门的 AI 编程工具提供可落地的参考，助力提升 AI 辅助开发的实战能力。
先看一下本次AI开发的成果：
一、AI编程工具TRAE
关于TRACE与Cursor的对比请参见《AI编程主力工具Cursor与TRAE全方位对比》。
1、TRACE是什么
TRAE 是字节开发的深度集成 AI 的 IDE，支持智能问答、代码自动补全及 AI 自动编程，兼具传统 IDE 功能（代码编写、项目管理等）与强大 AI 能力，可通过自然语言生成代码片段甚至项目级代码，还能以 SOLO 模式（AI 主导全开发流程）高效开发，适配 macOS 10.15+、Windows 10/11 系统。
2、快速入门
二、关于Markdown编辑器的设想
1、为什么需要一款自主可控的本地Markdown编辑器
自研Markdown编辑器，核心是解决现有工具两大痛点：在线版需上传文档，隐私无保障、断网不可用，还存在数据泄露风险；本地免费版普遍功能阉割，缺少公式、图表、批量处理、无水印导出等实用能力，且无法自定义。自研可实现纯本地存储，完全掌控数据隐私，按需定制完整功能与界面交互，无广告、不妥协，适配个人写作与工作流，同时作为技术项目沉淀能力，摆脱第三方平台限制，打造长期自用的高效工具。
2、初步需求
这是是原始的需求：
做一个跨平台Markdown编辑器，能管理指定文件夹下所有的md文件，界面分左中右，分别为目录下的文件列表（含子文件夹）、编辑（预览界面）、内容结构，支持所见即所得编辑模式与原始格式sylk模式，要求支持所有markdown标准格式以及数学公式高级渲染、流程图编辑等。限制：采用本地可执行程序来进行开发。
3、根据初步需求，产生详细的需求
将初步需求给任意一款开模型，即可产生详细的需求文档，与手工写需求相比，即完善又快捷。
详细内容我就不全部贴出了，你可以自己让给用原始需求来产生详细的需求。
4、产生一个设计方案
将详细的需求给任意一款开模型，即可产生详细的技术设计文档，与手工写需求相比，即完善又快捷。
详细内容我就不全部贴出了，你可以LLM产生的详细需求来产生详细的设计文档。
三、使用Trae开发Markdown编辑器过程
打开TRAE选择一个文件夹，然后在会话框输入你的需求即可开始正式的进行AI编程。
下面详细记录在TRAE中开发Markdown编辑器过程的全过程。
1. 基础运行与功能迭代
任务提炼：先基于Node 22生成可运行的最简版本代码，再逐步添加功能并测试；修复“选择工作目录自动创建md文件”的问题，确保仅展示目录内已有文件/文件夹（非md文件不编辑）。
1.根据需求文档，结合技术文档，采用node 22(nvm use 22)，生成全部代码并运行然后程序根本运行不起来，各种尝试均不行，后来AI将全部功能去掉用一个最简单的界面进行试验，终于是可以成功的了几经折腾之后，程序能运行起来了，但是内容完全不对，如下图：2. 目录跳转与记忆功能
任务提炼：修复右侧内容结构点击不跳转、左侧文件列表未自动展开第一层节点的问题；实现记忆上次选择的目录和最后打开的文件，启动时自动加载并选中该文件；设置中间编辑区默认显示单面板、所见即所得模式。
4.点击右边目录没有跳转到对应内容上，需要在程序中进行处理，确保点击目录项后，能够跳转到编辑面板对应的内容位置。没有启动成功，报错了，请检查终端中的错误信息5、所见即所得模式下，点右边目录时未跳转到对应内容上6、记住上次选择的目录，下次启动时自动加载上次选择的目录没有记住并打开上次选择的工作目录将本次选择的目录保存在本地，下次启动时自动加载最后一次选择的目录7、左侧列表中，第一层节点显示所选中的文件夹，并展开第一级子文件夹左侧文件（夹）列表中，启动时自动打开的情况或通过按钮选择时，自动展开第一层节点---failed----左边目录（文件列表）没有自动展开第一层节点8、记录最后打开的文件，下次启动时在加载完成上次打开的目录之后，自动打开上次打开的文件在点击一个md文件时就将它记作最后打开的文件，下次启动时自动打开记录的这个文件9、中间编辑区域，缺省显示单面板、所见即所得模式10、程序启动时，左边树形列表选中最后打开的文件3. 代码块与表格样式优化
任务提炼：优化代码块样式，实现代码块内容不参与目录抽取、带圆角边框/背景区分显示，且按语言语法高亮；修复所见即所得模式下表格无边框/表格线的问题（通过marked库自定义渲染实现）。
11、"```xxx"或"```"开始的代码块，其中xxx为代码块对应的语言，可以根据不同的语言进行语法高亮，在编辑面板中显示为代码格式，代码块中的内容不进行渲染,代码块中的内容用不风的背景与字体来展示代码块用明显的背景进行区分显示OK：不对代码块中的#，##，###等进行文件结构的目录抽取，在右边目录列表中不显示代码块中的伪标题所见即所得模式下，整个代码块加一个带园角的边框及背景，与编辑面板中的其他内容区分开来还是没有达到效果。代码块标识为```或````或类似于```python这样的，在所见即所得模式下，代码块加一个带园角的边框及背景代码块的颜色与样式没有起使用，并没有边框与样式，更不用说根据不同的语言类别进行高亮显示了如图（截了一张代码块没有生效的图），代码块的样式还是普通样式有一点很意外的是，它对图片的理解也还是不错的。
--下面来处理不同语言类别下的代码块样式终于生效了，下面请根据不同语言种类来高亮显示代码块中的内容13、所见即所得样式下表格显示增加边框与表格线4. 界面样式与布局调整
任务提炼：修复左右侧目录图标显示错误（区分文件夹/普通文件/md文件，文件夹图标随展开/收回切换）、滚动条显示异常问题；调整中间编辑区高度，解决双滚动条、区域底部未对齐、背景色断层问题；顶部新增工具栏归集所有按钮。
14、下面来调整一些样式1）、左边目录（文件列表）中，非md文件的图标显示为普通文件图标，而不是代码文件图标，同时滚动条只是显示文件的层中显示，而不是左边目录列表的整个来显示滚动条2）、右边显示的目录，将文件夹图标与文件图标区分开来，文件夹图标显示为文件夹图标，文件图标显示为普通文件图标，markdown文件图标显示为md文件图标--- 此时最大的问题我将左边写成了右边，它就将右边的文件目录层次结果给我换成了左边文件目录结构，而我却选择了“全部接受"，无语了，下面来恢复：右边不应该显示与左边相似的目录结果，应该显示选中md文件的目录层次结构右边文档结构树形列表中，缺省展开h1标题下的所有子标题右边内容结构列表中，缺省展开h1标题左边显示的目录，将文件夹图标与文件图标区分开来，文件夹图标显示为文件夹图标，文件图标显示为普通文件图标，markdown文件图标显示为md文件图标目录树中没有根据不同类型显示图标，甚至连图标都没有显示左边显示的目录，文件夹前显示文件夹图标，文件前显示一个普通文件图标，markdown文件前显示显示为md文件图标目录树的各个项目前没有显示出来图标文件夹展开与收回时,图标也会相应的展开与收回```右边内容结构中的背景色在滚动到底部之后也没有了，需要与内容结构区域的背景色一致左边文件夹中的背景色在滚动到底部之后也没有了，需要与左边文件夹区域的背景色一致// 这是一个大的界面调整，涉及到页面布局结构的调整：很意外的是，一次调整成功14、在页面顶部增加一个工具条，将页面中的所有按钮都放到工具条中，包括选择文件夹、刷新以及编辑区域的三个按钮5. 图片显示与编辑区优化
任务提炼：修复所见即所得模式下图片宽度固定导致横向滚动条的问题；实现左侧列表显示图片文件，选中后中间区域预览图片，且屏蔽Mac系统.DS_Store文件；修复原始格式编辑区双滚动条/无法滚动的问题。
15. 调整图片显示所见即所得中的图片显示宽度需要根据图片的宽度来动态调整，但是不能超过编辑区域的宽度，不能固定宽度，现在宽度太大时，造成页面出现横向滚动条没有效果还是没有效果，首先重新运行程序看看16. 原始格式下编辑双滚动条区调整：在编辑区域处于原始格式时，出现双滚动条现在只有一个滚动条了，但是编辑区中的内容没办法滚动了17. 调文件位显示的内容，支持显示图片左边目录列表中，显示选中文件夹下所有文件与子文件夹，包括非md文件。如果是图片文件，选中之后在中间区域显示图片打开页面之后，页面空白选中图片时，中间区域未显示出来图片图片预览还是未显示出来左边文件列表中，不显示Mac系统的系统文件.DS_Store6. 程序打包优化
任务提炼：添加打包Windows/Mac/Linux可执行程序的命令，修复Mac版本打包失败、打包后界面空白、运行时自动打开开发者工具的问题。
18.增加打包Windows、Mac、Linux版本的可执行程序的命令打包Mac版本可执行文件重新打包Mac可执行程序打包失败了，但我可以确认网络是没问题的，所以你需要想其他办法来解决这个问题打包之后运行时界面一片空白还是空白，如图打包运行时去掉调试窗口打包之后的程序运行时，关闭调试模式打包运行之后，还是打开开发者工具了，请重新修改--然后开发人员工具就不会再打开了，但是页面空白了总结
四、本次成果
1、核心功能
2、增强功能
3、跨平台支持
4、解决的问题
五、下一步计划
目前只完成了实际目录下markdown文件与图片文件的显示，下一步将增加：
1、显示LaTex公式
2、显示mermaid图形
3、保存编辑后的内容
4、在所见即所得模式下快速编辑各种格式的内容（含公式与图形）
5、左边文件区域与右边内容结构区域可隐藏与显示
6、完善菜单功能
7、增加配置参数
8、启动程序时能自动恢复上一次的各种设置
了解更多AI编程，关注公众号！