Slide 1

Slide 1 text

最近の推しリンター Oxlintをご紹介 ツナギメオフライン ベンキョウカイ #5 やなぎ @apple_yagi

Slide 2

Slide 2 text

やなぎ PR TIMES フロントエンドエンジニア X:@apple_yagi セブンで売っているデカ豚ラーメンに ハマってます

Slide 3

Slide 3 text

AI がコードを書く時代になり、ガードレールとしてのリンターの重要性は増して いる リントルールの豊富さ、カスタム性の重要性 またガードレールとして機能するだけではなく、フィードバックの速さも重要 リントの実行時間が伸びるほど生産性が低下する そのため、品質を担保でき、かつ実行時間の短いリンターが必要とされている この2つを持ち合わせたリンターが Oxlint 昨今のリンターの重要性

Slide 4

Slide 4 text

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 などを使用している Oxlintとは

Slide 5

Slide 5 text

実行速度 組み込みのプラグイン JS Plugins Type-Aware Linting 開発スピード Oxlint の推しポイント

Slide 6

Slide 6 text

実行速度 組み込みのプラグイン JS Plugins Type-Aware Linting 開発スピード Oxlint の推しポイント

Slide 7

Slide 7 text

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倍高速化) プロジェクトの規模が大きくなるほど倍率は上がっていく Oxlint のベンチマーク

Slide 8

Slide 8 text

実行速度 組み込みのプラグイン JS Plugins Type-Aware Linting 開発スピード Oxlint の推しポイント

Slide 9

Slide 9 text

690以上のルールが Rust で実装されている ESLint のコアルールや、 eslint-plugin- import 、 eslint-plugin-react 、 @next/eslint-plugin-next などよく使う プラグインのルールが実装されている Vue.js は script タグの部分のみ対応済みで、 Svelte などは今後対応予定 組み込みのプラグイン

Slide 10

Slide 10 text

.oxlintrc.json に以下のような設定を書くことで有効にできる { "$schema": "./node_modules/oxlint/configuration_schema.json", "plugins": [ "eslint", "import", "jsx-a11y", "react", "react-perf", "typescript", "vitest" ], "rules": { "import/no-named-export": "off", "react/react-in-jsx-scope": "off", "import/prefer-default-export": "off" } } 組み込みのプラグインの使用例

Slide 11

Slide 11 text

ESLint だと eslint-plugin-react などを依存関係として追加する必要があるが Oxlint の場合はその必要がない 昨今のサプライチェーンアタックのリスク軽減になるかも これらのルールは Rust で記述されているため、実行速度は ESLint プラグインよ りも高速に動作するメリットもある 組み込みプラグインのメリット

Slide 12

Slide 12 text

実行速度 組み込みのプラグイン JS Plugins Type-Aware Linting 開発スピード Oxlint の推しポイント

Slide 13

Slide 13 text

JavaScript で記述されたプラグイン、カスタムルールを実行する機能(Technical preview) Oxlint のプラグインAPIは ESLint v9 以上と互換性があるので既存の ESLint プ ラグインがほぼ動く TypeScript の型情報が必要な場合や、Svelte、Vue などのファイルは動かな い 対応状況:https://github.com/oxc-project/oxc/discussions/14862 JavaScript でプラグインを書いても Rust <-> JavaScript 間のオーバーヘッドが少 なくなるように設計されている https://github.com/oxc-project/oxc/issues/2409 JS Plugins とは

Slide 14

Slide 14 text

@tanstack/eslint-plugin-query を使用する例 { "$schema": "./node_modules/oxlint/configuration_schema.json", "jsPlugins": ["@tanstack/eslint-plugin-query"], "rules": { // 現状 recommended などの preset を一括で有効にすることはできないので1つずつ指定する必要がある "@tanstack/query/exhaustive-deps": "error", "@tanstack/query/no-rest-destructuring": "warn", "@tanstack/query/stable-query-client": "error", "@tanstack/query/no-unstable-deps": "error", "@tanstack/query/infinite-query-property-order": "error", "@tanstack/query/no-void-query-fn": "error", "@tanstack/query/mutation-property-order": "error", }, } 既存のプラグインや、カスタムルールがそのまま動くため、ESLint からの移行がしや すい JS Plugins の使用例

Slide 15

Slide 15 text

npx @oxlint/migrate を実行することで既存の eslint config から oxlint config を 生成することができる https://github.com/oxc-project/oxlint-migrate Oxlint でサポートされていないプラグイン、カスタムルールを使用する場合を想 定して ESLint との併用も考えられている https://github.com/oxc-project/eslint-plugin-oxlint ESLint からの移行パス

Slide 16

Slide 16 text

実行速度 組み込みのプラグイン JS Plugins Type-Aware Linting 開発スピード Oxlint の推しポイント

Slide 17

Slide 17 text

TypeScript の型情報を使用したリント機能のこと ESLint では typescript-eslint を使用することで機能するが、内部で TypeScript を使用しているため、速度が遅いという問題がある Oxlint では typescript-go(tsgo)を使用した tsgolint を使用して、型情報を利用 したリントの高速化を行なっている(alpha) 実行コマンド: oxlint --type-aware tsgo はまだ型情報を取得するAPIを公開していないため、非公開のAPIを無 理やり使用して実装されている Type-Aware Linting とは

Slide 18

Slide 18 text

Biome にも Type-Aware Linting があるが TypeScript / tsgo を使用せず、独自に型 推論を行なっている TypeScript コンパイラの挙動を完全に再現できてはいないが、 noFloatingPromises のルールでは85%ほどは網羅できているとのこと https://biomejs.dev/blog/biome-v2-1/#improved-type-inference Oxlint は tsgo の非公開APIを使用しているため、tsgo の変更に追従していけるの かどうかが問題になるが、Biome は自前で実装しているため、精度はやや劣るが 運用の安定性は高そう Biome の Type-Aware Linting との違い

Slide 19

Slide 19 text

実行速度 組み込みのプラグイン JS Plugins Type-Aware Linting 開発スピード Oxlint の推しポイント

Slide 20

Slide 20 text

週に1 ~ 2回マイナーバージョンが上がっており、直近1週間(2026/02/18〜 2026/02/24)でマージされた Pull Request は109個 VoidZero という会社が開発しており、フルタイムメンテナーの存在が大きい VoidZero は Vue.js / Vite を開発したEvan Youさんが立ち上げた会社 またクォーターごとに何をやるのかが明確になっているため、今後追加・改善 される機能を先にキャッチアップできるのも嬉しい Plan for 2026 Q1 (Jan - Mar) 開発スピードの速さ

Slide 21

Slide 21 text

ESLint の50~100倍、同じ Rust 製のリンターである Biome の約2倍速い 組み込みのプラグインが多数実装されており、依存関係を追加しなくても様々な ルールを有効にできる JS Plugins を使用することで既存の ESLint プラグインや、カスタムルールが動作 する tsgo を使用した Type-Aware Linting が実装されており、型情報を使用したリント ルールも高速に実行できる 毎週多くの新規のリントルールや機能が追加されている まとめ

Slide 22

Slide 22 text

宣伝

Slide 23

Slide 23 text

No content