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