⚓️

新しい爆速なフォーマッタである Oxfmt を試してみる

に公開
Prettier
formatter
oxc
oxfmt
tech

これは CA Tech Lounge Advent Calendar 2025 8 日目の記事です。7 日目は @OmojiP さんで 『将棋ゲームを異なる設計レベルで開発 Part4 』でした。

Oxc とは

Vue や Vite の作者である Evan You が立ち上げた VoidZero という会社では、「Web 開発者の生産性をこれまで以上に向上させる」という目標のもと、次世代の JavaScript や TypeScript のためのツール開発を行っています。

https://voidzero.dev/

Oxc は VoidZero 社によって開発が主導されているツールの一つで、Parser や Linter, Formatter などを Rust で実装し、提供しています。

Oxcの公式ウェブサイトのスクリーンショット。"The JavaScript Oxidation Compiler" というタイトルがあり、その下に「Parser ✅」「Linter ✅」「Formatter 🚧」「Transformer ✅」「Minifier 🚧」「Resolver ✅」「Rolldown Bundler 🚧」「Nova JavaScript Engine 🚧」の8つのカードが並んでいる

このうち Linter は Oxlint として、Formatter は Oxfmt として開発が進んでいます。

Oxlint についてはすでに v1.0 がリリースされており、ESLint より 50 〜 100 倍高速で、500 以上の ESLint ルールをサポートしていると説明されています。

https://voidzero.dev/posts/announcing-oxlint-1-stable

Oxfmt とは

2025 年 12 月、Oxfmt の Alpha 版がリリースされました。

https://voidzero.dev/posts/announcing-oxfmt-alpha

Oxfmt は Rust ベースの高速フォーマッタであり、様々な拡張子のフォーマットをサポートしています。Prettier より 30 倍高速でありながら、95% を超える互換性を備えているようです。

Alpha 版リリース時は JavaScript および TypeScript ファイルのみのサポートでしたが、12 月 8 日にリリースされた v0.17.0 で新たに JSON, HTML, YAML, GraphQL, Handlebars, Markdown, CSS のサポートが追加されました[1]。

https://github.com/oxc-project/oxc/releases/tag/apps_v1.32.0#oxfmt-v0.17.0

Oxfmt は Prettier との互換性を謳っており、Prettier の設定ファイルをリネームするだけで利用できます。

既存プロジェクトに Oxfmt を導入する

基本的には公式ドキュメントをなぞっていくだけで導入できました。

https://oxc.rs/docs/guide/usage/formatter.html

まずは Oxfmt をインストールします。

npm install -D oxfmt

これだけでも npx oxfmt コマンドが利用できるようになります。

エディタで動作させるためには VSCode 向けに拡張機能が提供されているので、これをインストールしましょう。

https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode

また、package.json の scripts に以下を設定しておくと便利です。

package.json
{
  "scripts": {
    "format": "oxfmt",
    "format:check": "oxfmt --check"
  }
}

設定ファイルを追加

プロジェクトのルートディレクトリに .oxfmtrc.json というファイルを設定し、スキーマの読み込み設定を追加します。Prettier の設定と同じように利用したい場合は .prettierrc を .oxfmtrc.json にリネームするだけでも動作します。なお、printWidth については Oxfmt で 100 がデフォルトに設定されているので、そのまま移行したい場合は 80 に設定しておくと良いです。

.oxfmtrc.json
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 80
}

また、現在のところ Prettier のプラグインはサポートされていないようです。

ファイルの無視

.gitignore に追加されているファイルはデフォルトで無視されます。さらに、ignorePatterns に追加されたパターンにマッチするファイルも無視されます。

.oxfmtrc.json
{
  "ignorePatterns": [
    "dist/**",
    "node_modules/**"
  ]
}

実行時間の比較

Prettier を使っているプロジェクトに Oxfmt を導入し、実行時間を計測して比較してみました。

newt@OWL test-pjt % time pnpm prettier --check .

> test-pjt@3.2.0 prettier /Users/newt/development/projects/test-pjt
> prettier --check . --check .

Checking formatting...
All matched files use Prettier code style!
pnpm prettier --check .  5.70s user 0.55s system 150% cpu 4.168 total

newt@OWL test-pjt % time pnpm oxfmt --check .
Checking formatting...

.stylelintrc (399ms)
eslint.config.mjs (0ms)
pnpm-lock.yaml (385ms)
src/app/(board)/games/[game_id]/board/_components/AQL/AQL.tsx (0ms)
// 省略
tsconfig.json (181ms)

Format issues found in above 217 files. Run without `--check` to fix.
Finished in 935ms on 386 files using 8 threads.
pnpm oxfmt --check .  2.14s user 0.17s system 122% cpu 1.889 total

Prettier は 5.70 秒、Oxfmt は 0.935 秒で、 約 6.1 倍高速になりました。386 ファイルでも 1 秒足らずでチェックが完了しています。

現在のところ Biome では Markdown のフォーマットがサポートされていませんが、Oxfmt ではすでに主要な拡張子のフォーマットがサポートされているため、十分導入に足る段階に来ていると感じました。

明日は @ka_ichi さんで『RA も AI を活用する -Claude Code を使った Stata でのパネルデータ構築-』です！お楽しみに！

脚注

  1. 12 月 8 日現在ドキュメントには記載がありませんが、リリースノートから機能追加が確認できます ↩︎

Discussion