用 AI 一小時(shí)重構(gòu)代碼：豆包 MarsCode 實(shí)戰(zhàn)教程

相信程序員朋友們都遇到過這個(gè)問題：項(xiàng)目的演進(jìn)過程中，代碼往往會(huì)不斷堆砌，如果缺乏對(duì)代碼質(zhì)量的關(guān)注，它會(huì)不可避免地走向混亂，逐漸演變成邏輯復(fù)雜、難以維護(hù)的“祖?zhèn)鞔a”，想優(yōu)化它但無從下手~

豆包 MarsCode AI 編程云課堂 「進(jìn)階開發(fā)實(shí)戰(zhàn)系列」特邀【字節(jié)資深前端姚路行老師】為大家?guī)?strong>代碼重構(gòu)實(shí)戰(zhàn)課程，幫助大家提升代碼質(zhì)量，提升項(xiàng)目可維護(hù)性，讓開發(fā)過程更加輕松高效~

課前準(zhǔn)備

下載并安裝豆包 MarsCode

• www.marscode.cn

在官網(wǎng)下載并安裝好豆包MarsCode 插件：

克隆項(xiàng)目

本課程使用 AI 以 Next.js 框架生成的一個(gè) todolist 項(xiàng)目

git clone https://github.com/ylx911229/todo-list_back.git

使用“code”命令來啟動(dòng) Visual Studio Code 并將其打開

cd todo-list_back 
code .

安裝依賴

npm i

啟動(dòng)項(xiàng)目

npm run dev

• 項(xiàng)目依賴 Node.js 版本大于18.18.0，啟動(dòng)前確認(rèn)好本地 Node.js 版本，版本過低可在 Node.js 官網(wǎng)下載安裝

本地預(yù)覽

打開瀏覽器，訪問：http://localhost:3000，運(yùn)行成功得到如下效果

課程內(nèi)容

組件拆分

首先我們先讓豆包 MarsCode 幫我們創(chuàng)建一個(gè) components 目錄，用于存放拆分出的組件，豆包 MarsCode 還貼心的告訴我們需要改 tailwind.config.ts 添加 components 目錄，Tailwind CSS 就會(huì)掃描目錄下的文件，以便應(yīng)用相應(yīng)的樣式。

Workspace在app目錄下創(chuàng)建components目錄

接下來讓豆包MarsCode 幫我們將項(xiàng)目合理拆分組件

如果由于輸出 token 長(zhǎng)度限制，拆分的組件沒有輸出完全的話，可以讓豆包MarsCode 繼續(xù)輸出

Workspace 拆分出的組件沒有輸出完成，請(qǐng)繼續(xù)輸出

最后修改主文件，將主文件改寫成對(duì)子組件的引入

Workspace 將主文件改寫成對(duì)子組件的引入

資源抽離

類型聲明的抽離，單獨(dú)文件管理類型更清晰可讀，另外，項(xiàng)目當(dāng)中也會(huì)有很多可以多組件，多文件復(fù)用的常量，抽離出來統(tǒng)一管理，一處修改，多處受益

類型聲明抽離

首先將主文件中的類型聲明單獨(dú)抽離一個(gè)文件

Workspace 將主文件中的類型聲明單獨(dú)抽離一個(gè)文件

接下來修改項(xiàng)目中所有文件對(duì)類型聲明的引入方式以及引入路徑

 Workspace 修改項(xiàng)目中所有文件對(duì)類型聲明的引入方式以及引入路徑

常量抽離

單獨(dú)抽離項(xiàng)目中的常量，并修改項(xiàng)目中所有文件對(duì)常量的引入方式以及引入路徑（輸出簡(jiǎn)單的話，也可以在一條指令中引導(dǎo)豆包MarsCode 完成）

 Workspace 將項(xiàng)目中的常量單獨(dú)抽離一個(gè)文件，并修改項(xiàng)目中所有文件對(duì)常量的引入方式以及引入路徑

狀態(tài)管理優(yōu)化

當(dāng)項(xiàng)目中一個(gè)組件內(nèi)管理過多的狀態(tài)時(shí)，代碼會(huì)非常亂，并且可讀性很差，我們可以根據(jù)狀態(tài)的不同類型，去抽離獨(dú)立的自定義 hooks ，讓代碼更加可讀可維護(hù)，而當(dāng)狀態(tài)管理需要組件層層傳遞時(shí)，更好的做法就是將狀態(tài)管理提升為全局狀態(tài)管理，兩種都是對(duì)狀態(tài)管理的優(yōu)化，選擇更適合自己項(xiàng)目的方式

自定義hooks

將兩個(gè)狀態(tài)管理作為自定義 hooks 單獨(dú)抽離，并改寫主文件對(duì)他們的引入

Workspace 將從localStorage加載todos和保存todos到localStorage做為useLoadTodosFromLocalStorage和useSaveTodosFromLocalStorage兩個(gè)自定義hooks單獨(dú)抽離，并改寫主文件對(duì)他們的引入

全局狀態(tài)管理

將項(xiàng)目中的狀態(tài)管理改為全局狀態(tài)管理,主文件以及所有組件通過全局狀態(tài)獲取而不是通過 props 傳遞

Workspace 將項(xiàng)目中的狀態(tài)管理改為全局狀態(tài)管理，主文件以及所有組件通過全局狀態(tài)獲取而不是通過props傳遞

代碼提交

最后我們提交代碼時(shí)，可以讓豆包MarsCode 幫我們總結(jié)一下改動(dòng)，給一個(gè)合適的commit message

在本次課程中，我們了解到合理重構(gòu)代碼的思路，以及如何通過豆包 MarsCode 一步步對(duì)已有代碼進(jìn)行重構(gòu)，最終完成項(xiàng)目的代碼重構(gòu)。相信聽完課的你都能有所收獲并嘗試付諸實(shí)踐，提高自己的代碼質(zhì)量以及開發(fā)效率。

點(diǎn)擊??【豆包 MarsCode 官網(wǎng)】立即體驗(yàn) AI 編程吧~