前些天vscode默认推荐copilot，便装上使用了下，用着觉得真的不错，它自动补全的代码准确度还是非常高的，也可以免去很多粘贴复制的无脑工作，比如，前端在写mock数据的时候，它能根据上下文生成数据结构统一的mock数据，真的是懒人必备。可是用了几天后发现代码补全功能没有了，查找下原因发现是因为免费额度用完了，这可真是很糟糕的事情，刚刚体验了它的便利性，结果不能免费使用了，抓耳捞腮后，又注册了一个GitHub，切换登录后，又能指点江山了。正当窃喜自己的雕虫小技时，发现这个免费额度消耗的实在是太快了，写了半天代码，额度就消耗了30%，由此可见这也不是长久之计。
今天打开稀土掘金，看到上面高亮广告“告别排队，Trae订阅上线，首月Pro仅$3，开发无忧”，便在vscode上安装上了Trae AI试一试。有了Copilot在前的使用经验，对比感受一下。
import语句自动补全
- copilot 五颗星
- Trae 五颗星
import RoleDrawer from '../components/RoleDrawer';
手动输入import RoleDrawer后，可能准确补全from '../components/RoleDrawer'
输入“//新增”自动补全新增编辑需要的变量和方法
- copilot 五颗星
- Trae 五颗星
// 新增编辑部分
const [roleDrawerVisible, setRoleDrawerVisible] = useState<boolean>(false);
const [roleDrawerInfo, setRoleDrawerInfo] = useState<object>({});
const onRoleDrawerClose = () => {
setRoleDrawerVisible(false);
}
const onRoleDrawerOpen = (record: object) => {
setRoleDrawerVisible(true);
setRoleDrawerInfo(record);
}
输入“<RoleDrawer”，自动补全
- copilot 五颗星
- Trae 五颗星
<RoleDrawer
visible={roleDrawerVisible}
handleCancel={onRoleDrawerClose}
info={roleDrawerInfo} // 传入null表示编辑用户
/>
下面是一段对三层数组处理的代码，根据里层数组每项中的checked判断外层是否checked，整段代码基本都由Trae生成：
- copilot 五颗星
- Trae 五颗星
const newDetailData = res.data.map((item: any) => {
const itemChildren = item.children.map((child: any) => {
const childChildren = child.children.map((subChild: any) => {
const subChildChildren = subChild.children.map((subSubChild: any) => ({
...subSubChild,
}))
return {
...subChild,
children: subChildChildren || [],
checked: subChildChildren.length > 0 && subChildChildren.every((subSubChild: any) => subSubChild.checked), // 第三层：访问权限或者操作权限-
}
})
return {
...child,
children: childChildren || [],
checked: childChildren.length > 0 && childChildren.every((subChild: any) => subChild.checked), // 第二层：访问权限或者操作权限-
}
})
return {
...item,
children: itemChildren || [],
checked: itemChildren.length > 0 && itemChildren.every((child: any) => child.checked), // 第一层：访问权限或者操作权限-
}
})
选择代码fix
-
copilot 三颗星
-
Trae 两颗星
-
copilot
- 操作步骤：选中代码，右键Copilot————fix，代码编辑框上面悬浮Copilot对话框，再输入框中输入指令，Copilot开始生成修改后的代码，此时需要手工一段段选择Accept修改。
- 缺陷：未选中的代码，也被
-
Trae 操作步骤： 选中代码，右键Trae AI ——AI Chat，打开Chat对话面板，再在对话中输入操作指令，Trace根据操作指令完成修改，再手动复制粘贴覆盖源代码）
