tooling-setup

此技能為現代 React 19 應用程式提供標準化且具生產就緒性的基礎。專為重視效能、類型安全與可維護性的軟體工程師與前端團隊設計。透過整合業界標準工具鏈，它消除了配置新儲存庫或更新舊專案時常見的設定負擔。

配置內容包含使用 Vite 作為建置工具，專為 React 19 優化並透過 Babel 啟用 React Compiler。它強制執行嚴格的 TypeScript 標準，利用 bundler 模式解析以確保高品質且低錯誤的程式碼。Biome 被用作一體化的高效能 linter 與格式化工具，取代 ESLint 與 Prettier 以提升開發效率。測試部分由 Vitest 處理，並支援 React Testing Library 與 MSW，以進行強健的 DOM 與 API 測試。

• 包含 React Compiler 優化建置管線的 React 19 專案腳手架

• 嚴格的 TypeScript 配置，包含 noUncheckedIndexedAccess、verbatimModuleSyntax 與 bundler 解析模式

• 用於 Linting、程式碼風格強制與自動格式化的零配置 Biome 整合

• 具備 Vitest、jsdom 與覆蓋率報告功能的專業測試基礎設施

• 用於安全用戶端配置的環境變數管理模式

• 為 Biome 與 TypeScript 推薦的 VSCode 設定，實現標準化的 IDE 整合

• 請在儲存庫初始設定階段，或重構建置管線以符合生產標準時使用此技能。

• 預期的輸入為空專案目錄或需要依賴項更新與配置標準化的既有程式碼庫。

• 輸出為完整配置的專案環境，包含 package.json 腳本、tsconfig.json、vite.config.ts 與 biome.json 配置檔。

• 確保安裝 pnpm，因為依賴項安裝腳本已針對 pnpm 套件管理器進行最佳化。

• 可透過 React DevTools 瀏覽器擴充功能觀察組件上的 Memo 標記來驗證 React Compiler。

• 請務必將敏感金鑰排除在 bundle 之外；依說明文件所示，環境變數應使用 VITE_ 作為前綴。