OXLint高速リンター入門: ESLintから100倍速への移行ガイド


OXLintは、Rust製の超高速JavaScriptリンターです。ESLintの50〜100倍の速度で動作し、大規模プロジェクトでも数秒でlintが完了します。

OXLintとは

OXLintは、Oxc(Oxidation Compiler)プロジェクトの一部として開発されている次世代のJavaScript/TypeScriptリンターです。

主な特徴:

  • 圧倒的な速度: ESLintの50〜100倍高速
  • ゼロコンフィグ: デフォルトで実用的なルールセット
  • ESLint互換: 主要ルールをサポート
  • TypeScript対応: 追加設定なしでTS対応
  • 軽量: 追加依存なしで動作

インストール

npmまたはpnpmでインストールできます。

# npm
npm install --save-dev oxlint

# pnpm
pnpm add -D oxlint

# yarn
yarn add -D oxlint

# bun
bun add -d oxlint

グローバルインストールも可能です。

npm install -g oxlint

基本的な使い方

シンプルな実行

# カレントディレクトリをlint
npx oxlint

# 特定ディレクトリをlint
npx oxlint src/

# 特定ファイルをlint
npx oxlint src/index.ts

package.jsonに追加

{
  "scripts": {
    "lint": "oxlint",
    "lint:fix": "oxlint --fix"
  }
}
npm run lint

設定ファイル

OXLintは設定ファイルなしでも動作しますが、カスタマイズも可能です。

oxlintrc.json

{
  "rules": {
    "no-console": "warn",
    "no-debugger": "error",
    "eqeqeq": "error"
  },
  "ignorePatterns": [
    "dist",
    "node_modules",
    "*.config.js"
  ]
}

.oxlintignore

# ビルド成果物
dist/
build/
.next/

# 依存関係
node_modules/

# 設定ファイル
*.config.js
*.config.ts

# テストカバレッジ
coverage/

ESLintからの移行

ステップ1: ESLintルールの確認

現在のESLint設定を確認します。

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'warn'
  }
}

ステップ2: OXLintでサポートされているルールを確認

# サポートされているルール一覧を表示
oxlint --rules

ステップ3: 段階的な移行

完全移行前に、両方を並行実行して結果を比較します。

{
  "scripts": {
    "lint:eslint": "eslint .",
    "lint:oxlint": "oxlint",
    "lint": "npm run lint:oxlint && npm run lint:eslint"
  }
}

ステップ4: OXLintのみに移行

{
  "scripts": {
    "lint": "oxlint",
    "lint:fix": "oxlint --fix"
  }
}

実践的なルール設定

TypeScriptプロジェクト

{
  "rules": {
    "no-console": "warn",
    "no-debugger": "error",
    "no-unused-vars": "error",
    "eqeqeq": "error",
    "no-var": "error",
    "prefer-const": "warn",
    "no-undef": "error"
  },
  "ignorePatterns": [
    "dist",
    "*.config.ts",
    "*.d.ts"
  ]
}

Reactプロジェクト

{
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react/no-deprecated": "warn",
    "react/no-direct-mutation-state": "error",
    "react/no-unknown-property": "error"
  },
  "ignorePatterns": [
    "build",
    "node_modules"
  ]
}

Next.jsプロジェクト

{
  "rules": {
    "no-console": "warn",
    "no-debugger": "error",
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off"
  },
  "ignorePatterns": [
    ".next",
    "out",
    "node_modules",
    "next.config.js"
  ]
}

自動修正

OXLintは一部のルール違反を自動修正できます。

# 自動修正を実行
npx oxlint --fix

# ドライラン(修正内容を確認のみ)
npx oxlint --fix --dry-run

修正可能なルール例

// Before
var x = 1;
let y = 2;
y = 3; // yは再代入されない

// After (oxlint --fix)
const x = 1;
const y = 2;

パフォーマンス比較

実際のプロジェクトでベンチマークを取ってみます。

小規模プロジェクト(100ファイル)

# ESLint
time npx eslint .
# 実行時間: 8.2秒

# OXLint
time npx oxlint
# 実行時間: 0.1秒

# 82倍高速

中規模プロジェクト(1,000ファイル)

# ESLint
time npx eslint .
# 実行時間: 45秒

# OXLint
time npx oxlint
# 実行時間: 0.4秒

# 112倍高速

大規模プロジェクト(10,000ファイル)

# ESLint
time npx eslint .
# 実行時間: 380秒(6分20秒)

# OXLint
time npx oxlint
# 実行時間: 3.2秒

# 118倍高速

CI/CDへの統合

GitHub Actions

name: Lint

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

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

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Run OXLint
        run: npx oxlint

GitLab CI

lint:
  image: node:20
  script:
    - npm ci
    - npx oxlint
  only:
    - merge_requests
    - main

Pre-commitフック

# package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
    "husky": "^9.0.0",
    "oxlint": "^0.2.0"
  }
}
# .husky/pre-commit
#!/bin/sh
npx oxlint --fix
git add -u

VS Code統合

OXLint用のVS Code拡張機能はまだありませんが、tasks.jsonで統合できます。

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "OXLint",
      "type": "shell",
      "command": "npx oxlint",
      "problemMatcher": {
        "owner": "oxlint",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "pattern": {
          "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error)\\s+(.*)$",
          "file": 1,
          "line": 2,
          "column": 3,
          "severity": 4,
          "message": 5
        }
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

キーボードショートカット

{
  "key": "ctrl+shift+l",
  "command": "workbench.action.tasks.runTask",
  "args": "OXLint"
}

実践例: モノレポ

Turborepoなどのモノレポ環境での使用例です。

ルートのpackage.json

{
  "scripts": {
    "lint": "turbo run lint",
    "lint:fix": "turbo run lint:fix"
  }
}

各パッケージのpackage.json

{
  "name": "@myapp/web",
  "scripts": {
    "lint": "oxlint",
    "lint:fix": "oxlint --fix"
  }
}

turbo.json

{
  "pipeline": {
    "lint": {
      "outputs": [],
      "cache": false
    }
  }
}

トラブルシューティング

ルールが期待通り動作しない

# 詳細なログを出力
npx oxlint --verbose

特定ファイルを無視

// ファイル先頭に追加
/* oxlint-disable */

// または特定ルールのみ無視
/* oxlint-disable no-console */
console.log('これはlint対象外')
/* oxlint-enable no-console */

パフォーマンスが遅い

# 並列処理数を調整
npx oxlint --max-workers=4

ESLintとの併用

一部のルールはESLintでしか対応していない場合、併用も可能です。

{
  "scripts": {
    "lint:oxlint": "oxlint",
    "lint:eslint": "eslint --ext .jsx,.tsx .",
    "lint": "npm run lint:oxlint && npm run lint:eslint"
  }
}

棲み分けの例

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

ローカル開発ではlint:fast、CI/CDではlint:fullを実行します。

まとめ

OXLintは、大規模プロジェクトでのlint時間を劇的に短縮できます。

メリット:

  • ESLintの50〜100倍高速
  • ゼロコンフィグで即座に使える
  • TypeScript完全対応
  • CI/CD時間の大幅短縮

デメリット:

  • ESLintの全ルールには未対応
  • プラグインエコシステムが未成熟
  • VS Code統合が発展途上

推奨される使い方:

  • 中〜大規模プロジェクトでの採用
  • CI/CDでの高速化
  • ESLintとの段階的な併用

開発速度を重視するプロジェクトでは、OXLintへの移行を検討する価値があります。特に、毎回のcommitやpushで数十秒待たされているプロジェクトでは、開発体験が劇的に改善します。