OxlintでJavaScript/TypeScriptを超高速Lint - ESLintの50〜100倍高速

フロントエンド開発において、Lintツールは欠かせない存在です。しかし、プロジェクトが大きくなるにつれて、ESLintの実行時間が長くなり、開発体験が悪化することがあります。

Oxlintは、Rustで書かれた超高速なLinterで、ESLintの50〜100倍高速です。この記事では、Oxlintの特徴から実践的な使い方まで、詳しく解説します。

Oxlintとは？

Oxlintは、Oxc（Oxidation Compiler）プロジェクトの一部として開発されているJavaScript/TypeScript Linterです。

主な特徴

  1. 超高速: ESLintの50〜100倍高速（Rustで実装）
  2. ゼロコンフィグ: デフォルトで実用的なルールセット
  3. ESLint互換: 多くのESLintルールをサポート
  4. TypeScript対応: TypeScript固有のルールもサポート
  5. 軽量: 追加の依存関係なし
  6. インクリメンタル: 変更されたファイルのみをLint

なぜOxlintを使うのか？

ESLintの問題

  • 大規模プロジェクトでは遅い
  • プラグインを入れるとさらに遅くなる
  • Node.js上で動作（シングルスレッド）
  • 設定が複雑

Oxlintの解決

  • Rustで実装されているため超高速
  • デフォルトで実用的なルール
  • 並列処理で複数ファイルを同時にLint
  • シンプルな設定

ベンチマーク

公式のベンチマークによると、以下のような結果が出ています。

  • 小規模プロジェクト（〜100ファイル）: 10〜20倍高速
  • 中規模プロジェクト（〜1000ファイル）: 50倍高速
  • 大規模プロジェクト（10000ファイル以上）: 100倍高速

例えば、ESLintで30秒かかるプロジェクトが、Oxlintでは0.3秒で終わります。

インストール

npm

npm install -D oxlint

pnpm

pnpm add -D oxlint

yarn

yarn add -D oxlint

Cargo（Rustユーザー向け）

cargo install oxlint

基本的な使い方

ファイルのLint

# 単一ファイル
npx oxlint src/index.ts

# ディレクトリ全体
npx oxlint src/

# 複数のパス
npx oxlint src/ tests/

# カレントディレクトリ
npx oxlint .

自動修正

# 自動修正可能な問題を修正
npx oxlint --fix src/

出力フォーマット

# デフォルト（人間が読みやすい形式）
npx oxlint src/

# JSON形式
npx oxlint --format json src/

# Unix形式
npx oxlint --format unix src/

# GitHub Actions形式
npx oxlint --format github src/

ルールの設定

デフォルトルール

Oxlintは、デフォルトで実用的なルールセットを提供しています。

  • ESLintの推奨ルール
  • TypeScript ESLintの推奨ルール
  • React/JSXのルール
  • Importのルール

ルールの無効化

特定のルールを無効にするには、コメントを使います。

// ファイル全体でルールを無効化
/* oxlint-disable no-unused-vars */

function hello() {
  const unused = "I'm not used";
  console.log("Hello");
}

// 次の行だけ無効化
// oxlint-disable-next-line no-console
console.log("Debug message");

// 複数行を無効化
/* oxlint-disable */
console.log("Debug 1");
console.log("Debug 2");
/* oxlint-enable */

// 特定のルールだけ無効化
// oxlint-disable-next-line no-console, no-debugger
console.log("Debug");

設定ファイル

Oxlintは、.oxlintrc.jsonファイルで設定をカスタマイズできます。

{
  "rules": {
    "no-console": "warn",
    "no-debugger": "error",
    "no-unused-vars": "error"
  },
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "globals": {
    "myGlobal": "readonly"
  }
}

ルールのカテゴリ

{
  "categories": {
    "correctness": "error",
    "suspicious": "warn",
    "pedantic": "off"
  }
}
  • correctness: 明らかなバグ
  • suspicious: 怪しいコード
  • pedantic: 厳格なスタイルチェック

ESLintとの比較

速度

# ESLint（大規模プロジェクト）
$ time eslint src/
eslint src/  28.34s user 1.23s system 98% cpu 30.125 total

# Oxlint（同じプロジェクト）
$ time oxlint src/
oxlint src/  0.28s user 0.05s system 245% cpu 0.134 total

約224倍高速！

ルールのサポート

Oxlintは、ESLintの主要なルールをサポートしています。

サポート済み

  • no-unused-vars
  • no-console
  • no-debugger
  • eqeqeq
  • no-empty
  • no-constant-condition
  • no-duplicate-case
  • など多数

未サポート

  • 一部のスタイル系ルール（Prettierを推奨）
  • カスタムプラグイン

設定の互換性

Oxlintは、ESLintの設定ファイルをそのまま読み込むことはできませんが、多くのルールは同じ名前で使えます。

// .eslintrc.js
module.exports = {
  rules: {
    "no-console": "warn",
    "no-unused-vars": "error"
  }
};
// .oxlintrc.json
{
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error"
  }
}

package.jsonスクリプト

{
  "scripts": {
    "lint": "oxlint src/",
    "lint:fix": "oxlint --fix src/",
    "lint:json": "oxlint --format json src/ > lint-results.json"
  }
}

CIでの使用

GitHub Actions

name: Lint

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Run Oxlint
        run: npx oxlint --format github src/

GitLab CI

lint:
  image: node:18
  script:
    - npm ci
    - npx oxlint src/

エディタ統合

VS Code

Oxlint VS Code拡張機能をインストールします。

code --install-extension oxc.oxc-vscode

設定:

{
  "oxc.enable": true,
  "oxc.run": "onSave",
  "oxc.trace.server": "messages"
}

Neovim

-- nvim-lspconfig
require'lspconfig'.oxc.setup{}

ESLintとの併用

OxlintとESLintを併用することもできます。

戦略1: Oxlintを先に実行

{
  "scripts": {
    "lint": "oxlint src/ && eslint src/"
  }
}

Oxlintで高速に主要なエラーをチェックし、ESLintでより詳細なチェックを行います。

戦略2: 用途を分ける

{
  "scripts": {
    "lint:fast": "oxlint src/",
    "lint:full": "eslint src/",
    "lint": "npm run lint:fast"
  }
}

通常の開発ではOxlintを使い、CIではESLintも実行します。

戦略3: Oxlintに移行

{
  "scripts": {
    "lint": "oxlint src/",
    "lint:legacy": "eslint src/"
  }
}

徐々にOxlintに移行していきます。

実践例

Next.jsプロジェクト

{
  "scripts": {
    "dev": "next dev",
    "build": "oxlint . && next build",
    "lint": "oxlint .",
    "lint:fix": "oxlint --fix ."
  }
}

Reactプロジェクト

{
  "scripts": {
    "dev": "vite",
    "build": "oxlint src/ && tsc && vite build",
    "lint": "oxlint src/",
    "format": "prettier --write src/"
  }
}

モノレポ

{
  "scripts": {
    "lint": "oxlint packages/*/src/",
    "lint:app": "oxlint apps/*/src/",
    "lint:all": "npm run lint && npm run lint:app"
  }
}

Prettierとの組み合わせ

Oxlintはフォーマットに関するルールを含まないため、Prettierと組み合わせるのが推奨されます。

{
  "scripts": {
    "lint": "oxlint src/",
    "format": "prettier --write src/",
    "check": "npm run lint && npm run format -- --check"
  }
}

パフォーマンス最適化

並列実行

Oxlintは自動的に並列実行しますが、CPUコア数を指定することもできます。

# 4コアで実行
oxlint --threads 4 src/

# すべてのコアを使用（デフォルト）
oxlint src/

キャッシュ

Oxlintは、デフォルトでキャッシュを使用します。

# キャッシュをクリア
rm -rf .oxlint-cache/

除外設定

.oxlintignoreファイルで、Lintから除外するファイルを指定できます。

# .oxlintignore
node_modules/
dist/
build/
*.min.js
*.config.js

移行ガイド

ESLintからの移行

  1. Oxlintをインストール

    npm install -D oxlint

  2. package.jsonスクリプトを更新

    {
  "scripts": {
    "lint": "oxlint src/"
  }
}

  3. テスト実行

    npm run lint

  4. 設定をカスタマイズ 必要に応じて.oxlintrc.jsonを作成

  5. ESLintを削除（オプション）

    npm uninstall eslint

段階的な移行

{
  "scripts": {
    "lint:new": "oxlint src/",
    "lint:old": "eslint src/",
    "lint": "npm run lint:new || npm run lint:old"
  }
}

トラブルシューティング

ルールが見つからない

OxlintはすべてのESLintルールをサポートしているわけではありません。

# サポートされているルールを確認
npx oxlint --help

TypeScriptのパースエラー

Oxlintは、最新のTypeScript構文をサポートしています。古いバージョンの場合はアップデートしてください。

npm update oxlint

パフォーマンスが改善しない

  • .oxlintignoreで不要なファイルを除外
  • node_modulesがLint対象に含まれていないか確認

まとめ

Oxlintは、ESLintの50〜100倍高速な次世代Linterです。

メリット

  • 超高速（Rustで実装）
  • ゼロコンフィグで使える
  • ESLint互換のルール
  • 軽量（追加の依存関係なし）
  • エディタ統合

使い所

  • 大規模プロジェクト
  • CIでの高速チェック
  • 開発中のリアルタイムLint
  • モノレポ

注意点

  • すべてのESLintルールをサポートしているわけではない
  • カスタムプラグインは使えない
  • まだ開発中（活発に更新中）

導入手順

  1. npm install -D oxlint
  2. package.jsonのlintスクリプトを更新
  3. 必要に応じて.oxlintrc.jsonを作成

Oxlintは、開発体験を大きく向上させるツールです。特に大規模プロジェクトでは、その効果を実感できるでしょう。ぜひ、あなたのプロジェクトでも試してみてください。