XO から Oxlint に移行した話

Transcript

1. XOからOxlintに移行した話 FE Yatai Talks vol.2 やなぎ @apple_yagi
2. やなぎ PR TIMES フロントエンドエンジニア X: @apple_yagi
3. 先々月 XO から Oxlint に移行しました
4. XO とは sindresorhus（シンドレ・ソーラス）氏が開発した Opinionated なリントルールを 備えたESLintベースのラッパーツール。フォーマッターの機能も兼ね備えており、 xo というワンコマンドでリントとフォーマットを実行することができる。 デフォルトで有効になっているリントルールは500種類ほどある。
5. XO を使用していた経緯
6. XO を使用する前の状況 当時リントルールが全く整備されていなかった 各々がルールを好きに有効・無効にしていた なぜこのルールが有効になっているかという議論がちょくちょく発生していた リントルールに詳しい人、そもそも興味がある人が少なかった
7. リントルールの整備へ そのような状況であったため、ルールを整備することになったがルールセットを 自分たちで作成、運用していくのは難しい そこであらかじめ作成されたルールセットを使用する話になった
8. ルールセットの選定 昔有名だったルールセットはほとんどメンテナンスされておらず、活発にメンテナ ンスされていたのが XO だった eslint-config-airbnb 2021年12月からリリースが止まっている eslint-config-google 2016年10月からリリースが止まっている 2026年1月からアーカイブされている eslint-config-standard 2023年5月からリリースが止まっている
9. XO を導入してどうだったか シンプルに学びが多かった 知らない JavaScript の記法を学ぶことができた 普段書いてるコードの危険性を知ることができた こんなリントルールあるんだ、と思うことが多々あった JavaScript/TypeScript の書き方のベストプラクティスを知れた XO のバージョンアップをするだけで新しい JS の記法に対応したリントルールが 勝手に追加される リントルールに興味を持つ人が増えた カスタムルールを作成したり、この書き方リントで禁止できないかな、という 話がよく出るようになった
10. めでたしめでたし
11. とはならなかった
12. XO のデメリット 遅い！！！ M2 Pro の MacBook で2分10秒ほどかかる ルールが500種類あるので遅いのは一定しょうがない ESLint には2025年8月にマルチスレッドリンティングが追加されたが、 XO は未対応 XO のアーキテクチャ上、ESLint のマルチスレッドリンティングを使うことは できない
13. Linter の実行速度の重要性 AI がコードを書く現在ではフィードバックサイクルは生産性に直結する リントやフォーマット、自動テストの速さは重要 コードを書く速度も前と比べてかなり速くなっているので Pull Request も大量に できる CI 上でリントを回す速度も生産性に直結する XO を2年間ほど運用してきて、リントルールに興味を持つようメンバーも増えて きており、XO に頼らなくても自分たちでルールセットを運用できるのではない かという感覚があった
14. そこで速度改善のために Oxlint へ移行
15. Oxlint とは Rust 製の JavaScript/TypeScript 向けリンター ドキュメント：https://oxc.rs/docs/guide/usage/linter.html Oxc という JavaScript/TypeScript 向けのツール群の1つ Oxlint 以外にも Oxfmt（Prettier 互換のフォーマッター）や、oxc-parser などが ある Oxlint の内部で oxc_parser や oxc_allocator などを使用している 最近 Type-Aware Linting が stable になった https://oxc.rs/blog/2026-07-22-type-aware-linting-stable
16. Oxlint のベンチマーク ESLint の50~100倍、同じ Rust 製のリンターである Biome の約2倍速い https://github.com/oxc-project/bench-linter 手元検証（MacBook Pro M1 Max / 64GB）: 個人プロジェクトで ESLint 約6秒 → Oxlint 約0.9秒（約6.7倍高速化） プロジェクトの規模が大きくなるほど倍率は上がっていく
17. ESLint との互換性 ESLint の主要なプラグインのルールを Rust で実装しており、すでに840ものルー ルを実装済み JS plugins という機能を使用することで既存の ESLint プラグインや JavaScript で 記述したカスタムルールを実行できる
18. XO から Oxlint への移行方法 1. XO から ESLint の設定ファイルを出力する xo --print-config=src/components/button.tsx > .eslintrc.json 2. 生成した .eslintrc.json を eslint.config.js （Flat Config）に変更する （ @oxlint/migrate は Flat Config にしか対応していないため） 3. @oxlint/migrate を実行して ESLint の設定ファイルから Oxlint の設定ファイルを 生成する $ npx @oxlint/migrate eslint.config.js --with-nursery --type-aware 4. Oxlint で未対応のルールを JS plugins を使用して有効にする この手順で約500種類のルールを一気に Oxlint へ移行 ※ XO のフォーマッタ機能（Prettier）は Oxfmt に移行してます
19. 実行速度はどれくらい速くなったのか 実行環境は MacBook M2 Pro Linter Duration Speedup vs. XO XO 2分10秒 Oxlint 27秒 x4.8
20. めでたしめでたし
21. と言いたいところですが、 困ったことがいくつかありました
22. Oxlint のルールと ESLint のルールの 挙動が違う問題
23. react/jsx-no-target-blank の例 // eslint-plugin-reactではaタグの横にdisable-lineを記述する export function Link() { return ( <a // eslint-disable-line react/jsx-no-target-blank className={styles.link} href="https://prtimes.jp/" target="_blank" > PR TIMES </a> ); } // Oxlintのnativeルールでは target='_blank' の上にdisable-lineを記述する export function Link() { return ( <a className={styles.link} href="https://prtimes.jp/" // oxlint-disable-next-line react/jsx-no-target-blank target="_blank" > PR TIMES </a> ); }
24. その他にも react/jsx-no-constructed-context-values unicorn/explicit-length-check @typescript-eslint/no-unnecessary-type-arguments @typescript-eslint/prefer-optional-chain などで false-positive なエラーが出たため、Oxlint のルールではなく、JS plugins 経 由で ESLint のルールを使用するようにした
25. Oxlint では有効にできなかった ルールもあった
26. 有効にできなかったルールたち unicorn/expiring-todo-comments ESLint の一部の API が Oxlint で実装されておらず、実行時エラーがでた Oxlint v1.63.0 で解消済み @typescript-eslint/member-ordering Oxlint の native で実装されていなかった typescript-eslint 系のルールは JS plugins で有効にすることはまだできない @typescript-eslint/naming-convention こちらも同じく
27. ESLint との併用は考えなかったのか 考えませんでした Oxlint で有効にできないルールを有効にするメリットと、ESLint を併用するコ ストを考えたときに、メリットの方が少ないという判断をした 仮に有効にできないルールがもっとあった or 必要性の高いルールが有効にでき なかった場合は Oxlint は時期尚早として、移行はしなかったと思う
28. まとめ フロントエンドのリントルール整備のために XO を導入した 500種類ほどのリントルールが有効になった環境で開発したことは学ぶことが 多く、リントルールに興味を持つきっかけになった 2年ほど XO を運用してきて、実行速度の改善のために Oxlint へ移行した 2分10秒から27秒まで約4.8倍高速化することができた ただ全てが順調だったわけではなく、Oxlint と ESLint で実装されているルールに 挙動が違うものがあったり、有効化できないものがあった