依需求選擇
| 需求 | 從這裡開始 |
|---|---|
| 加入 SWC（Speedy Web Compiler）之外的自訂轉換 | Babel |
| 強制套用程式碼品質規則 | ESLint |
| 維持一致的程式碼格式 | Prettier |
| 透過 plugin 轉換 CSS | PostCSS |
| 在持續整合（CI）中檢查樣式表 | Stylelint |
| 建立可組合的 UI 元件 | shadcn/ui |
| 採用 utility-first 樣式系統 | Tailwind CSS |
| 透過 Chrome DevTools 讓 AI agent 對擴充功能進行除錯 | Chrome DevTools MCP |
實務上的導入順序
- 先加入基礎品質工具：ESLint + Prettier。
- 再加入樣式工具：PostCSS + Stylelint（必要時再加 Tailwind）。
- 只在真的需要時，才加入框架專屬的工具。
下一步
- 在 Extension 設定 中對齊專案預設值。
- 透過 Workflows 驗證變更。