抖音字节免费不限量AI自动编程工具Trae使用教程
刚说完最近比较火爆的收费AI编程工具Cursor,字节就发布了免费的AI自动辅助编程工具,同Cursor一样,代码编辑器是套壳的VSCode。
一句话,Cursor有的,Trae有;Cursor没有的,Cursor还有!
而且在Cursor使用Claude-3.7-Sonnet
,可是并没有成功。而Trae只能使用Claude-3.5-Sonnet
的情况下,Trae依然完爆Cursor。
小作坊终究敌不过大场,唉,有好的想法也没用。
软件官网
安装教程
emmmm,站长写这篇文章的时候,已经是半夜了,台式机已经关了,所以用MacBook来试用Trae并编辑文章。因此以下截图为MacOS的安装方式,Windows应该是无脑下一步就可以的,所以这里就不做过多赘述了。

软件配置
安装后打开软件界面,发现还是比较清爽的。因为都是中文,所以非常容易理解。


下面需要选择导入哪个代码编辑器的配置文件?站长VSCode和Cursor都是安装了的,但Cursor真的没那么好用,很多代码高亮之类的语法,还有库的导入显示方式都很不方便,也不知道是不是BUG,所以站长这里直接导入VSCode的配置吧。(如果你没有安装任何代码编辑器,也可以点击跳过。)

下面提醒你是否安装命令行工具,这样以后使用更方便,如果打算尝鲜就跳过,打算长期使用就安装。

完成以上步骤之后就需要登录了,登录方式是弹出一个网页进行授权,站长直接使用Github账号关联授权登录。(居然没有抖音登录,哈哈。)

在网页中授权成功之后,就可以点击Log in and open Trae
这个按钮了,这将会自动切换至Trae的客户端。

登录成功后的界面如下图所示:

之前看别人介绍说支持免费不限量使用Claude-3.5-Sonnet
和ChatGPT-4o
,但是不知道为什么,现在只能看到Claude-3.5-Sonnet,ChatGPT-4o不见了,可能官方的API到上限了吧。
使用教程
内置的推荐是生成一个贪吃蛇游戏
和生成一个待办清单
,内置的肯定是被调教好的,而且这种项目的源码都已经烂大街了,感觉没有什么参考意义,所以就不实验这两个项目了。
公平起见,我们直接拿测试Cursor的题目来让Trae来试试。不过,不公平的是,Cursor使用的是Claude-3.7-Sonnet
,可是并没有成功。而Trae只能使用Claude-3.5-Sonnet
,所以这就没办法了,不公平就不公平吧,强者从不抱怨环境。
下蛋母鸡
先在本地新建一个文件夹,然后使用Trae打开这个文件夹,然后再输入提示词。
写一个HTML静态网页,网页内有一只母鸡在下弹,母鸡的外面有个大圆环,这个圆环有一个缺口,如果下的弹从缺口中弹出则自动下弹出数量一倍的鸡蛋,鸡蛋是可以被物理交互的,包括弹跳等情况,大圆环是一直在匀速旋转的,这样才能确保鸡蛋有概率从缺口处掉出去,直到第3000个鸡蛋才停止。
与Cursor有所不同,Trae每生成一个文件,都需要手动点一次接受,而且对于HTML的项目会直接提示你是否运行。

运行后的效果如下,比Cursor强很多,最起码能跑起来,但这并不是我想要的效果,下面加上让AI完善的规则再试一下。

基础规则: 母鸡每0.5秒自动产出一枚具备物理特性的鸡蛋 鸡蛋初始速度为垂直向下,碰撞物体后产生真实弹跳效果 母鸡外围存在一个持续顺时针匀速旋转(30°/秒)的圆形防护环 防护环在2点钟方向设有15度角度的永久性缺口 核心机制: 当鸡蛋首次接触防护环时: 若接触点为缺口区域,则立即生成双倍数量的新鸡蛋(几何级数增长) 若接触点为实体环段,则按物理法则反弹 新生鸡蛋继承母体鸡蛋的所有物理属性(速度/角度/质量) 缺口判定采用动态坐标系计算,实时跟随防护环旋转角度 所有鸡蛋持续存在直至系统总量达到3000个时: 立即停止所有新蛋生成 防护环终止旋转 现有鸡蛋保持物理运动状态 补充说明: 鸡蛋间可相互碰撞产生连锁物理反应 缺口触发机制仅对每个鸡蛋生效一次,防止无限递归 系统内置碰撞盒缓冲机制,避免高速穿透漏洞 母鸡持续播放产蛋动画(翅膀扇动频率与产蛋节奏同步)

整个动画的速度变快了,其它没有什么变化,但也比Cursor强,我们下面来分别试验斗地主和2048。
斗地主
帮我写个HTML版本的单机版斗地主纸牌游戏。
下面是AI给出的回复和自动创建的文件,非常完善,但是点击开始游戏之后没有反应,我们让它再自查一下。


下面给出问题,让AI全自动来解决。
现在点击开始游戏没有任何效果,帮我检查并优化代码,排除潜在的所有问题。


懒的去找这些图片了,让它直接用字母来代替牌面的图片吧。
我没有这些图片,帮我改成直接用文字、字母、数字来代替。

牛逼!!虽然还是有问题,但是最起码有点人样了,为了节省篇幅,后续的调教过程就不放出了,总之非常好用。
2048
最后一个项目测试,2048比斗地主简单很多,应该不会翻车。
用HTML写个2048小游戏,数字在每次相加时,要有炫酷的特效。
高估了Trae,在Cursor中出现的问题,在Trae中依然存在。

功能解析
以上的功能看的都差不多了,下面介绍一下其它功能,也就是Cursor没有的功能。
UI仿写
我们可以上传一张图片,然后让AI根据图片去仿写这张截图UI。

可以看到,成功了,也没成功,没有完全复刻,但也至少是那个意思了。

代码辅助
我们可以手动选择一段代码,然后向AI提出问题,AI就可以快捷解答。

这段代码是2048游戏中添加新方块的核心函数`addTile` 。它的主要功能是: 1. 创建一个新的div元素作为游戏方块 2. 设置方块的样式类和数值属性,其中isNew参数决定是否添加'new'类(用于新方块的动画效果) 3. 计算并设置方块在网格中的具体位置(left和top值) 4. 将创建好的方块添加到游戏容器中,并在内部数组中记录这个方块的信息(包括DOM元素、坐标和数值)
代码引用
我们还可以手动输入#
号,或者点击引用按钮,直接选择代码片段
、单个文件
,文件夹
来提出问题,这样提出的问题更有针对性,而且还能避免AI混沌的情况。

总结
所有功能从最上面的视频里已经可以看到了,效果真的很不错,最起码人家Trae免费。
但还是要注意,如果你对自己代码高度重视隐私,请不要使用任何AI自动化编程工具。因为无论是Cursor还是Trae,都可以在代码编辑器中看到一个选项工作区索引
,这将会自动为代码构建索引,然而索引的构建应该并不是在本地的。

如果你想体验AI编程,想获得Cursor的使用体验,建议直接使用Trae工具,免费、高效、功能更强大。
此文章由OpenAI开源维基百科原创发布,如若转载请注明出处:https://openai.wiki/trae.html