Oxlintのカスタムルールの現況

Findyさんの「フロントエンド開発はどこまで速くなるのか？〜Oxcで考えるツールチェーン〜」の発表資料です！
https://findy.connpass.com/event/391160/

Transcript

1. Oxlintのカスタムルールの現況 2026-6-2 Findy フロントエンド開発はどこまで速くなるのか？〜Oxcで考えるツールチェーン〜 @syumai
2. syumai X: @__syumai Website: https://syum.ai © LayerX Inc. whoami LayerX ソフトウェアエンジニア バクラクヘルプデスク エージェントを開発中 主にTypeScriptを書いてます ECMAScript 仕様輪読会 / Asakusa.go 主催
3. https://speakerdeck.com/syumai/how-oxlint-calls-tsgolint © LayerX Inc. 3
4. 今日話すこと © LayerX Inc. Oxlintとは OxlintのJS Pluginとは JS Pluginの書き方 JS Pluginのパフォーマンス type-awareなカスタムルール実装についての現況 4
5. Oxlintとは © LayerX Inc. Oxcプロジェクトのlinter https://oxc.rs/ Rust製の高速なJavaScript向けTool chain Oxcはlinter, formatter, parser, transformerなどを含む ESLint互換が特徴 設定はESLint v8の形式 (Flat configは非対応、migration toolあり) ESLintのJS pluginも動作する (v9以降のAPIをサポート) 開発元はViteを開発するVoidZero (https://voidzero.dev/) OxlintはVite+の vp check サブコマンドとして取り込まれている 5
6. Oxlintに標準搭載のルール © LayerX Inc. 全813ルール (type-aware ruleを含む) が実装済み ESLint本体以外からもルールを移植してきている React, Next.js, Vue.js などの主要なlintルールを初めからサポート 基本的には、Oxlint単体で済むように設計されている 6
7. https://oxc.rs/docs/guide/usage/linter/rules.html © LayerX Inc. 7
8. https://oxc.rs/docs/guide/usage/linter/rules.html © LayerX Inc. 8
9. Oxlintの組み込みプラグイン .oxlintrc.json の例 © LayerX Inc. Oxlintの設定の plugins は、外部packageからのルール追加を意味しない 組み込みプラグインの中でどれを有効化するかの設定 例: import, react, jsx-a11y, jest, unicorn ... 9
10. Oxlint組み込みでないルールを追加するにはどうすれ ばいいのか？
11. → JS Pluginを使う！
12. OxlintのJS Pluginとは © LayerX Inc. Oxlint上で動作する、ESLint互換のカスタムルール記述用の機能 ESLint v9+ と互換性がある 現在Alpha版 JS Pluginの追加方法 プロジェクトの独自ルールとして記述し、追加 npm経由でインストールして追加 既存のESLint pluginは基本的に動作するらしい 12
13. JS Pluginの追加方法 https://oxc.rs/docs/guide/usage/linter/js-plugins.html © LayerX Inc. 13
14. https://oxc.rs/docs/guide/usage/linter/js-plugins.html © LayerX Inc. 14
15. JS Pluginの書き方 © LayerX Inc. ESLintのカスタムルールと同じ Oxlintのドキュメントでも、ESLint側のドキュメントを参照するように書かれている https://eslint.org/docs/latest/extend/custom-rules 将来的な最適化を見込んだ、代替API (Alternative API) も用意されている createOnce 関数による初期化処理の削減 Visitor objectの初期化を1回にすることで、関心のあるAST Nodeの種類を限定できる before / after hookによる、リソース確保 / 解放処理の追加 代替APIはESLintにも対応しているので、ESLint pluginをOxlintの代替APIで実装して公開することで、両対応し つつ、Oxlint向けには最適化を行える ESLintにはこの最適化の影響はない 15
16. https://oxc.rs/docs/guide/usage/linter/writing-js-plugins.html © LayerX Inc. 16
17. © LayerX Inc. 17
18. JS Pluginのパフォーマンスは？
19. JS Pluginのパフォーマンス © LayerX Inc. Oxc公式のベンチマークのリポジトリをベースに実施 https://github.com/oxc-project/bench-linter をforkした 実施した内容は https://github.com/syumai/oxc-bench-linter-custom で確認できます 19
20. JS Pluginのパフォーマンス © LayerX Inc. 実際のユースケースに近い形で計測したかったので、以下を実施 OxlintとESLintで共通のルールを有効化、カスタムルール / JS Pluginなしで計測 共通ルールに加え、1つカスタムルール / JS Pluginを追加して計測 共通ルールに加え、3つカスタムルール / JS Pluginを追加して計測 共通ルールに加え、10個カスタムルール / JS Pluginを追加して計測 ベンチマーク実施の対象はVS Codeのリポジトリ 各シナリオを10回ずつ実行し、平均時間を計測 20
21. ベンチマーク結果 Custom rules Oxlint JS Plugin ESLint Custom Rule Speedup Oxlint delta from 0 rules ESLint delta from 0 rules 0 0.368 s 40.931 s 111.14x - - 1 3.803 s 41.000 s 10.78x +3.435 s +0.069 s 3 4.187 s 41.003 s 9.79x +3.819 s +0.072 s 10 5.560 s 41.158 s 7.40x +5.192 s +0.227 s © LayerX Inc. 21
22. ベンチマーク結果のまとめ © LayerX Inc. JS Pluginなし → JS Pluginありの変化だけで、3.4秒程度増加 JS Pluginの2つ目の追加以降は、0.2秒程度ずつの増加 ESLintのカスタムルールの方が、ルール追加時の増加時間は少ない 10個追加して0.2秒程度 ベースの実行時間に差がありすぎるので、JS Plugin追加で遅くなる分は許容可能な範 囲 22
23. 型情報を使ったカスタムルールは？
24. 型情報を使ったカスタムルールは？ © LayerX Inc. Oxlintでtypescript-eslintのような型情報を使ったルールを実行するには、現状tsgolint を使う選択肢しか基本的にない tsgolintのカスタムルールを追加するには、本体に手を入れるしかない 詳しくは、TSKaigiの以下の資料を参照ください 「Oxlintはいかにしてtsgolintのlint ruleを呼び出しているのか」 高橋 佑太さんの「次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解」 現状は、typescript-eslintを部分的に残すのが現実的 24
25. https://corsa-bind.void.app/ © LayerX Inc. 25
26. corsa-bind © LayerX Inc. ubugeeeiさんが進めている、現在注目のプロジェクト typescript-goのCorsa APIを効率的に扱うためのバインディングを提供するライブラリ tsgolintのようなtypescript-goの内部実装に依存する実装を避けつつ、型情報が入手できる このcorsa-bindでOxlintサポートのcorsa-oxlintが追加された Corsa API経由で、型情報を使ったOxlint JS Pluginを記述可能 corsa-oxlintのステータスは early WIP とのこと https://corsa-bind.void.app/oxlint_guide/index.html 26
27. まとめ © LayerX Inc. Oxlintは、組み込みのlintルールを豊富に備えている カスタムルールとして、ESLint互換のJS Pluginを追加できる JS Pluginは、直接記述、npm経由の追加の両方をサポート JS Plugin自体のパフォーマンスは現状それほど高くないが、lint実行全体で見ると圧倒 的に速い JS Pluginの最適化も将来的に見込まれている 型情報を使ったカスタムルールについては、現状有力と言える選択肢がまだ無い状況 27