Trae AI IDE 全網(wǎng)最全的使用教程

近期，字節(jié)發(fā)布了一款 AI Coding 產(chǎn)品 —— Trae，它是一款對(duì)標(biāo) Cursor 和 Windsurf 的全新 IDE，也是一款真正為中文開發(fā)者量身定制的工具，可謂是中文開發(fā)者的福音。
其優(yōu)雅的 UI、絲滑的交互、母語級(jí)的支持、更高的 AI 集成度、更?然自?的交?式互?對(duì)話開發(fā)、更??精準(zhǔn)的 AI 生?效成?果，都讓你感到親切和驚艷！
它不再是一個(gè)工具，而是一個(gè)能 “思考” 和 “共創(chuàng)” 的協(xié)作者，幫助你更靈活的調(diào)用 AI 參與項(xiàng)目，實(shí)現(xiàn)更高效率、更好效果的開發(fā)體驗(yàn)。

一、安裝下載

去到 https://www.trae.ai/ 官網(wǎng)，點(diǎn)擊Download下載

到本地安裝的時(shí)候，會(huì)提示是否要導(dǎo)入配置，這里可以選擇

• 從VS Code導(dǎo)入
• 從Cursor導(dǎo)入

接著可以選擇安裝Trae命令

然后可以選擇跳過或者登錄賬號(hào)

首次使用這個(gè)平臺(tái)的話，可以注冊(cè)賬號(hào)并登錄，登錄成功之后可以看到下面這個(gè)界面的提示

在這里可以更改這個(gè)配置的語言，一般默認(rèn)的是中文，但一般開發(fā)都習(xí)慣于用英文。

二、功能區(qū)

主要分為四大塊區(qū)域：

• 最左邊的側(cè)邊欄:

  • Explorer 選擇文件
  • Search 搜索
  • Git git倉(cāng)庫(kù)
  • WebView 網(wǎng)頁預(yù)覽
  • Debug 調(diào)試代碼
  • Extension Store 插件市場(chǎng)

• 第二塊區(qū)域的文件區(qū)

  顯示所有的文件層次結(jié)構(gòu)

• 最中間最大的代碼編輯區(qū)

• 最右側(cè)的AI 交互提問區(qū)

  • Builder 模式：只需要告訴 AI 你想要什么樣的應(yīng)用，它會(huì)輕松完成從零到一的項(xiàng)目構(gòu)建
  • Chat 模式：AI 將理解當(dāng)前代碼，你可以隨時(shí)提出問題、尋求建議。此外也支持編輯器內(nèi)實(shí)時(shí)提供建議代碼

三、編輯工程代碼

這里以前端工程代碼為例，打開一個(gè)React工程代碼，首次打開的時(shí)候會(huì)需要選擇信任這個(gè)作者

3.1 提示運(yùn)行前端工程代碼

首先運(yùn)行這個(gè)工程代碼，直接在Chat模式里輸入

幫忙運(yùn)行這個(gè)React 項(xiàng)目

然后就可以看到輸出如下信息所示，提示要

npm install

npm start

由于這個(gè)項(xiàng)目用的是vite構(gòu)建工具，所以一開始提示的用npm start啟動(dòng)會(huì)報(bào)錯(cuò)，于是繼續(xù)提示

這里運(yùn)行的構(gòu)建工具是vite，用npm start啟動(dòng)會(huì)報(bào)錯(cuò)

然后點(diǎn)擊這個(gè)Open WebView，就會(huì)在WebView這里打開一個(gè)窗口，運(yùn)行端口，這里就可以看到頁面的預(yù)覽效果了。

3.2 改造樣式

比如想要改造上述按鈕的顏色為藍(lán)色，則在Builder模式下去輸入

修改這個(gè)count is 0按鈕的背景色為藍(lán)色

然后就可以看到輸出的內(nèi)容和修改的文件

在修改的文件那里會(huì)看到提示”更改已經(jīng)成功被應(yīng)用了，請(qǐng)確認(rèn)“，可以點(diǎn)擊

• Reject 拒絕
• Accept 同意

在未點(diǎn)擊確認(rèn)之前，這里新增代碼的背景色會(huì)是綠色。

點(diǎn)擊Accpet之后，再次運(yùn)行可以看到下面按鈕的背景色已經(jīng)變成了藍(lán)色。

3.3 增加交互

比如想要在點(diǎn)擊這個(gè)按鈕之后，增加一個(gè)dialog的彈窗提示，輸入這樣的命令，可以看到提示修改的代碼

其中，點(diǎn)擊對(duì)應(yīng)要修改的提示代碼文件的Review，就可以跳轉(zhuǎn)去對(duì)應(yīng)的文件

可以看到

• 要?jiǎng)h除的代碼，未確認(rèn)之前是紅色背景
• 要新增的代碼，未確認(rèn)之前是綠色背景

點(diǎn)擊Accept之后，再次運(yùn)行，看到效果如下所示：

點(diǎn)擊這個(gè)按鈕，確實(shí)新增了一個(gè)彈窗組件，并提示對(duì)應(yīng)的信息。

四、一些使用技巧和細(xì)節(jié)

如果想要復(fù)制自己上次輸入的整個(gè)上下文信息，則需要點(diǎn)擊左邊這三個(gè)點(diǎn)，選擇Copy

最新評(píng)論