多年來(lái),Prettier 憑借其強(qiáng)大的功能,在開(kāi)發(fā)者中贏得了廣泛的贊譽(yù),成為了格式化 JavaScript、TypeScript、JSON 等多種代碼的首選工具。然而,隨著前端項(xiàng)目的日益龐大和復(fù)雜,Prettier 在性能上的不足逐漸凸顯。幸運(yùn)的是,一款新興的開(kāi)源 Web 開(kāi)發(fā)工具鏈出現(xiàn)了—— Biome ,它融合了更高效的格式器和代碼檢查器,成功解決了性能瓶頸。
Biome 以 Rust 為基石,充分利用了 Rust 語(yǔ)言的速度和效率優(yōu)勢(shì),從而在性能上實(shí)現(xiàn)了對(duì) Prettier 的顯著超越。值得一提的是,在最近一場(chǎng)由 Prettier 創(chuàng)始人發(fā)起的挑戰(zhàn)賽中,Biome 團(tuán)隊(duì)使用 Rust 成功重構(gòu)了 Prettier,充分展現(xiàn)了其在代碼優(yōu)化和性能提升方面的能力。
作為一款集成了代碼檢查器和格式器的全能工具,Biome 堪稱基于 Rust 的 ESLint 與 Prettier 的完美結(jié)合。它為開(kāi)發(fā)者提供了極致的便捷與高效,讓代碼開(kāi)發(fā)變得更加輕松、流暢。
Biome 是一款集代碼分析、格式化和檢查于一體的強(qiáng)大工具,具有來(lái)自 ESLint、TypeScript ESLint 和其他來(lái)源的 190 多個(gè)規(guī)則,格式化程序現(xiàn)在與 Prettier 的兼容性超過(guò) 96%。只需一個(gè)簡(jiǎn)單的check
命令,就能輕松完成代碼的檢查與格式化,無(wú)需在多個(gè)工具之間切換。
npx @biomejs/biome check --apply
Biome 的代碼檢查器相較于 Prettier 更為前瞻,它能夠及早發(fā)現(xiàn)并處理問(wèn)題,從而有效避免了后續(xù)可能出現(xiàn)的嚴(yán)重問(wèn)題。Biome 能夠迅速識(shí)別出多種潛在問(wèn)題,例如未使用的變量、括號(hào)位置錯(cuò)誤等,使得我們能夠以更高的效率解決這些問(wèn)題,進(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 │
在當(dāng)今的 Web 開(kāi)發(fā)領(lǐng)域,對(duì) HTML 進(jìn)行無(wú)障礙檢查已變得越來(lái)越重要。Biome 在這方面表現(xiàn)出色,它能夠準(zhǔn)確地識(shí)別出可訪問(wèn)性問(wèn)題,并提供簡(jiǎn)明扼要的錯(cuò)誤提示以及相應(yīng)的解決方案。下面來(lái)看兩個(gè)例子。
Biome 精確地指出了在div元素中需要修復(fù)的問(wèn)題。在上面的例子中,當(dāng)發(fā)現(xiàn)role="slider"的不當(dāng)使用時(shí),Biome 清晰地指明了應(yīng)如何修正。
對(duì)于上面的例子,Biome 提供了修復(fù)的解決方案。這使得在開(kāi)發(fā)過(guò)程中更容易識(shí)別和解決問(wèn)題。
Biome 建立了一個(gè)專門(mén)的存儲(chǔ)庫(kù),用于執(zhí)行與 Prettier 和 parallel-prettier 的對(duì)比基準(zhǔn)測(cè)試。這些基準(zhǔn)測(cè)試聚焦于不同規(guī)模和復(fù)雜度的 JavaScript 及 TypeScript 文件的格式化過(guò)程,以全面評(píng)估 Biome 的性能表現(xiàn)。
測(cè)試結(jié)果:
顯然,Biome 在格式化和 linting 方面的性能均顯著優(yōu)于 Prettier 和 Eslint。
注意:
- 基于 MacBook Pro (13-inch, M1, 2020) 進(jìn)行測(cè)試。
- 多線程基準(zhǔn)測(cè)試的速度提升可能因硬件配置和使用環(huán)境的不同而有顯著變化。例如,在配備 10 個(gè)內(nèi)核的 M1 Max 芯片上,Biome 的速度甚至可以比 Prettier 快 100 倍。
盡管 Biome 以其出色的速度嶄露頭角,但作為一個(gè)早期開(kāi)發(fā)階段的項(xiàng)目,它在某些方面仍存在局限。
比如,Biome 在類型檢查 lint 規(guī)則方面的覆蓋不如 ESLint 全面。基于 Rust 的 linter 能夠快速識(shí)別語(yǔ)法錯(cuò)誤和常見(jiàn)樣式問(wèn)題,但在涉及依賴類型信息的問(wèn)題時(shí),它可能會(huì)力不從心。相比之下,ESLint 與 typescript-eslint 的結(jié)合提供了更強(qiáng)大的類型檢查功能。
截至 2024 年 1 月,Biome 已經(jīng)集成了 64 條 typescript-eslint 規(guī)則,但這仍然只是整個(gè) typescript-eslint 規(guī)則集的一部分。例如,與 typescript-eslint 相比:
還有一些 Biome 當(dāng)前尚未包含的規(guī)則,但值得注意的是,Biome 仍在積極開(kāi)發(fā)中,并且其規(guī)則庫(kù)也在不斷擴(kuò)展中。
在選擇工具時(shí),應(yīng)該基于項(xiàng)目的具體需求進(jìn)行權(quán)衡。如果對(duì)性能有嚴(yán)格要求,并且愿意在 typescript-eslint 規(guī)則方面做出一些妥協(xié),那么 Biome 可能是一個(gè)值得考慮的選擇。然而,如果項(xiàng)目需要全面的類型檢查功能,那么繼續(xù)使用 Prettier 和 ESLint 可能是更穩(wěn)妥的選擇,同時(shí)可以密切關(guān)注 Biome 的后續(xù)發(fā)展,以便在將來(lái)做出更合適的選擇。
與此同時(shí),Prettier 也在不斷優(yōu)化其性能。未來(lái),Prettier 有望通過(guò)改進(jìn)解析引擎、AST(抽象語(yǔ)法樹(shù))表示、空白處理以及利用硬件加速技術(shù)等方式,實(shí)現(xiàn)顯著的速度提升。因此,如果對(duì) Prettier 的表現(xiàn)感到滿意,繼續(xù)沿用它可能是一個(gè)不錯(cuò)的選擇。
隨著 Biome 的不斷更新和完善,它在優(yōu)化 Web 應(yīng)用開(kāi)發(fā)方面展現(xiàn)出了巨大的潛力。其卓越的性能表現(xiàn)、出色的兼容性以及以用戶體驗(yàn)為核心的易用性設(shè)計(jì),為開(kāi)發(fā)者提供了一個(gè)極具吸引力的解決方案。展望未來(lái),我堅(jiān)信 Biome 將有望在 Web 開(kāi)發(fā)領(lǐng)域確立其作為標(biāo)準(zhǔn)工具鏈的重要地位。
本文鏈接:http://www.www897cc.com/showinfo-26-65872-0.htmlPrettier + ESLint + Rust = ?? 快,真是太快了!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com