身為前端工程師,你一定經歷過這種時刻:明明邏輯都清楚,卻卡在「重複性樣板程式碼」上耗掉半小時;或是要替舊元件補測試,光看檔案就頭痛。這篇文章要談的,不是把 AI 當成會寫程式的魔法黑盒子,而是把它當成坐在你旁邊、隨叫隨到的資深搭檔——幫你打初稿、查語法、補邊界案例,真正放大你的生產力。
一、AI 輔助開發到底能幫前端做什麼
在 Vue 3 + TypeScript + Pinia 這類現代前端棧裡,AI 工具(如 Copilot、Cursor、各類程式設計助手)最適合處理「有規律但繁瑣」的活。常見場景包括:
- 智慧補全:根據上下文與變數命名,連續生成多行邏輯,不必手敲每一個括号。
- 對話式重構:把一坨混亂的元件,拆成可讀的 Composables 與子元件。
- 註釋生程式碼:寫好需求註釋,AI 補出實作骨架,你再微調。
- 自動補測試:餵入元件,產出 Vitest 單元測試初稿,補齊邊界案例。
二、步驟 1:把需求寫成清楚的註釋
最好的起手式,是先用註釋描述「這段程式要做什麼、依賴什麼」。例如我們想做一個防抖 hook:
// 建立一個 useDebounce hook,輸入一個響應式值與延遲毫秒,
// 回傳防抖後的值,依賴 Vue 3 ref 與 watch
export function useDebounce(source, delay = 300) {
const debounced = ref(source.value)
let timer
watch(source, (val) => {
clearTimeout(timer)
timer = setTimeout(() => { debounced.value = val }, delay)
})
return debounced
}把這段註釋連同函式簽名貼給 AI,它通常能一次給出可執行的實作;你只需要確認型別與副作用是否符合專案規範。
三、步驟 2:讓 AI 幫你生成單元測試初稿
測試是最常被忽略、卻最適合交給 AI 打底的一環。把上面的 hook 餵進去,請它補測試:
import { ref } from 'vue'
import { useDebounce } from './useDebounce'
it('延遲後才更新值', async () => {
const source = ref(1)
const result = useDebounce(source, 200)
source.value = 2
expect(result.value).toBe(1) // 立即讀取仍是舊值
await new Promise(r => setTimeout(r, 250))
expect(result.value).toBe(2) // 防抖後才更新
})重點: AI 產出的測試往往只覆蓋「快樂路徑」。務必自己補上「邊界情境」:delay 為 0、連續快速變動、元件卸載時是否清除 timer 等。
四、步驟 3:用對話式重構清理重複程式碼
當多個頁面都在寫相似的 API 呼叫與錯誤處理時,可以請 AI 把重複邏輯抽取成共用 composable,並保留你既有的權限寫法(例如 v-auth 與 usePermission)。重構prompt 要寫清:「不要改變對外介面、保留現有的錯誤提示文案、遵循專案的 ApiSelect 習慣」——上下文越清楚,輸出越貼近專案。
五、重點:AI 輸出必須經過「人工審查」
重點: AI 生成的程式碼只是初稿,不是最終答案。它可能引用不存在的 API、忽略你的權限規範,或在邊界條件上犯錯。提交前務必確認三件事:型別是否正確、是否觸發非預期副作用、是否與現有架構一致。
- 把 AI 當初稿機:它負責 80% 的樣板,你負責 20% 的判斷。
- prompt 寫清上下文:貼上相關型別定義與現有慣例,輸出才不會「跑題」。
- 小步驗證:別一次讓 AI 改十個檔案,改完一個就跑測試與型別檢查。
六、互動話題
互動話題:你在前端開發中最常拿 AI 來做什麼?是補樣板、寫測試,還是幫你讀懂陌生程式碼?歡迎留言分享你的用法與踩過的坑!