oxlintの使い方完全ガイド【インストールから応用まで】

あなたはJavaScript/TypeScriptプロジェクトの開発者です。コードの品質を保つため、リンターは不可欠なツールです。しかし、大規模プロジェクトでのリンティング実行は、時に数分を要し、開発フローを滞らせることがあります。変更を加えるたびに長い検査を待つのは、決して快適な体験ではありません。

想像してみてください。コードを保存した瞬間に、まるで魔法のように問題点が指摘され、瞬時に修正案が提示される世界を。CI/CDパイプラインも驚くほど高速に完了し、デプロイまでの時間が大幅に短縮されます。開発者は高速なフィードバックを受け取り、よりクリエイティブな作業に集中できます。この夢のような体験を現実にするのが、Rust製超高速リンター「oxlint」です。

本記事では、oxlintの基本的な使い方から、実際の開発シーンで役立つ応用例、さらには既存ツールとの組み合わせまで、網羅的にご紹介します。oxlintをあなたの開発環境に導入し、その圧倒的な速度と快適さを体験しましょう。

oxlintとは

oxlintは、Rust言語で書かれたJavaScriptおよびTypeScript向けのリンターです。既存のJavaScriptリンターであるESLintと比較して、50倍から100倍もの高速な実行性能を誇ります。この驚異的な速度は、開発者の生産性を劇的に向上させます。

oxlintは、Oxcプロジェクトの一部として誕生しました。Oxc（Oxidation Compiler）は、JavaScriptのエコシステム全体を高速化するための高パフォーマンスなツール群です。Rustの能力を最大限に活用し、構文解析（Parser）、トランスフォーマー（Transformer）、ミニファイア（Minifier）、そしてこのリンター（Linter）など、様々なツールを提供しています。VoidZeroが提唱する、統一された高パフォーマンスなJavaScriptツールチェーンというビジョンを実現する中核を担っています。

リンターとは、コードの潜在的な問題やスタイルの一貫性のない部分を自動的に検出するツールです。これにより、バグの早期発見、コード品質の均一化、チーム開発におけるレビューコスト削減に貢献します。oxlintは、このリンティングプロセスを圧倒的な速度で提供することで、開発サイクル全体を加速させます。すでにRolldown（Viteのバンドラー）やNuxtなどの著名なプロジェクトでもOxcのコンポーネントが採用されており、その信頼性と性能は実証済みです。

インストール方法

oxlintはnpmを通じて簡単にインストールできます。macOS、Linux、WindowsのどのOSでも、Node.jsとnpm（またはyarn/pnpm）がインストールされていればすぐに利用可能です。

まず、プロジェクトの依存関係としてoxlintをインストールします。開発時のみ必要なツールなので、--save-dev または -D オプションを付けてインストールするのが一般的です。

# npmの場合
npm install -D oxlint

# yarnの場合
yarn add -D oxlint

# pnpmの場合
pnpm add -D oxlint

インストール後、初期設定ファイルを生成することをおすすめします。--init コマンドを実行すると、プロジェクトのルートディレクトリに.oxlintrc.jsonファイルが作成されます。このファイルには、推奨される基本的なルールセットが自動的に設定されます。

# oxlintの初期設定ファイルを生成
npx oxlint@latest --init

このコマンドを実行すると、以下のようなメッセージが表示され、設定ファイルが生成されます。

> npx oxlint@latest --init
? Which frameworks are you using? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
( ) React
( ) Vue
( ) Solid
( ) Svelte
( ) Astro
( ) Next.js
( ) Nuxt
( ) Remix
( ) Gatsby
( ) Angular
( ) Qwik
? Does your project use TypeScript? (y/N)

質問に答えることで、あなたのプロジェクトに最適な初期設定が自動的に生成されます。例えば、ReactとTypeScriptを使用している場合、それに応じたルールが設定されます。

基本的な使い方

oxlintの使い方は非常にシンプルです。プロジェクトにインストールしたら、いくつかのコマンドを知るだけで基本的なリンティングを開始できます。ここでは、最低限知っておきたい3つのコマンドを紹介します。

1. プロジェクト全体を検査する

プロジェクトのルートディレクトリでnpx oxlintコマンドを実行すると、設定ファイルに基づいてプロジェクト内のJavaScript/TypeScriptファイルを検査します。検出された問題は、ターミナルに表示されます。

# プロジェクト全体をリンティング
npx oxlint

例えば、以下のような問題が検出されることがあります。

src/index.js
  1:7  error  'foo' is assigned a value but never used  no-unused-vars

この出力は、src/index.jsの1行目7文字目で、変数fooが定義されているが使用されていないことを示しています。ルール名はno-unused-varsです。

2. 特定のファイルやディレクトリを検査する

特定のファイルやディレクトリのみを検査したい場合は、コマンドの後にパスを指定します。これは、特定のファイルを修正している最中に、そのファイルだけを素早くチェックしたい場合に便利です。

# 特定のファイルをリンティング
npx oxlint src/components/Button.tsx

# 特定のディレクトリをリンティング
npx oxlint src/utils/

3. 問題を自動修正する

oxlintは、検出された問題の一部を自動的に修正する機能も持っています。--fixオプションを付けて実行すると、修正可能な問題が自動的にコードに適用されます。これは、手動での修正の手間を省き、開発効率を高めます。

# 自動修正可能な問題を適用
npx oxlint --fix

このコマンドは、例えば不要なセミコロンの削除や、引用符の統一など、スタイルに関する多くの問題を自動で解決できます。ただし、全ての問題が自動修正できるわけではありません。ロジックに関わるような複雑な問題は、手動での修正が必要です。

便利な使い方・応用例 3選

oxlintの真価は、その高速性だけでなく、実際の開発ワークフローに深く統合することで発揮されます。ここでは、開発体験をさらに向上させるための応用例を3つご紹介します。

1. CI/CDパイプラインへの組み込み

oxlintの最大の強みである高速性は、CI/CDパイプラインにおいて絶大な効果を発揮します。プルリクエストが作成された際や、コードがマージされる前に、自動的にリンティングを実行することで、コード品質を担保できます。ESLintと比較して圧倒的に短時間で完了するため、パイプライン全体の実行時間を大幅に短縮し、開発者がフィードバックを待つ時間を減らします。

例えば、GitHub Actionsを使用してCI/CDパイプラインにoxlintを組み込む場合、以下のように設定できます。

# .github/workflows/lint.yml
name: Lint Code

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

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

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm' # または 'yarn', 'pnpm'

      - name: Install dependencies
        run: npm install

      - name: Run oxlint
        run: npx oxlint

この設定では、mainブランチへのプッシュやプルリクエスト時に、自動的にoxlintが実行されます。リンティングエラーがあれば、CIは失敗し、マージをブロックできます。これにより、常に高品質なコードがリポジトリにマージされることを保証します。

2. エディタ連携によるリアルタイムフィードバック

開発中にコードを書いているその場で、リンティングのフィードバックを受け取れることは、非常に重要です。oxlintは、VS Codeなどのエディタと連携することで、このリアルタイムフィードバックを実現します。ESLintのVS Code拡張機能を活用し、oxlintをそのバックエンドとして動作させることが可能です。

まず、VS Codeに「ESLint」拡張機能をインストールします。

次に、VS Codeのsettings.jsonに以下の設定を追加し、ESLint拡張機能がoxlintを使用するように構成します。

// .vscode/settings.json
{
  "eslint.workingDirectories": [
    { "mode": "auto" }
  ],
  "eslint.options": {
    "overrideConfigFile": "./.oxlintrc.json"
  },
  "eslint.lintTask.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "jsonc",
    "json5"
  ]
}

この設定により、VS Codeはファイルの保存時や入力時に、oxlintをバックエンドとして利用し、リアルタイムでコードの問題点を指摘してくれます。これにより、問題を早期に発見し、修正することができます。

3. 特定のルールセットの適用と無効化

oxlintは、プロジェクトの特性に合わせてリンティングルールを細かくカスタマイズできます。特定のフレームワーク（React, Vueなど）に特化したルールを適用したり、プロジェクトの要件に合わせて特定のルールを無効化したりすることが可能です。

初期設定時に生成された.oxlintrc.jsonファイルを編集して、ルールを調整します。

例えば、Reactプロジェクトで推奨されるルールを適用しつつ、特定のルールを警告レベルに設定する例を考えます。

// .oxlintrc.json
{
  "extends": [
    "oxlint:recommended", // oxlintの推奨ルールセットを継承
    "oxlint:react"        // React固有のルールセットを継承
  ],
  "rules": {
    // 未使用変数をエラーではなく警告にする
    "no-unused-vars": "warn",
    // Reactコンポーネントでキーが不足している場合はエラーにする
    "react/jsx-key": "error",
    // アロー関数でのみ使用できるルールを無効化
    "prefer-arrow-callback": "off"
  },
  "plugins": {
    "react": true,
    "typescript": true
  },
  "ignore": [
    "node_modules/",
    "dist/",
    "**/*.min.js"
  ]
}

• extends: 既存のルールセットを継承します。「oxlint:recommended」はoxlintが推奨する基本的なルールセットです。「oxlint:react」のように、特定のフレームワーク向けのルールセットも利用できます。
• rules: 個別のルールを上書きしたり、追加したりします。"error"はビルドを失敗させるエラー、"warn"は警告、"off"はルールを無効化します。
• plugins: 検出するプラグインを指定します。例えば"react": trueとすることで、React固有の構文やパターンに対するリンティングが可能になります。
• ignore: リンティングの対象外とするファイルやディレクトリを指定します。node_modulesやビルド成果物ディレクトリなどを除外するのに役立ちます。

このように、プロジェクトの規模や要件に応じて柔軟にルールをカスタマイズすることで、開発者は最適なリンティング環境を構築できます。

他ツールとの組み合わせ

oxlintは単体でも強力ですが、他の開発ツールと組み合わせることで、その効果を最大限に引き出せます。ここでは、相性の良いツールとその組み合わせ方について説明します。

ESLintとの併用

oxlintはESLintの代替として設計されていますが、完全に置き換える必要はありません。両者を併用することで、それぞれの強みを活かすことができます。

• oxlintの役割: 主に高速な基本チェック、CI/CDでのクイックなフィードバック、エディタでのリアルタイムチェックに利用します。ESLintのコアルールやTypeScript関連の多くのルールをカバーしています。
• ESLintの役割: oxlintがまだサポートしていない、より複雑なカスタムルール、特定のフレームワークやライブラリに特化したニッチなプラグイン、またはレガシープロジェクトの既存設定を維持したい場合に利用します。

例えば、開発中のCI/CDパイプラインではoxlintを先に実行し、高速に基本問題を検出します。その後、ESLintでより詳細なカスタムルールや特殊なプラグインのチェックを行う、といった段階的なアプローチが考えられます。

Prettierとの連携

Prettierは、コードのフォーマットを自動的に行うツールです。oxlintはコードの品質や潜在的な問題を指摘するリンターであり、Prettierはコードの見た目を統一するフォーマッターです。両者は異なる役割を持つため、競合することなく併用が可能です。

• oxlint: コードのバグ、潜在的なエラー、アンチパターンなどを検出します。
• Prettier: インデント、改行、引用符のスタイルなど、コードの整形を行います。

理想的なワークフローは、まずPrettierでコードを自動フォーマットし、その後にoxlintでリンティングを実行することです。これにより、まずコードの見た目を統一し、その上で品質チェックを行うという流れになります。多くの開発環境では、保存時にPrettierが自動実行され、その後リンターが実行されるように設定されています。

# まずPrettierでフォーマット (Prettierがインストールされている場合)
npx prettier --write .

# その後oxlintでリンティングと自動修正
npx oxlint --fix

# 最終的なリンティングチェック
npx oxlint

また、Oxcプロジェクトにはoxfmtというフォーマッターも存在します。将来的にoxfmtが成熟すれば、oxlintとのより密接な連携が期待できるでしょう。しかし、現状ではPrettierが広く使われており、oxlintとの併用も非常に効果的です。

よくある設定・カスタマイズ

oxlintは.oxlintrc.jsonファイルを通じて詳細な設定が可能です。ここでは、一般的なカスタマイズ項目とその設定例を紹介します。

1. ルールの設定

rulesプロパティでは、個々のリンティングルールの有効/無効、およびエラーレベルを設定できます。

// .oxlintrc.json
{
  "rules": {
    "no-console": "error",         // console.logの使用をエラーにする
    "no-debugger": "error",        // debuggerの使用をエラーにする
    "no-unused-vars": "warn",      // 未使用変数を警告にする
    "eqeqeq": "error",             // 厳密等価演算子 (===) の使用を強制する
    "no-undef": "off"              // 未定義変数のチェックを無効にする（TypeScript使用時など）
  }
}

• "error": 問題をエラーとして扱い、リンティングプロセスを失敗させます。
• "warn": 問題を警告として扱いますが、リンティングプロセスは失敗しません。
• "off": ルールを完全に無効化します。

2. プラグインの有効化

pluginsプロパティで、特定のフレームワークや技術に対応するプラグインを有効化できます。これらは、その技術特有の構文やパターンに対するリンティングルールを提供します。

// .oxlintrc.json
{
  "plugins": {
    "react": true,       // React固有のルールを有効化
    "typescript": true,  // TypeScript固有のルールを有効化
    "jsx-a11y": true     // アクセシビリティ関連のJSXルールを有効化
  }
}

--initコマンドでプロジェクトのフレームワークを選択した場合、これらのプラグインは自動的に設定されます。

3. 環境変数の定義

envプロパティでは、コードが実行される環境を定義し、その環境固有のグローバル変数を認識させます。これにより、例えばブラウザ環境のwindowオブジェクトやNode.js環境のprocessオブジェクトなどが未定義エラーとして報告されるのを防ぎます。

// .oxlintrc.json
{
  "env": {
    "browser": true,  // ブラウザのグローバル変数を有効化 (window, documentなど)
    "node": true,     // Node.jsのグローバル変数を有効化 (process, requireなど)
    "es2020": true    // ECMAScript 2020のグローバル変数を有効化
  }
}

4. 無視するファイル/ディレクトリの設定

ignoreプロパティでは、リンティングの対象から除外するファイルやディレクトリをglobパターンで指定できます。ビルド成果物、テストデータ、サードパーティライブラリなどは、通常リンティングの必要がないため除外します。

// .oxlintrc.json
{
  "ignore": [
    "node_modules/",    // node_modulesディレクトリを除外
    "dist/",            // ビルド成果物ディレクトリを除外
    "build/",           // 別のビルド成果物ディレクトリを除外
    "*.test.js",        // テストファイルを除外
    "**/vendor/*.js"    // vendorディレクトリ内のJSファイルを除外
  ]
}

これらの設定を適切に行うことで、あなたのプロジェクトに最適なリンティング環境を構築し、開発効率を最大限に高めることができます。

今日からできる実行プラン

oxlintの導入は、たった3つのステップで完了します。今日からでも、その高速なリンティングをあなたの開発ワークフローに取り入れましょう。

ステップ1: oxlintをインストールし、初期設定ファイルを生成する

まず、あなたのプロジェクトにoxlintをインストールします。Node.jsプロジェクトであれば、以下のコマンドを実行するだけです。

npm install -D oxlint

次に、プロジェクトのルートディレクトリで初期設定ファイルを生成します。このコマンドは、あなたのプロジェクトのフレームワークやTypeScriptの使用有無に応じて、最適な.oxlintrc.jsonファイルを自動的に作成してくれます。

npx oxlint@latest --init

このステップを完了すると、プロジェクトの基本的なリンティング環境が整います。

ステップ2: 基本的なリンティングを実行し、結果を確認する

設定ファイルが生成されたら、早速リンティングを実行してみましょう。プロジェクト全体を対象に検査する最も基本的なコマンドです。

npx oxlint

ターミナルに表示されるリンティング結果を確認してください。エラーや警告が表示された場合は、それらがどのような問題を示しているのかを把握します。自動修正可能な問題であれば、次のコマンドで修正を試みましょう。

npx oxlint --fix

このステップを通じて、既存のコードベースにどのような品質の問題が潜んでいるかを把握し、oxlintの基本的な動作を体験できます。

ステップ3: エディタ連携とCI/CDへの組み込みを検討する

oxlintの真価を発揮させるためには、開発ワークフローへの深い統合が不可欠です。

• エディタ連携: VS Codeを使用している場合、本記事の「エディタ連携によるリアルタイムフィードバック」セクションを参考に、settings.jsonに設定を追加してください。これにより、コードを書いている最中にリアルタイムでフィードバックが得られ、開発効率が飛躍的に向上します。
• CI/CDへの組み込み: 継続的インテグレーション/デリバリー（CI/CD）パイプラインにoxlintを組み込むことを検討しましょう。GitHub ActionsなどのCIサービスに、本記事の「CI/CDパイプラインへの組み込み」セクションで紹介した設定例を追加します。これにより、コードがバージョン管理システムにプッシュされる前に、自動的に品質チェックが行われ、プロジェクト全体のコード品質が維持されます。

これらのステップを踏むことで、あなたはoxlintの持つ圧倒的な速度と、それによる開発体験の向上を実感できるでしょう。今日からoxlintを導入し、より快適で高品質な開発を目指してください。

参考文献

• Oxlint vs ESLint: Comparing JavaScript Linters
• Getting Started with Oxlint
• oxc-project/oxc GitHub Repository
• Oxc Official Website