こんにちは。kickflow エンジニアの芳賀と申します。
Vue Fes Japan 2024 、多いに盛り上がりましたね。
私自身楽しみつつも大いに収穫があるものとなりました。

特に印象に残っていたのが oxc でした。
エコシステムの拡充が進みつつ、みんなが一度は思い描いてたであろう「Rust でツールチェインを書く」ことを実現されています。

今回はその中でも oxlint について触ってみましたので、
oxc も含めてご紹介できればと思います。

そもそも oxcとは？

The Oxidation Compiler is creating a collection of high-performance tools for JavaScript and TypeScript. Oxc is building a parser, linter, formatter, transformer, minifier, resolver ... all written in Rust.

Oxidation Compilerは、JavaScriptとTypeScriptのための高性能ツールのコレクションを作成している。 Oxcは、パーサー、リンター、フォーマッター、トランスフォーマー、ミニファイア、リゾルバ......すべてRustで書かれたものを構築している。

とのことで、ツールのコレクション集になっております。
従来ですと、バンドラはバンドラで parser や transformer を用意したり、
linter も linter で別途 parser や formatter を用意したりと、エコシステム自身が個別で用意していました。
それらのコストを一気に削減するために oxc の出番、というわけです。しかも Rust 製なので早い！
実際に本日紹介する oxlint や Rolldown という新しいバンドラに oxc が使われております。

oxlint とは？

oxc 製の linter です。 ESLint と食い合うのか、置き換えられるのか、というと現時点でそれらは意図していないとのことです。
今のところは oxlint と ESlint を共存させるのが良さそうです。 ESlint で時間をかけて linting する前に oxlint で素早く引っ掛けるものは引っ掛けてしまおう、という思想とのことです。

特徴としては、「ESLint より 50~100倍高速」という点が挙げられます。
性能差が目を引きますね。
ということで実際に体感してみることにしました。

oxlint を体感してみる

ベンチマークがあるので、それで検証してみました。実行環境は MacBook Pro M3 Max になります。

事前に以下が必要となります。

pnpm のインストール
hyperfine のインストール（brew install hyperfine）
tmp ディレクトリに VSCode リポジトリのクローン
- init.sh に記載されているのですが、動作しないため git clone --depth=1 https://github.com/microsoft/vscode.git をする必要があります

結果はこちら。

oxlint が 279ms だったのに対し、 ESlint は 25s。本当に 100 倍近くの性能差がありました。

まとめ

今回はベンチマークで oxlint の速さを体感しました。
今後プロダクトに取り入れていくためには、以下が必要そうです。

oxlint のルールの確認
oxlint と ESlint のルール重複排除
- 寄せれるものは oxlint に寄せていく
oxlint と ESlint の並行実行

少し手間ですが、ベンチマーク結果を見るとやる価値はありそうに見えます。 oxlint のルールも拡充していくので複利的に価値はあがりそうです。

将来的には oxlint ですべてが linting できると嬉しいのですが、 eslint-plugin-vue や eslint-plugin-svelte のように特別なパーサー（ template 部分のパーサーだと思います）が必要なものは対応しないとのことです。冒頭にも書きましたが、oxlint と ESlint が共存していくのが今のところベストかと思います。

改めてになりますが、Vue Fes Japan 2024 に参加し、色々な技術に触れられたのは
自身の知識の換気になったかなと思います。
今後も oxc はじめフロントエンドの技術動向を見守っていけたらと思います。