trae实测：vscode完美平替（体验升级+Ai免费）

我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/?utm_source…

一 入坑

作为一个老前端，我一直用的vscode,打开trae时候还准备写完文章就换回去，没想到在注册的过程中，trae自动继承了我在vscode的所有配置，包括快捷键，代码段等，让人好感顿生。

trae的注册也很简单，发条验证码即可，登陆之后ai功能就可以免费使用了。

打开trae，让人心里安定很多：界面和vscode相差无几，区别是右边多了个ai屏。

接下来我用trae写个小组件试试。

二 第一个小组件

我向ai描述了一个简单的navlink组件，ai大概20秒，给出了结果，效率不错，当然这里如果能直接粘贴图片就更好了，或者可以直接给一个蓝湖链接。

可以看到给出的代码逻辑没什么问题，稍做调整即可使用，甚至会参考项目中其他代码，给出符合本人代码风格的代码。

<template>
  <div class="router-link-nav">
    <div
      v-for="item in navItems"
      :key="item.path"
      class="nav-item"
      :class="{ active: currentPath === item.path }"
      @click="handleNavigate(item.path)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';

// 定义组件接收的导航项参数类型
interface NavItem {
  name: string;
  path: string;
}

// 定义props
const props = defineProps({
  navItems: {
    type: Array as () => NavItem[],
    required: true,
    default: () => []
  }
});

const router = useRouter();
const route = useRoute();
const currentPath = ref(route.path);

// 处理导航点击
const handleNavigate = (path: string) => {
  router.push(path);
  currentPath.value = path;
};

// 监听路由变化更新当前路径
watch(() => route.path, (newPath) => {
  currentPath.value = newPath;
});
</script>

<style scoped lang="less">
.router-link-nav {
  display: flex;
  gap: 24px;
  padding: 0 16px;

  .nav-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;

    &:hover {
      color: #409eff;
      border-bottom-color: #409eff;
    }

    &.active {
      color: #409eff;
      border-bottom-color: #409eff;
      font-weight: 600;
    }
  }
}
</style>

三 上下文测试

现在测试一下上下文功能，我切换到对应页面，要求ai在该页面引入刚刚的组件，看看ai完成的怎样。

可以看到ai成功理解到了我的意思，引入了刚刚创建的组件，并且根据项目中的router代码，给出了一个拟定参数，美中不足的是耗时较久，在思考完成后，要等待较长的时间，在能在发言后把代码给出，大概一分钟的样子。

稍后我要求对局部代码进行修改，这次代码出的稍微快一些。

代码也正确修改了。

const navItems = [
  { name: '首页', path: '/' },
  { name: '列表', path: '/list' },
  { name: '详情', path: '/listDetail' }
];

四 抽象代码生成测试

接下来尝试下ai的抽象化功能，我让ai仿照另一个页面的元素改写当前页面。

大概意思是另一个页面，有个content元素，在父元素，用display：flex的方式居中，宽度是父元素的60%。

在当前页面，我已经准备好了父元素，希望得到一个类似于上面content元素的效果。

这次ai没有完全领会，它添加了一个content元素到当前页面，但是没能添加正确样式。看来尚且不能完全替代人工。

五 代码补全功能

代码补全功能会推测你的逻辑，补全一行或者一段代码，推测还是比较靠谱的，但是需要你去读取它的代码，做细节上的调整。这个是自愿的，它有提示，按tab就可以接纳。自动粘贴上去。

代码补全功能还是比较方便的，比如我在vue3中用到了route，再点击空白行，会自动提示：

const route = useRoute();

六 代码优化功能

选中一段代码后，上方会出现编辑和添加到对话按钮，我理解编辑是添加到对话的编辑版。 点击编辑出现一个文本框可以直接写希望将选中代码改成什么样子。点击添加到对话就是打开一个ai对话框。

四 其他功能

1 开发过程中，ai会不断提出建议，比如在编写按钮时候，会提示hover代码块，比较方便。也可以选择不理会。

2 全局搜索按钮和vscode在相同的位置，暂时没看到文件后缀筛选功能，全局替换在比较明显的位置。