ベータリリースされたOxlintを使ってみる
はじめに
JavaScript プロジェクトのリンターはデファクトスタンダードとして ESLint が使われてきました。しかし最近では実行速度の遅さや、Flat Config への移行コストなどが課題として挙げられるようになり ESLint に代わる次世代のリンターに注目が集まりつつあります。
そんな中、先日 Oxc から 「Oxlint」というリンターがベータリリースされました。Oxlint は、「ESLint より 50〜100 倍高速」と掲げており一度使ってみたいと思ったので、実際に手元で試してみることにしました。
この記事では、Oxlint の全体像と実際に使ってみた感想をまとめています。Oxlint を初めて耳にした方や、新しいリンターへの移行を検討している方に向けて、参考になればと思います。
Oxc のビジョン
JavaScript プロジェクトはバンドラー、リンター、パーサーなどなど構成するツールが多くなってきています。それぞれが異なる目的を持ちつつ、重なり合う領域もあり、設定や依存関係の管理は年々複雑になっています。
そんな中で 「JavaScript プロジェクトに関わるツールをひとつのツールでまるっと置き換えてしまおう」という構想を掲げているのが、「Oxc」 です。Oxlint は、Oxc プロジェクトでもリンターに特化したツール・機能です。Oxlint は ESLint と互換性を保ちながらも、ESLint のパフォーマンス問題を解消する代替ツールを目指しています。
今回のベータリリースでのアップデート内容
以前から Oxlint は利用可能な状態でリリースされていて、今回のベータリリースによる変更点は以下になります。
- 前回リリースの最大 2 倍の速度向上
- 追加インストール不要で 500 以上のルールがビルトインされた
- 以下のプラグインのルールをサポート
-
typescript
,unicorn
,react
,react-perf
,nextjs
,import
,jsdoc
,jsx-a11y
,node
,promise
,jest
,vitest
-
-
.oxlintrc.json
による設定をサポート(ネストさせた設定も可能になった) - 追加設定不要で
.astro
,.svelte
,.vue
ファイル内の<script>
部分の解析が可能になった - 自動修正が可能になった (Automatic Fixes)
ビルドインされたルールが 205 個から 502 個に増えたにもかかわらず、速度が上がっているとのことです。
実際に触ってみる
Oxlint はインストール不要で npx から実行できるようになっています。
npx oxlint@latest
以下、手元で実行した結果を抜粋しました。
% npx oxlint@latest
⚠ eslint(no-unused-vars): Catch parameter 'error' is caught but never used.
╭─[src/app/api/getStation/[address]/route.ts:10:12]
9 │ return NextResponse.json(data);
10 │ } catch (error) {
· ──┬──
· ╰── 'error' is declared here
11 │ const response: StationResponse = {
╰────
help: Consider handling this error.
...
⚠ eslint(no-useless-rename): Do not rename import, export, or destructured assignments to the same name
╭─[src/hooks/useSearchPlaces.ts:33:5]
32 │ error: error,
33 │ isLoading: isLoading,
· ────────────────────
34 │ } = useSWR<Partial<PlaceData>[], Error>(getUrl(searchParams, latLng), fetcher);
╰────
help: Use the variable's original name or rename it to a different name
Found 6 warnings and 0 errors.
Finished in 27ms on 25 files with 99 rules using 8 threads.
なんの設定もいらずデフォルトでunused imports
やunused variables
などの ESLint 互換のルールが有効になっているので、1 つのコマンド実行ですぐに使うことができ、私が試した環境だとコマンド実行してから 2 秒ほどでリンターの実行結果を見ることができました。
また今回のベータリリースで.oxlintrc.json
に設定を書いてデフォルト設定をカスタムすることができるようになりました。
そして段階的に ESLint から移行したい場合は、eslint-plugin-oxlint を使うことで、Oxlint でサポートされている ESLint のルールを無効にして、Oxlint にルールがあれば Oxlint、なければ ESLint で検出することができるようになっています。
良いと思ったこと
実際に使ってみて良いと思った点として、
- インストール、設定が不要ですぐに使えること
- 体感レベルで実行速度の違いを感じられること
- VSCode 拡張機能をすでに動作させられていること
の 3 点を感じました。
設定いらずで爆速でリンターを実行できる点に Oxc の「これまでいろいろな設定をしなければならなかったものを置き換えて簡略化する」という思想が反映されていると感じました。
VSCode 拡張機能に関しても、ロードマップにはこれからサポートを改善していくとありましたが、すでに Oxc 公式の VSCode 拡張機能があり、私が試したときは Warning や Error を表示できていました。
これから期待したいこと
まだ本番投入には踏み切れない点として、ESLint の豊富なエコシステムにまだ追いついていないことを感じました。
昨今 Tailwind CSS が使われる機会が多いので、Tailwind CSS のプラグインがあると、Oxlint が採用されるケースが増えてくるかなと思いました。
最後に
現時点ではエコシステムがまだ整っておらず、日常開発において ESLint の代替として完全移行するには早いというのが正直な印象ではありますが、Biome と並んでリンターの次の選択肢になり得ると思いました。
Oxlint は単なるリンターではなく、Oxc という包括的な ツールチェーンの中の一部です。今後はリンターにとどまらず、パーサーやバンドラー、フォーマッターなども含めた Oxc 全体の進化をキャッチアップしていきたいです。
Discussion