旧ブログ(ISSEN)から移行しました

TOKOS Tech Blog
Oxfmtへの移行方法【まだPrettier使ってるの？】

Oxfmtへの移行方法【まだPrettier使ってるの？】

TypeScript
JavaScript
西原月熙
西原月熙約11分で読めます
はてなブックマーク

はじめに

こんにちは、株式会社TOKOSのツキヤです！
今回は、Rust製の爆速フォーマッターであるOxfmtについて、Prettierからの移行方法をまとめていきます💪

Prettierより圧倒的に速いと謳っているので、気になっている方も多いのではないでしょうか？
Oxfmtは2026年2月にBeta版が公開され、PrettierのJS/TS適合テスト100%通過済みです✨
さらに、公式のClaude Skillを使えばコマンド1つで移行できます😎

本記事では、Oxfmtの概要・特徴、移行方法、実際にどれくらい速くなったのか、VSCode(Cursor)での設定方法、補足などを紹介していきます💪

対象読者

  • Prettierを使っていて速度が気になっている方
  • 新規プロジェクトのフォーマッター選定で迷っている方
  • Tailwind CSSを使っており、prettier-plugin-tailwindcssなしでclassNameを並び替えたい方
  • Claude Skillsを活用したツール移行の実例を知りたい方

Oxfmtの概要・特徴

概要

OxfmtはOxcプロジェクトに含まれるRust製のJavaScript / TypeScriptフォーマッターです。
最大の特徴は、圧倒的な速度とPrettierとの高い互換性です✨

Oxfmt

A collection of high-performance JavaScript tools written in Rust

oxc.rs

Prettierとの速度比較

公式ベンチマークでは、OxfmtはPrettier比で30倍以上と報告されています🚀
個人的には、これが一番のセールスポイントだと感じています😎

ツキヤ
ツキヤ

別のフォーマッターであるBiomeと比較しても、2〜3倍速いとのことです🏎️

All Benchmarks

A collection of high-performance JavaScript tools written in Rust

oxc.rs

Prettierの適合テスト100%通過

速度だけが売りではありません。
PrettierのJavaScript / TypeScript適合テストを100%通過しているのも、嬉しいポイントです🎉

これにより、PrettierからOxfmtに移行してもフォーマット結果がほぼ完全に一致します。
そのため、移行直後に巨大なdiffで悩むことがなく、心理的なハードルも非常に低めです🙌

今後のデファクト候補

同じくOxcプロジェクトの1つとして、ESLint代替のOxlintがあります。
今後はOxlintと合わせてデファクトスタンダードになる可能性が高いと思っています。

Oxlint

A collection of high-performance JavaScript tools written in Rust

oxc.rs
ツキヤ
ツキヤ

Linter周りで前々からOxcに期待していたんですが、フォーマッターまで本格化してきて嬉しい限りです✨

Tailwind CSSのサポート

個人的にかなり嬉しいのはTailwind CSSのサポート(classNameの並び替え)をしているという点です✨
Prettierは単体ではTailwind CSSのサポートはされておらず、プラグインを導入する必要がありました。
それに対しOxfmtは下記設定を追加するだけでTailwind CSSのサポートが可能です🙌

.oxfmtrc.json
{
  // その他設定...
  "sortTailwindcss": true,
}

sortTailwindcssはboolean値の他にオブジェクト形式でも指定可能で、prettier-plugin-tailwindcssと同じソートアルゴリズムを採用しています。
Tailwind CSS v3 (configオプション) / v4 (stylesheetオプション)の両方に対応しています。
さらにfunctionsオプションでclsx/cn/cva/twなどのユーティリティ関数内のクラス並び替えも可能です💪

ツキヤ
ツキヤ

prettier-plugin-tailwindcssからの乗り換えもスムーズに行えそうです🙌

Configuration file reference | Oxfmt

A collection of high-performance JavaScript tools written in Rust

oxc.rs

移行方法

Oxfmtへの移行方法は、大きく2通りあります。

方法A: Claude Skillを使う(個人的に推奨)

oxc-projectがClaude Skillsの公式スキルmigrate-oxfmtを公開しています。
Claude Codeなどを使っているなら、これがもっとも楽な方法です💪

ターミナル
npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt

このコマンドでスキルを追加した後、Claude CodeやCodex等で/migrate-oxfmtを実行するだけで、下記を自動でやってくれます🤖

  • oxfmtのインストール
  • oxfmt --migrate=prettierによる設定変換
  • package.jsonのscripts更新
  • CIやlint-stagedの更新
  • 全ファイルの再フォーマット
  • 不要になったprettier関連パッケージのアンインストール
  • エディタ設定ファイルの更新

実際自分もこちらの手法を用いて、ほぼ不具合なく移行できました✨
こちらの方が後述の方法Bよりも細かい部分をよしなにやってくれます。

oxc/.agents/skills/migrate-oxfmt/SKILL.md at main · oxc-project/oxc

⚓ A collection of high-performance JavaScript tools. - oxc-project/oxc

github.com
ツキヤ
ツキヤ

Skillsを使うと、コマンド1つで移行できるので考えることがほぼ無くなりました。これがAgent時代のツール移行体験ですね✨
(今回はSkillsについての説明は割愛しています🙏)

方法B: 手動で移行する

Skillsを使わない場合でも、下記ワンライナーで移行できます🎉

ターミナル
npm add -D oxfmt@latest && npx oxfmt --migrate=prettier && npx oxfmt

ただしこちらは.prettierrc.jsonから.oxfmtrc.jsonへの変換等までしか行ってくれません。
公式の移行ガイドに、より詳しい手順がまとまっています🙌

Migrate from Prettier | Oxfmt

A collection of high-performance JavaScript tools written in Rust

oxc.rs

実際に移行してみる

では、実際に方法Aでの本ブログのリポジトリを移行する手順を紹介します。
本ブログのリポジトリ詳細については、こちらの記事をご覧ください。

まずはskillsを追加します。

ターミナル
npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt

すると、いつものskills addと同様にagents選択画面等が出るので進めていきます。
自分はClaude Codeをメインで利用しているので、Claude Codeを選択します。

scopeはskills.sh(Claude Skillsの公式ハブ)の推奨通り「Project」にします。

Installation methodも推奨通りで「Symlink」にします。

すると、画像のようにSkillsがインストールされます。

これで準備完了です！
あとはClaude Codeで一応Planモードにしながら上記のskillを使いつつ以下プロンプトを打ってみます。

Claude Code
> /migrate-oxfmt 移行してください。

すると、スクリプトでは考慮されないような質問をしてくれました！

まずはmdxファイルの扱いについてです。
Prettierから完全に移行したいので1番を選択します。

次に、既存のprettier関連のパッケージの扱いについてです。
こちらももちろん削除したいので1番を選択します。

3つ目に、どの拡張子のファイルに対してフォーマットをさせるかです。
全拡張子を対象にして良いと思うので、こちらは2番を選択します。

最後に、一括フォーマットを行ってしまって良いかの確認をしてくれました。
こちらについては、僕が.prettierrc.jsonに"experimentalOperatorPosition"という設定を入れており、こちらはOxfmtのデフォルトと違う部分になるので確認してくれているようです。
強い意思があって上記設定をしているわけではなかったので、ここは2番を選択します。

最終的なプランにて、修正対象ファイル等が示されました。

問題無さそうなので、実行させてみます💪

...すると、かなりいい感じに移行が完了していそうでした✨
例えば、.oxfmtrc.jsonが作成されつつ、.prettierrc.json, .prettierignoreが削除されています。

なお、下記の設定値は本ブログの.prettierrc.json/.prettierignoreから自動引き継ぎされた本ブログ固有の値です。
そのままコピペすると意図せぬフォーマット結果になる可能性があるので、自プロジェクトで使う際は適宜調整してください🙏

.oxfmtrc.json(新規作成)
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all",
  "semi": false,
  "objectWrap": "preserve",
  "sortPackageJson": false,
  "sortTailwindcss": true,
  "ignorePatterns": ["package.json", "package-lock.json", "next-env.d.ts", ".next/", "node_modules/"]
}
.prettierrc.json(削除)
{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all",
  "semi": false,
  "objectWrap": "preserve",
  "experimentalOperatorPosition": "start"
}
.prettierignore(削除)
package.json
package-lock.json
next-env.d.ts
.next/
node_modules/

その他もいい感じに設定されていそうでした🙌

移行後 - 実際にどれくらい速くなったのか

本ブログ(TOKOS Tech Blog)のリポジトリで実測してみました🔥
対象ファイルは.ts/.tsx/.js/.jsx/.jsonの合計103ファイルです。

ターミナル
# Prettierの計測
time npx prettier --check './**/*.{js,jsx,ts,tsx,json}'
 
# Oxfmtの計測
time npx oxfmt --check './**/*.{js,jsx,ts,tsx,json}'

各3回計測した結果の中央値が下記です。

ツール全体所要時間（npx起動含む）
Prettier約1.01秒
Oxfmt約1.19秒

正直、本リポジトリは規模が小さいので、npxの起動コストの方が大きく、体感速度にはあまり差が出ませんでした🥲
(何ならOxfmtの方が若干遅い結果になっています...)

なので、他プロジェクト(中規模程度)の計測結果を見てみました。計測結果は下記です。

ツール全体所要時間（3回平均）
Prettier約3.03秒
Oxfmt約0.88秒

実測結果から、OxfmtはPrettier比で約3.5倍高速であることがわかります🔥

このことから、走査するコード量が多い場合は、Oxfmtの方が圧倒的に高速であることがわかります😎

ツキヤ
ツキヤ

実行時間が短すぎて、最初は「あれ？実行されてる？」と思ったほどでした😎

VSCode(Cursor)での設定方法

エディタ統合も簡単です。
公式のVSCode拡張機能Oxcをインストールして、settings.jsonを少し書き換えるだけで動きます🙌

1. 拡張機能のインストール

VSCodeで下記の拡張機能ページを開いてインストールしてください。

Oxc - Visual Studio Marketplace

Extension for Visual Studio Code - Oxlint and Oxfmt editor integration

marketplace.visualstudio.com

Cursorの場合は下記です。

Oxc – Open VSX Registry

Oxlint and Oxfmt editor integration

open-vsx.org

チーム開発の場合は、リポジトリ直下の.vscode/extensions.jsonに下記を記載しておくと、メンバーがVSCodeでリポジトリを開いた際に拡張機能のインストールを自動で推奨できます🙌

.vscode/extensions.json
{
  "recommendations": ["oxc.oxc-vscode"],
}

2. settings.jsonの設定

下記をユーザーまたはワークスペースのsettings.jsonに追記します。

settings.json
{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true,
}

または、言語ごとでの設定も可能です。

settings.json
{
  // 各言語のデフォルトフォーマッターをoxcに切り替え
  "[javascript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
  "[typescript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
}

これで保存時に自動でOxfmtによるフォーマットが走るようになります✨

Setup editors | Oxfmt

Configure Oxfmt in VS Code, Zed, JetBrains, and other editors.

oxc.rs

補足

バージョンが0系であることについて

Oxfmtは記事執筆時点(2026-05-17)ではまだバージョン0系(0.50.x)です。
通常、メジャーバージョン0のツールには慎重になるべきでしょう。

ただ、Oxfmtの場合はフォーマッターという性質上、生成物が壊れるタイプのリスクは小さいです💪
出力に不満があればPrettierに戻せば良いだけなので、気軽に試して問題ない範囲だと考えています。

業務プロジェクトでの導入実績

自分は実プロジェクトですでにOxfmtを導入しています。
Prettierと比較してデグレや不具合は今のところ発生していません💪

JS/TS適合テスト100%通過の実績どおり、移行直後のdiffもほぼ無く、心理的なハードルもかなり低かったです✨

Biomeとの比較

JavaScript / TypeScriptの新世代ツールとして、Rust製のBiomeという有力な選択肢もあります。
フォーマッターとしてのOxfmtは、Biomeと比べて下記の点で優位です🔥

  • 速度: OxfmtはBiome比で約2〜3倍高速
  • Prettier適合性: Oxfmtの方がPrettierとのフォーマット差分が小さい

VueやViteの作者であるEvan Youさんも、X(Twitter)で下記のように評しています。

Evan Youさんの投稿(抜粋)
- Biomeより2〜3倍高速
- Prettierより45倍高速
- BiomeよりもPrettierの仕様に準拠しているため、移行しても差分が大きく発生しない
- Prettierよりも柔軟な改行設定が可能

Evan You (@evanyou) on X

oxfmt (the oxc-based formatter) is getting very close to ready! - 2-3x faster than Biome - 45x faster than Prettier - Better prettier conformance than Biome means switching won’t cause huge diffs - More flexible line wrapping than Prettier We have tested oxfmt against several

x.com

個人的には、フォーマッター単体ではOxfmtが現時点のベストだと感じています😎

おわりに

今回は、Rust製の爆速フォーマッターOxfmtへの移行方法を、本リポでの実測値も交えて紹介しました🎉

  • 速度はPrettier比で大幅に向上
  • Prettier適合性100%で移行diffがほぼ出ない
  • Claude Skillで一発移行可能
  • VSCode・Cursor拡張も用意済み

ここまで揃っていれば、もう移行しない理由が見当たらないですよね😎
ぜひ皆さんもPrettierからOxfmtへの乗り換えを試してみてください🙌

The JavaScript Oxidation Compiler

A collection of high-performance JavaScript tools written in Rust

oxc.rs

この記事を書いた人

西原月熙
西原月熙

TOKOSのテックリード。上流工程からコーディング、インフラ系まで色々やっている器用貧乏です。最近は特にフロントエンドのキャッチアップに力を入れています💪 好きな音楽はボーカロイドです🤖

関連記事

【JavaScript】Temporalによる日時操作を学ぶ
2026-03-16

【JavaScript】Temporalによる日時操作を学ぶ

JavaScript
【Next.js】TOKOSテックブログをリニューアル！技術構成と工夫を紹介
2026-03-07

【Next.js】TOKOSテックブログをリニューアル！技術構成と工夫を紹介

React, Next.js, TypeScript
JavaScriptで戻る・進むを制御する方法（History API解説）
2025-09-21

JavaScriptで戻る・進むを制御する方法（History API解説）

JavaScript