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

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

一、安裝下載

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

到本地安裝的時候，會提示是否要導入配置，這里可以選擇

• 從VS Code導入
• 從Cursor導入

接著可以選擇安裝Trae命令

然后可以選擇跳過或者登錄賬號

首次使用這個平臺的話，可以注冊賬號并登錄，登錄成功之后可以看到下面這個界面的提示

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

二、功能區(qū)

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

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

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

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

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

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

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

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

三、編輯工程代碼

這里以前端工程代碼為例，打開一個React工程代碼，首次打開的時候會需要選擇信任這個作者

3.1 提示運行前端工程代碼

首先運行這個工程代碼，直接在Chat模式里輸入

幫忙運行這個React 項目

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

npm install

npm start

由于這個項目用的是vite構(gòu)建工具，所以一開始提示的用npm start啟動會報錯，于是繼續(xù)提示

這里運行的構(gòu)建工具是vite，用npm start啟動會報錯

然后點擊這個Open WebView，就會在WebView這里打開一個窗口，運行端口，這里就可以看到頁面的預覽效果了。

3.2 改造樣式

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

修改這個count is 0按鈕的背景色為藍色

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

在修改的文件那里會看到提示”更改已經(jīng)成功被應用了，請確認“，可以點擊

• Reject 拒絕
• Accept 同意

在未點擊確認之前，這里新增代碼的背景色會是綠色。

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

3.3 增加交互

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

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

可以看到

• 要刪除的代碼，未確認之前是紅色背景
• 要新增的代碼，未確認之前是綠色背景

點擊Accept之后，再次運行，看到效果如下所示：

點擊這個按鈕，確實新增了一個彈窗組件，并提示對應的信息。

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

如果想要復制自己上次輸入的整個上下文信息，則需要點擊左邊這三個點，選擇Copy

最新評論