Prettier + ESLint + Rust = ?? 快，真是太快了！
多年來，Prettier 憑借其強大的功能，在開發者中贏得了廣泛的贊譽，成為了格式化 JavaScript、TypeScript、JSON 等多種代碼的首選工具。然而，隨著前端項目的日益龐大和復雜，Prettier 在性能上的不足逐漸凸顯。幸運的是，一款新興的開源 Web 開發工具鏈出現了—— Biome ，它融合了更高效的格式器和代碼檢查器，成功解決了性能瓶頸。
Biome 以 Rust 為基石，充分利用了 Rust 語言的速度和效率優勢，從而在性能上實現了對 Prettier 的顯著超越。值得一提的是，在最近一場由 Prettier 創始人發起的挑戰賽中，Biome 團隊使用 Rust 成功重構了 Prettier，充分展現了其在代碼優化和性能提升方面的能力。
作為一款集成了代碼檢查器和格式器的全能工具，Biome 堪稱基于 Rust 的 ESLint 與 Prettier 的完美結合。它為開發者提供了極致的便捷與高效，讓代碼開發變得更加輕松、流暢。
基本使用
Biome 是一款集代碼分析、格式化和檢查于一體的強大工具，具有來自 ESLint、TypeScript ESLint 和其他來源的 190 多個規則，格式化程序現在與 Prettier 的兼容性超過 96%。只需一個簡單的check命令，就能輕松完成代碼的檢查與格式化，無需在多個工具之間切換。
npx @biomejs/biome check --applyBiome 的代碼檢查器相較于 Prettier 更為前瞻，它能夠及早發現并處理問題，從而有效避免了后續可能出現的嚴重問題。Biome 能夠迅速識別出多種潛在問題，例如未使用的變量、括號位置錯誤等，使得我們能夠以更高的效率解決這些問題，進而讓代碼更加清晰有條理。
complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
? The call chain .map().flat() can be replaced with a single .flatMap() call.
1 │ const array = ["split", "the text", "into words"];
> 2 │ array.map(sentence => sentence.split(' ')).flat();
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 │
? Safe fix: Replace the chain with .flatMap().
1 1 │ const array = ["split", "the text", "into words"];
2 │ - array.map(sentence·=>·sentence.split('·')).flat();
2 │ + array.flatMap(sentence·=>·sentence.split('·'));
3 3 │核心優勢
- 速度與效率：憑借基于 Rust 語言的構建，Biome 展現出無與倫比的性能，為開發者帶來極速的代碼處理體驗。
- 簡潔易用：Biome 省去了繁雜的配置步驟，讓開發者能夠立即上手。同時，它也提供了豐富的選項，支持根據個人偏好進行細致調整。
- 強大擴展性：無論項目規模大小，Biome 都能輕松應對，保持一致的高性能表現，滿足各種復雜代碼庫的需求。
- IDE 完美集成：Biome 與主流 IDE 和代碼編輯器如 VS Code、IntelliJ IDEA 等無縫集成，同時支持通過插件和 Hook 進行功能擴展，為開發者打造順暢的編碼環境。
- 精準錯誤診斷：Biome 提供詳盡且具有上下文的錯誤報告，為開發者指明問題所在，助力快速定位并解決各類編碼難題。
無障礙檢查
在當今的 Web 開發領域，對 HTML 進行無障礙檢查已變得越來越重要。Biome 在這方面表現出色，它能夠準確地識別出可訪問性問題，并提供簡明扼要的錯誤提示以及相應的解決方案。下面來看兩個例子。
Biome 精確地指出了在div元素中需要修復的問題。在上面的例子中，當發現role="slider"的不當使用時，Biome 清晰地指明了應如何修正。
對于上面的例子，Biome 提供了修復的解決方案。這使得在開發過程中更容易識別和解決問題。
性能測試
Biome 建立了一個專門的存儲庫，用于執行與 Prettier 和 parallel-prettier 的對比基準測試。這些基準測試聚焦于不同規模和復雜度的 JavaScript 及 TypeScript 文件的格式化過程，以全面評估 Biome 的性能表現。
測試結果：
- 格式化性能：
- Biome 比 Prettier 快約 25 倍。
- Biome 比 parallel-prettier 快約 20 倍。
- Biome 比 xargs-P1 快約 20 倍。
- Biome 比 dprint 快約 1.5-2 倍。
- 即使在單線程模式下，Biome 的速度也大約是 Prettier 的 7 倍。
- Linting 性能：
- Biome 的 Linting 速度大約是 ESLint 的 15 倍。
- 在單線程模式下，Biome 的 Linting 效率也高出 ESLint 約 4 倍。
顯然，Biome 在格式化和 linting 方面的性能均顯著優于 Prettier 和 Eslint。
- 在格式化器速度上，Biome 展現出了驚人的效率。盡管 Prettier 有望通過優化提升其速度，尤其在單線程環境下，但 Biome 憑借其原生實現的優勢，依舊能夠保持領先地位，為開發者帶來更為流暢的體驗。
- 在 linting 工具方面，盡管 Biome 已經表現出色，但在構建語義模型、生成控制流圖以及匹配查詢等關鍵環節上，仍存在進一步優化的可能。此外，針對代碼修復的差異計算成本較高的問題，Biome 在這方面仍需改進，有時可能需要長達 3 秒的處理時間，這也為未來版本的優化指明了方向。
注意：
- 基于 MacBook Pro (13-inch, M1, 2020) 進行測試。
- 多線程基準測試的速度提升可能因硬件配置和使用環境的不同而有顯著變化。例如，在配備 10 個內核的 M1 Max 芯片上，Biome 的速度甚至可以比 Prettier 快 100 倍。
是否要切換到 Biome？
盡管 Biome 以其出色的速度嶄露頭角，但作為一個早期開發階段的項目，它在某些方面仍存在局限。
比如，Biome 在類型檢查 lint 規則方面的覆蓋不如 ESLint 全面。基于 Rust 的 linter 能夠快速識別語法錯誤和常見樣式問題，但在涉及依賴類型信息的問題時，它可能會力不從心。相比之下，ESLint 與 typescript-eslint 的結合提供了更強大的類型檢查功能。
截至 2024 年 1 月，Biome 已經集成了 64 條 typescript-eslint 規則，但這仍然只是整個 typescript-eslint 規則集的一部分。例如，與 typescript-eslint 相比：
- Biome 并未包含“prefer-readonly”規則。該規則的作用在于，當私有成員在構造函數外未被修改時，強制將其標記為只讀，以確保數據的不變性。這種規則對于維護數據的完整性和減少意外的狀態變更至關重要。
- Biome 也缺少了“explicit-function-return-type”規則。按照這一規則，所有函數都必須明確聲明其返回類型，無論其是否總是返回同一類型。這種明確性有助于增強代碼的類型安全性和可讀性，使得開發者能夠清晰理解函數的預期返回值。
還有一些 Biome 當前尚未包含的規則，但值得注意的是，Biome 仍在積極開發中，并且其規則庫也在不斷擴展中。
在選擇工具時，應該基于項目的具體需求進行權衡。如果對性能有嚴格要求，并且愿意在 typescript-eslint 規則方面做出一些妥協，那么 Biome 可能是一個值得考慮的選擇。然而，如果項目需要全面的類型檢查功能，那么繼續使用 Prettier 和 ESLint 可能是更穩妥的選擇，同時可以密切關注 Biome 的后續發展，以便在將來做出更合適的選擇。
與此同時，Prettier 也在不斷優化其性能。未來，Prettier 有望通過改進解析引擎、AST（抽象語法樹）表示、空白處理以及利用硬件加速技術等方式，實現顯著的速度提升。因此，如果對 Prettier 的表現感到滿意，繼續沿用它可能是一個不錯的選擇。
小結
隨著 Biome 的不斷更新和完善，它在優化 Web 應用開發方面展現出了巨大的潛力。其卓越的性能表現、出色的兼容性以及以用戶體驗為核心的易用性設計，為開發者提供了一個極具吸引力的解決方案。展望未來，我堅信 Biome 將有望在 Web 開發領域確立其作為標準工具鏈的重要地位。
