Skip to content

Oxfmt Beta

Oxfmtがベータ版に達したことをお知らせし、大変嬉しく思います。

Oxfmtは、JavaScriptエコシステム向けに設計された、Rustで構築され、Prettierと互換性のあるコードフォーマッターです。最新のツールチェーンとの完全な互換性を実現しながら、パフォーマンスを大幅に向上させています。

ベンチマークでは、キャッシュなしの初期実行において、OxfmtはPrettierより30倍以上、Biomeより3倍以上高速です。詳細なベンチマーク結果をご覧ください。

12月のアルファリリース以降、追加のファイル形式に対応、埋め込み言語フォーマットの導入、インポートソート機能の追加、Tailwind CSS対応の統合、多数の安定性および互換性の改善を行ってきました。

すでにエコシステム全体で広く採用されています。Oxfmtを使用しているプロジェクトには以下が含まれます:openclaw/openclaw, vuejs/core, vercel/turborepo, huggingface/huggingface.js, getsentry/sentry-javascript, npmx-dev/npmx.dev など多数。

はじめ方

開発依存関係として oxfmt をインストールします:

sh
pnpm add -D oxfmt

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

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

ファイルをフォーマットします:

sh
pnpm run fmt

ファイルの書き込みをせずにフォーマットのチェックを行う:

sh
pnpm run fmt:check

Prettierからの移行

一度のコマンドでインストール、設定の移行、再フォーマットが可能です:

sh
pnpm add -D oxfmt && pnpm oxfmt --migrate prettier && pnpm oxfmt

完全な移行ガイドについては、Prettierから移行するをご覧ください。

AI移行プロンプト

または、このプロンプトをあなたのAIコーディングアシスタントにコピーして、プロジェクトの移行を行えます:

以下の手順に従って、このプロジェクトをPrettierからOxfmtに移行してください(参考:https://oxc.rs/docs/guide/usage/formatter.html):
1. oxfmtのインストールを行い、`oxfmt --migrate prettier` を実行
2. package.json内のスクリプトを oxfmt を使用するように更新
3. CIワークフローを `oxfmt --check` を使用するように更新
4. lint-stagedを `oxfmt --no-error-on-unmatched-pattern` を使用するように更新
5. 全てのファイルを再フォーマットするために oxfmt を実行
6. prettierおよび関連パッケージをアンインストール
7. エディタ設定を oxfmt 用に更新
8. CONTRIBUTING.md、AGENTS.md、または CLAUDE.md に prettier に関する記述がある場合はそれらも更新

さらに詳しい手順については、Oxfmtのドキュメントをご覧ください。

アルファリリース以降の新機能ハイライト

100% のPrettier互換性

現在、Oxfmtは、PrettierのすべてのJavaScriptおよびTypeScriptの適合テストを100%通過しています。残りわずかなフォーマットの不一致については、Prettierチームに報告済みであり、期待される挙動に整合させるため協力しています。

これにより、あなたは自信を持ってPrettierからOxfmtへの移行が可能です。カバーされていないケースに遭遇した場合は、報告してください

さらなるファイル形式対応

Oxfmtは現在、JavaScript、JSX、TypeScript、TSX、JSON、JSONC、JSON5、YAML、TOML、HTML、Angular、Vue、CSS、SCSS、Less、Markdown、MDX、GraphQL、Ember、Handlebarsのフォーマットをサポートしています。これにより、プロジェクト全体で1つのフォーマッターを使用できます。

Tailwind CSSの統合

JS/TSおよび非JS/TSファイルの両方に対して、自動的なTailwind CSSクラスソートがサポートされています。prettier-plugin-tailwindcssの機能は組み込み済みのため、このプラグインは必要ありません。

インポートソート

設定可能なオプションで利用できるインポートソート機能が新たに提供されました:

  • ignoreCase — 大文字・小文字を無視したソート
  • sortSideEffects — 側面効果付きインポートをソート
  • newlinesBetween — インポートグループ間の空行制御
  • groups — カスタムソート順序グループ
  • customGroups — カスタムグループ化ルールの定義

その他のオプションについては、完全なリファレンスをご覧ください。

package.json のフィールドソート

デフォルトで有効になっているpackage.jsonフィールドの自動ソートにより、package.json ファイルが一貫した状態に保たれます。

埋め込み言語フォーマット

テンプレートリテラル内に埋め込まれたコードをフォーマットできます (埋め込みフォーマットのガイド):

  • styled-components風の構文、styled-jsx、CSSプロップに対応したCSS-in-JS
  • Angular @Component のテンプレートおよびスタイル

Node.js API

プログラム的インターフェースが利用可能になりました:

ts
import { format, type FormatOptions } from "oxfmt";

const input = `let a=42;`;
const options: FormatOptions = {
  semi: false,
};

const { code } = await format("a.js", input, options);
console.log(code); // "let a = 42"

CLIの変更点

  • --init — 新しい設定ファイルの作成
  • --migrate prettier — Prettier設定からの移行
  • --migrate biome — Biome設定からの移行
  • --stdin-filepath — 標準入力のファイルパスを指定
  • グロブパターン拡張サポート — oxfmt './packages/**/*.{js,jsx}'

設定の変更点

エディタサポート

Oxfmtは、すべてのサポートエディタで動作します:VS Code、Cursor、Zed、IntelliJ IDEA、WebStorm、Neovim、および任意のLSP対応エディタ。

開発ロードマップ

安定版リリースに向けて、引き続きOxfmtの改善を進めていきます:

  • Prettierプラグインのサポート
  • xxx-in-jsフォーマットの改善
  • 安定性
  • パフォーマンス最適化

次のステップ

完全なインストールガイドは、Oxfmtのドキュメントに掲載されています。

問題の報告

フォーマットの差異について、フォーマット差異の議論をご参照ください。

コミュニティ参加

Oxfmtについてのご意見をお聞かせください。私たちとつながりましょう: