OxfmtとOxlintの紹介とBiomeとの比較

現代のJavaScript/TypeScriptの世界では、高性能Rustツールの台頭を目撃しています。Biome ↗はオールインワンツールチェーンとして確立されていますが、Oxc ↗は専門ツールという異なるアプローチをとっています：Oxfmt（フォーマッター）とOxlint（リンター）。この記事ではこれら2つのツールを紹介し、Biomeとのアーキテクチャを比較します。

Oxfmtとは？#

Oxfmt（/oʊ-ɛks-fɔːr-mæt/）は、Oxcコンパイラスタック上に構築されたJavaScriptエコシステム向けの高性能フォーマッターです。パフォーマンスを劇的に向上させながら、Prettierとの完全な互換性を提供するように設計されています。

Oxfmtの主な機能#

マルチ言語サポート#

Oxfmtは多くのファイル形式をサポートし、一部はネイティブRustエンジンで処理され、他はバンドルされたPrettierに委ねられます：

ネイティブ形式（完全にRustで実行）：

• JavaScript/JSX: .js, .jsx, .mjs, .cjs
• TypeScript/TSX: .ts, .tsx, .mts, .cts, .d.ts
• JSON/JSONC/JSON5: .json, .jsonc, .json5
• CSS/SCSS/Less: .css, .scss, .less
• GraphQL: .graphql, .gql
• TOML: .toml
• YAML: .yml, .yaml

委譲形式（バンドルされたPrettierを使用）：

• HTML, Angular, Vue, Svelte
• Markdown, MDX
• Handlebars, MJML

組み込み機能#

Oxfmtには通常、外部Prettierプラグインが必要な機能が含まれています：

• Import sorting: 構成可能なオプションでインポートをソート
• Tailwind CSS class sorting: 自動Tailwindクラスソート（prettier-plugin-tailwindcssと互換）
• package.json field sorting: 自動package.jsonフィールド整理
• Embedded formatting: テンプレートリテラルに埋め込まれたコードのフォーマット（CSS-in-JS、GraphQLなど）

パフォーマンス#

ベンチマークによると、Oxfmtは以下の通りです：

• Prettierより約30倍高速
• Biomeより2倍高速

Prettier互換性#

Oxfmtは現在、PrettierのJavaScriptおよびTypeScript適合性テストの100%に合格しています。最近のPrettierバージョンから移行する場合、フォーマットの違いは発生しないはずです。

Oxfmtアーキテクチャ#

Oxfmtは3段階フォーマットシステムを使用します：

graph LR
    AST[AST from Parser] --> IRGen[IR Generation]
    IRGen --> IR[FormatElement IR]
    IR --> Transform[IR Transformation]
    Transform --> sort_imports[sort_imports]
    sort_imports --> tailwind_sort[Tailwind Sort]
    tailwind_sort --> Printer[Printing]
    Printer --> Output[Formatted Text]

1. IR Generation: Formatトレイトを使用したASTトラバーサル
2. IR Transformation: sort_importsやTailwindソートなどの変換を適用
3. Printing: プリンターがIRを消費し、最終出力をレンダリング

[!NOTE] OxfmtフォーマッターコアはBiomeのbiome_formatterクレートから移植されていますが、完全に言語に依存しない設計になっています。

Oxlintとは？#

Oxlint（/oʊ-ɛks-lɪnt/）は、Oxcコンパイラスタック上に構築されたJavaScriptおよびTypeScript向けの高性能リンターです。優れたパフォーマンスを持つESLintのドロップイン置換として設計されています。

Oxlintの主な機能#

広範なルールカバレッジ#

Oxlintには870以上の組み込みルールが含まれ、最も人気のあるリンタープラグインをカバーしています：

• ESLintコアルール: 基本的なJavaScriptルール
• TypeScriptルール: 型認識ルールを含む
• 人気プラグイン: React, Jest, Vitest, Import, Unicorn, jsx-a11y
• カスタムJSプラグイン: ESLintプラグインエコシステムと互換

型認識リンティング#

OxlintはTypeScriptコンパイラのネイティブGoポート（tsgo aka TypeScript 7）を使用し、以下を提供します：

• 完全なTypeScript互換性
• TypeScriptと同じ型システム動作
• TypeScriptセマンティクスに沿った型認識リンティング

マルチファイル分析#

Oxlintはマルチファイル分析をファーストクラス機能としてサポートします：

• プロジェクト全体のモジュールグラフを構築
• ルール間で解析と解決を共有
• クロスファイルインポートに依存するチェックを改善
• ESLintのimport/no-cycleなどのルールでよく見られるパフォーマンスの崖を回避

パフォーマンス#

Oxlintは大規模リポジトリとCI環境向けに構築されています：

• ESLintより50-100倍高速
• アーキテクチャはESLintのパフォーマンスを制限する構造的ボトルネックを排除
• マルチスレッドファイル処理

Oxlintアーキテクチャ#

Oxlintは並列実行アーキテクチャとデュアルブランチ戦略を使用します：

graph TB
    CLI[CLI Interface] --> LintRunner[LintRunner]
    LintRunner --> LintService[LintService]
    LintService --> Runtime[Runtime]
    Runtime --> process_source[process_source]
    process_source --> Parser[Parser]
    Parser --> AST[AST]
    AST --> LintContext[LintContext]
    LintContext --> Linter[Linter]
    Linter --> execute_rules[execute_rules]
    
    execute_rules --> strategy1[Strategy 1: nodes → rules]
    execute_rules --> strategy2[Strategy 2: rules → nodes]
    
    strategy1 --> RULE_BUCKETS[RULE_BUCKETS]
    strategy2 --> RULE_BUCKETS
    
    LintService --> DiagnosticService[DiagnosticService]
    DiagnosticService --> Output[Output]

主要コンポーネント#

1. LintService: 並列実行でリンティングを調整
2. Runtime: パスとファイル発見を管理
3. LintContext: Semantic分析コンテキストを含む
4. Linter: AST上でルールを実行するコアエンジン
5. Rule Trait: ルール実装用のフックを定義

デュアルブランチ戦略#

• 小ファイル（<200kノード）: （ノード→ルール）を反復
• 大ファイル（≥200kノード）: RULE_BUCKETSで（ルール→ノード）を反復
• これにより、大ファイルでのCPUキャッシュスラッシングを回避

Biomeとのアーキテクチャ比較#

1. 設計哲学#

2. フォーマッターアーキテクチャ#

3. リンターアーキテクチャ#

4. パフォーマンス#

5. 移行パス#

どちらを使用すべきか？#

Oxfmt + Oxlintを選ぶ場合：#

• CI/CDで最大のパフォーマンスが必要
• 出力を変更せずにPrettier互換性が必要
• フォーマッターとリンターに分離ツールが必要
• 最小限の破壊でESLint + Prettierから移行中
• 組み込みのTailwind CSS統合が必要
• 正確なTypeScriptセマンティクスによる型認識リンティングが必要

Biomeを選ぶ場合：#

• 1つのパッケージで統合ツールチェーンが必要
• ネイティブなマルチ言語サポート（CSS、HTML、GraphQL）が必要
• より良いIDE統合のためのデーモンプロセスが必要
• チームが単一設定ファイルを望む
• 絶対的なPrettier互換性が不要

使用例#

Oxfmt#

# インストール
npm install -D oxfmt

# ファイルをフォーマット
oxfmt src/

# フォーマットをチェック
oxfmt --check src/

# 設定を初期化
oxfmt --init

# Prettierから移行
oxfmt --migrate=prettier

# Biomeから移行
oxfmt --migrate=biome

Oxlint#

# インストール
npm install -D oxlint

# ファイルをリント
oxlint src/

# 型認識リンティング
oxlint --tsconfig tsconfig.json src/

# マルチファイル分析
oxlint --enable-import-plugin src/

Biome#

# インストール
npm install -D @biomejs/biome

# フォーマットとリント
biome check src/

# フォーマットのみ
biome format src/

# リントのみ
biome lint src/

# ウォッチモード
biome check --watch .

結論#

OxfmtとOxlintは最大のパフォーマンスとPrettier/ESLint互換性を持つ専門ツールアプローチを表し、Biomeは統合エクスペリエンスを持つ統合ツールチェーンを提供します。

2つのエコシステムの選択は、プロジェクトの優先事項に依存します：パフォーマンスと互換性 vs 統合とシンプルさ、分離ツール vs 統合ツールチェーン、既存のエコシステム互換性 vs 新しいツールチェーン採用。

両方とも高いRustパフォーマンスを持つJavaScript/TypeScriptツールリングの未来を表していますが、開発ワークフローで異なるユースケースに対応します。

参考文献#

• Oxfmt Documentation ↗
• Oxfmt Language Support ↗
• Oxlint Documentation ↗
• Oxlint Multi-file Analysis ↗
• Oxc Architecture ↗
• Biome Architecture ↗
• Oxfmt Beta Announcement ↗