建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
成都創(chuàng)新互聯(lián)公司成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站開(kāi)發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),響應(yīng)式網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:028-86922220
最近，一款基于Rust的linter工具Oxlint在國(guó)外前端圈引起熱烈討論，很多大佬給出了高度評(píng)價(jià)。
他相比于老大哥Eslint有什么優(yōu)勢(shì)？未來(lái)他會(huì)取代老大哥么？本文讓我們來(lái)聊聊這個(gè)話題。
Oxc與Oxlint
oxlint是Oxc項(xiàng)目旗下的一款產(chǎn)品，Oxc作為一款Rust實(shí)現(xiàn)的前端工具鏈集合，包括：
- linter，即oxlint，對(duì)標(biāo)Eslint，本文的主角。
- Parser，即oxc_parser，用于解析.js(x)和.ts(x)，對(duì)標(biāo)swc，基準(zhǔn)測(cè)試[1]據(jù)稱比swc快2倍。
- Resolver，解析esm、cjs文件路徑，對(duì)標(biāo)webpack/enhanced-resolve，基準(zhǔn)測(cè)試[2]據(jù)稱比webpack快28倍。
- formatter，對(duì)標(biāo)Prettier，還未公布。
- transpiler，對(duì)標(biāo)babel，用于將高級(jí)語(yǔ)法轉(zhuǎn)譯為低級(jí)語(yǔ)法，還未公布。
- minifier，代碼壓縮工具，還未公布。
與Oxc抱有同樣設(shè)計(jì)理念（都是基于Rust開(kāi)發(fā)的工具鏈工具）的還有Biome與Ruff，其中：
- Biome比較命途多舛。他的前身是Rome，由Babel作者「Sebastian McKenzie」開(kāi)發(fā)，和Oxc一樣目標(biāo)語(yǔ)言是JS。
- Ruff的目標(biāo)語(yǔ)言是Python。
Oxlint的介紹
Oxlint之所以引發(fā)熱烈討論，主要原因是「他的性能太炸裂了」。
尤大用Oxlint跑了Vue3倉(cāng)庫(kù)，～590個(gè)文件跑～200條規(guī)則，僅用時(shí)50ms。
我自己（蘋果M1 pro，32G）跑一個(gè)大概50個(gè)文件的小項(xiàng)目，也只用了18ms，官方宣稱的在基準(zhǔn)測(cè)試中比Eslint快50～100倍果然不是空穴來(lái)風(fēng)。
當(dāng)然，除了「性能優(yōu)勢(shì)」，Oxlint與老大哥Eslint還有很多區(qū)別。接下來(lái)我們從3個(gè)角度對(duì)比Oxlint與Eslint：
- 易用性
- 診斷可讀性
- 參與成本
易用性
Eslint誕生于2013年，他相比于競(jìng)爭(zhēng)對(duì)手（JSHint、JSHint）最大的優(yōu)勢(shì)是「提供了大量可選的規(guī)則，并且一些場(chǎng)景下對(duì)于不符合規(guī)則的代碼可以自動(dòng)修復(fù)」。
但是，隨著時(shí)代的進(jìn)步，他的優(yōu)勢(shì)逐漸變?yōu)榱觿?shì) —— 開(kāi)發(fā)者不再需要大量自定義規(guī)則，而是需要「開(kāi)箱即用的規(guī)則集的最佳實(shí)踐」。在此理念下誕生了很多新產(chǎn)品，比如：
- 僅針對(duì)「代碼風(fēng)格」做出檢查和格式化的Prettier。
- antfu定制版規(guī)則集eslint-plugin-antfu[3]。
Oxlint吸取了上述產(chǎn)品的優(yōu)點(diǎn)，默認(rèn)提供了一套開(kāi)箱即用的規(guī)則集。這套規(guī)則集主要關(guān)注「代碼的正確性」（比如「語(yǔ)法錯(cuò)誤」、「冗余代碼」、「容易造成誤解的語(yǔ)法」）而不是「代碼的細(xì)節(jié)優(yōu)化」（比如語(yǔ)法的性能、風(fēng)格）。
所以，你只需要在項(xiàng)目執(zhí)行如下命令，就能滿足常規(guī)的校驗(yàn)：
npx oxlint@latest從易用性上看，Oxlint比Eslint強(qiáng)很多。
診斷可讀性
當(dāng)linter診斷出問(wèn)題后，會(huì)給開(kāi)發(fā)者提供相關(guān)信息。Eslint給的信息通常比較簡(jiǎn)短，只告訴你「為什么報(bào)錯(cuò)」。比如對(duì)于如下代碼：
let a;通過(guò)信息「a is defined but never used」可以知道報(bào)錯(cuò)原因是「a定義了但未使用」。
但如果是更復(fù)雜的規(guī)則，簡(jiǎn)短的信息可能并不能直觀表達(dá)「具體哪里報(bào)錯(cuò)」以及「解決辦法」，很多時(shí)候我們還需要查下規(guī)則文檔，看看這條規(guī)則的具體含義，再結(jié)合報(bào)錯(cuò)的代碼分析。
相比于Eslint，Oxlint的信息更直觀與準(zhǔn)確。舉個(gè)例子，下面的代碼執(zhí)行后會(huì)得到「數(shù)字翻倍的數(shù)組」：
const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((accumulator, current) => {
return [...accumulator, current * 2];
}, []);
// [ 2, 4, 6, 8, 10 ]
console.log(result);這里每次執(zhí)行reduce回調(diào)都會(huì)將數(shù)組展開(kāi)，當(dāng)數(shù)組比較長(zhǎng)時(shí)會(huì)造成性能問(wèn)題。
對(duì)此，Oxlint的信息包括三部分：
- 為什么報(bào)錯(cuò)
- 具體哪里報(bào)錯(cuò)
- 怎么解決
這段示例代碼比較簡(jiǎn)短，可能體現(xiàn)不出Oxlint信息的價(jià)值，讓我們看看下面這段報(bào)錯(cuò)信息：
一眼就能看出是哪個(gè)reduce（紫色字體）中的哪個(gè)展開(kāi)操作（青色字體）引發(fā)的問(wèn)題。
雖然有些同學(xué)會(huì)說(shuō)：如果項(xiàng)目大了，lint信息這么詳細(xì)看的人腦袋痛。
但我們要知道 —— 「你能提供，但我不用」和「你不能提供」完全是兩個(gè)概念。
從「診斷可讀性」看，Oxlint比Eslint更優(yōu)秀。
參與成本
「參與成本」是指開(kāi)發(fā)者自定義規(guī)則的成本。Oxlint是Rust編寫的，如果開(kāi)發(fā)者自定義規(guī)則也得寫Rust，那成本就太高了。相比之下，Eslint的規(guī)則都是JS編寫的，成本低很多。
Oxlint從2個(gè)角度出發(fā)嘗試解決這個(gè)問(wèn)題：
你別自己寫了，官方將常用的規(guī)則都寫好了。
截止本文發(fā)稿，官方實(shí)現(xiàn)了200個(gè)左右的規(guī)則，從名字就能看出，這些規(guī)則是從各個(gè)常見(jiàn)庫(kù)的最佳實(shí)踐中摘出來(lái)的，比如：
- jest: no-confusing-set-timeout
- react: jsx-no-duplicate-props
- eslint: default-case-last
- typescript: no-unnecessary-type-constraint
實(shí)現(xiàn)一套專門編寫規(guī)則的DSL。
Oxlint正在研究開(kāi)發(fā)一套DSL，專門用來(lái)編寫規(guī)則。至于這套DSL何時(shí)問(wèn)世、好不好用暫不得知。
從「參與成本」角度看，Eslint完勝。
Oxlint會(huì)取代Eslint么？
基于已知的現(xiàn)狀 —— Oxlint規(guī)則參與成本高于Eslint，只要這個(gè)問(wèn)題不解決，就一定存在某些Eslint支持，但Oxlint不支持的規(guī)則。所以，要完全取代Eslint，短期內(nèi)并不現(xiàn)實(shí)。
但是，就像Vite之于Webpack，前者也沒(méi)有實(shí)現(xiàn)后者的所有功能。但只要滿足開(kāi)發(fā)者最常見(jiàn)的90%需求且體驗(yàn)更好，就能從Webpack手中搶走大部分用戶。
Oxlint顯然也是這么做的 —— 他們建議開(kāi)發(fā)者在lint-staged或CI設(shè)置中先運(yùn)行Oxlint再運(yùn)行ESLint。這樣，大部分常見(jiàn)問(wèn)題還沒(méi)走到Eslint這一步就被Oxlint擋住了。
這種方式能顯著提高lint流程的速度，且上手成本極低。所以很可能在開(kāi)發(fā)者中快速普及開(kāi)。
當(dāng)這種方式普及后，隨著Oxlint規(guī)則覆蓋度與日俱增，會(huì)在「最常見(jiàn)的90%需求」中逐漸取代Eslint。
屆時(shí)，會(huì)形成一種Oxlint為主，Eslint為輔（處理少量特殊規(guī)則）的局面。
從這個(gè)角度看，Oxlint的贏面很大。
后記
雖然Oxlint有著不錯(cuò)的前景，但當(dāng)前他還存在一些不足，比如：
- 框架語(yǔ)法支持度不高
Oxlint原生支持js(x)、ts(x)，但不支持Svelte、Vue模版語(yǔ)法。
- vscode插件還不穩(wěn)定，有bug
比如下面代碼中警告的應(yīng)該是第1、3行，但是第2行也被標(biāo)記了。
相信隨著開(kāi)發(fā)團(tuán)隊(duì)的持續(xù)投入，社區(qū)生態(tài)的形成，Oxlint及其背后的Oxc會(huì)有不錯(cuò)的未來(lái)。
參考資料
[1]基準(zhǔn)測(cè)試:https://github.com/oxc-project/bench-javascript-parser-written-in-rust。
[2]基準(zhǔn)測(cè)試:https://github.com/oxc-project/bench-nodejs-resolver。
[3]eslint-plugin-antfu:https://github.com/antfu/eslint-plugin-antfu?tab=readme-ov-file。
分享題目：Eslint會(huì)被Oxlint干掉嗎？
網(wǎng)站地址：http://m.5511xx.com/article/dpedpjs.html
