Skip to content

Oxfmt: Oxcフォーマッターアルファ

Oxfmt のアルファリリースを発表し、嬉しいです。これは、Rustで実装され、Prettierと互換性を持つコードフォーマッターです。初回リリースでは、JavaScriptとTypeScriptに焦点を当てており、他の言語のサポートは近日中に追加予定です。

Oxfmtは以下の目標を意識して設計されています:

  • パフォーマンス: キャッシュなしの初期実行において、Prettierの30倍以上、Biomeの3倍以上高速 (ベンチマーク)。
  • 互換性: Prettierと互換性があるため、既存プロジェクトへの導入が容易です。
  • 開発者体験: 近くにインポートの並べ替え、拡張されたフォーマットオプション、およびPrettierプラグインのサポートが計画されています。

クイックスタート

プロジェクトに oxfmt を追加します:

sh
npm add -D oxfmt@latest
sh
pnpm add -D oxfmt@latest
sh
yarn add -D oxfmt@latest
sh
bun add -D oxfmt@latest
sh
deno add -D npm:oxfmt@latest

Oxfmtは、Prettierと同じ構成形式を使用します。Prettier用にJSON構成ファイルを使用している場合、それを .oxfmtrc.jsonc にリネームできます:

bash
cp .prettierrc.json .oxfmtrc.jsonc

また、以下のような .oxfmtrc.jsonc 構成例から始めることもできます:

jsx
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  // Prettierから移行する場合は80を使用;100がOxfmtのデフォルト値です!
  "printWidth": 80,
  "ignorePatterns": [] // `.prettierignore` と同様
}

次に、package.json のスクリプトに oxfmt を追加します:

jsx
"scripts": {
  "format": "oxfmt"
}

あるいは、インストールガイド を参照して詳細な手順をご覧ください。

パフォーマンス

Oxfmtは非常に高速です。Outline リポジトリでのベンチマーク結果は以下の通りです:

  • キャッシュなしの状態で、Prettierの実験的CLIより30倍以上高速
  • @prettier/plugin-oxc を通じて、Oxcのパーサーを使用した場合でも、Prettierより20倍以上高速
  • 他のRustベースのフォーマッターであるBiomeより3倍以上高速

詳細なベンチマーク設定については、以下のリポジトリをご覧ください:

oxc-project/bench-formatter
https://github.com/oxc-project/bench-formatter

設計

Oxcチームは、既存エコシステムとの互換性を優先しており、大きなコードベースでも移行がスムーズになります。

コードフォーマットの結果

Oxfmtは、PrettierのJavaScriptフォーマットと一致しています。今日、Oxfmtへ移行しても、Prettierと比較してフォーマットの違いは見られません。

古いPrettierバージョンからの移行時には、わずかな差異が見られる場合があります(移行例を確認)。これは、Prettierのフォーマット改善の余地がある領域を特定したためです。私たちは、バグ報告やプルリクエストを直接送ることで、常にPrettierチームと協力してきました。これらの改善の多くは、最近の Prettier 3.7 リリースに反映されています。

現在、Oxfmtは約 95% のPrettierのJavaScriptおよびTypeScriptテストをパスしており、長期的に、私たちとPrettierチームがフォーマットの統一を目指していきます。

デフォルトで printWidth: 100

Prettierの 80 ではなく、printWidth: 100 をデフォルトの行長さとして選択しました。その理由は以下の通りです:

  • TypeScriptコードは型注釈により、一般的にJavaScriptよりも長くなる傾向がある。
  • インポートステートメントには多くの項目が含まれることが多い。
  • 大きな画面では水平方向のスペースが広がる。
  • 略微かのトークン数が減る(LLM利用時)。

なお、Oxfmtは依然としてPrettierと互換性を持ちますが、デフォルトの印刷幅は100文字に変更されています。Prettierから移行する際に大きな差分を避けたい場合は、明示的に printWidth を80に設定してください。

ignorePatterns

Oxfmtは .prettierignore をサポートしていますが、すべての構成を1つのファイルに集約できる ignorePatterns 構成オプションも提供しています。

構成

PrettierのJSON構成ファイルは、Oxfmtと互換性があります。最も単純なケースでは、構成の移行は以下のようになります:

bash
cp .prettierrc.json .oxfmtrc.jsonc

エディタがJSON言語サーバーをサポートしている場合、devDependenciesoxfmt を追加した後、以下のような最小限のテンプレートから始められます:

json
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "ignorePatterns": []
}

このアルファリリースでは、まだすべてのPrettier構成オプションをサポートしていないものの、以下の主要なオプションはサポートしています:printWidthtabWidthuseTabssemisingleQuotequotePropsjsxSingleQuotetrailingCommabracketSpacingobjectWrapbracketSameLinearrowParensendOfLine、および singleAttributePerLine

すべてのオプションについては、当方の ドキュメント をご参照ください。

ターミナル出力

Oxfmtのデフォルト動作は prettier . --write と同等であり、cargo fmt と同じユーザー体験を提供し、出力は表示されません。フォーマットの差異を表示し、CIパイプラインでOxfmtの使用を強制するには --check を使用できます。

ベータ版リリース計画

ベータ版リリースの計画は以下の通りです:

ベータ版リリースまでの進捗状況は、以下で追跡できます:

Formatter Beta · Milestone #15 · oxc-project/oxc
https://github.com/oxc-project/oxc/milestone/15

また、今後のバージョンでは、一部のフォーマットに関する拘りを緩和する予定です。

次のステップ

完全なインストールガイド を確認してください。

問題の報告

フォーマットの差異について、https://github.com/oxc-project/oxc/discussions/14669 を参照してください。 また、既知の問題は ラベル で区別されます。

その他の問題が見つかった場合は、専用テンプレート を使って、GitHub上に問題を報告してください。

コミュニティに参加する

RFC: Formatter · oxc-project/oxc · Discussion #13608
https://github.com/oxc-project/oxc/discussions/13608

Oxfmtのさらなる改善に向けて、ぜひ貴方のフィードバックをお待ちしています!

謝辞

Oxfmtは biome_formatter のフォークに基づいて構築されており、ビームチーム、特に @ematipico および @MichaReiser に感謝します。また、フォーマット互換性について協力してくれたPrettierチームおよび @fisker にも感謝いたします。