本文へ移動
技術を、自社の仕事に。
判断と実行を助けるメディア

記事を検索

bun fmtはPrettierの代わりになるか 1,326ファイルで比べた

目次 · 7項目

保存のたびの整形、プルリクエストごとの prettier --check、コミット前のフック。Web サイトや業務アプリのリポジトリでは、Prettier を1日に何度も動かします。ファイルが増えるほど、CI の待ち時間にも効いてきます。

2026年10月22日に公開された Bun 1.4.4 には、bun fmt という整形コマンドが入っています。Bun のドキュメントは「Prettier と同じ出力」「既存の Prettier や oxfmt の設定で動く」と説明しています。リリースノート(Bun のブログ)は、Prettier 自身のリポジトリ(2,616ファイル)で --check が Prettier 3.9.10 の17.1秒に対して59.7ミリ秒だったと紹介しています。検証環境で1つ前の版(1.4.3)を試すと、bun fmt は使えず、「Script not found “fmt”」と表示されました。

本当に置き換えられるのか。編集部は、このサイト(Astro で作っています)のソースを複製したファイルで、Prettier 3.9.10 と時間・出力を比べました。結果と、置き換える前に確かめたい点をまとめます。

比べた条件

  • 環境: Linux のコンテナ(4コア)、npm で入れた bun@1.4.4 と prettier@3.9.10
  • 対象: 弊社サイトのリポジトリの src と scripts から、Markdown(1,151)、.mjs(139)、TypeScript(23)、CSS(13)の計1,326ファイルを別のフォルダに複製したもの(約17MB)
  • 設定: 空の .prettierrc({})。どちらも同じ設定を読む
  • 手順: 複製したフォルダで bun fmt --check . と prettier --check . をそれぞれ3回実行して時間を測った。続けて、別々の複製に bun fmt . と prettier --write . をかけ、結果をファイルごとに比べた

複製したファイルは、ほとんどが Prettier で整形されていない状態でした。どちらのツールも、整形が必要なファイルを1,324件と数え、その一覧も一致しました。

時間と出力の違い

--check の時間は、bun fmt が 0.18〜0.21秒、Prettier が 31.05〜31.37秒でした。この環境・この対象での3回の計測で、ほかの環境やファイルの構成で同じ比になるとは限りません。

bun fmt 1.4.4とPrettier 3.9.10の比較結果の図。1,326ファイルの--checkはPrettierが約31秒、bun fmtが約0.2秒(3回の計測)。整形の結果が違ったのは3ファイルで、2ファイルはCSSのカスタムプロパティの16進の色の大文字・小文字(Prettierは小文字にし、bun fmtはそのまま)、1ファイルはMarkdownのリストの中のコードブロックの行末の空白だった。Astroのファイルはbun fmtでは整形されず、インストール済みのPrettierに渡される

整形の結果を比べると、1,326ファイルのうち違ったのは3ファイルでした。

違い該当Prettier 3.9.10bun fmt 1.4.4
CSS のカスタムプロパティの値にある16進の色CSS 1・Markdown 内の CSS 1#176b87(小文字にする)#176B87(書いたまま)
Markdown のリスト内のコードブロックの行末の空白Markdown 1消す残す

通常のプロパティの色は、どちらも小文字にしました(color:#FFF は両方 #fff)。違いが出たのは --color-primary: #001C30; のようなカスタムプロパティの値です。

Bun の移行の手引きは「bun fmt と Prettier 3 の出力が違えば不具合」とし、意図的な違いを一覧で示しています。その一つが「Prettier の出力がファイルの意味を変えるところでは、Bun の出力は違う」という項目です。上の2つは、2026年10月29日の時点で一覧の例には書かれていませんが、どちらもこの方針による意図的な違いでした。

  • Bun 1.4.4 に入ったプルリクエスト(#45800)の説明は、意味を変えずに残すものとして、CSS では「カスタムプロパティの値のトークン」、Markdown では「コードの行末の空白」を挙げている
  • Markdown の件は10月28日に issue(#47214)で報告され、「コードブロックの中身は書いたままにする」という理由で、直さない扱い(not planned)で閉じられた

つまり、この2つは今後の版でも Prettier に合わせて変わるとは限りません。チームで出力をそろえる必要がある場合は、最初の1回で差分が出るものとして見ておき、受け入れるかを決めておくのが確実です。

Astroのファイルは、Prettierに任される

Astro で作ったサイトでは、ここが重要です。Bun のドキュメントには「Astro は組み込まれていない」とあり、.prettierrc に Astro のプラグインが書かれていれば、.astro ファイルはインストール済みの Prettier に渡されます。

実際に、prettier-plugin-astro を plugins に書いた設定で bun fmt --doctor を実行すると、次のように表示されました。

Using .prettierrc (Prettier config)

    6 files are formatted natively
    1 file goes to your installed Prettier: 1 *.astro

Plugins that use your installed Prettier: prettier-plugin-astro

.astro の整形結果は、Prettier に直接かけたものと同じでした。一方、プラグインを書いていない設定では、bun fmt も Prettier も .astro の言語を判断できず、終了コード2で止まりました。Astro のサイトで bun fmt に替えても、Prettier と Astro のプラグインは削除できません。.astro の多いリポジトリでは、時間の短縮も小さくなると考えられます(この記事の計測には .astro を含めていません)。

置き換えで変わる動き

手引きの「意図的な違い」と、編集部が試した結果です。スクリプトや Git のフックを書き換えるときに影響します。

  • 既定で書き込む: bun fmt file.ts はファイルを書き換えて名前を表示する。prettier file.ts のように整形結果を表示するには --stdin-filepath を使う。--write は受け付けるが意味はない
  • 引数なしは現在のフォルダ全体: Prettier は引数がないとエラーになるが、bun fmt はフォルダ全体を整形する。git diff --cached --name-only | xargs bun fmt のように、ファイルの一覧が空になり得る書き方は、全体を書き換える。手引きは bun fmt --staged か xargs -r を勧めている
  • fmt という名前のスクリプトが優先される: package.json に fmt スクリプトがあると、bun fmt はそのスクリプトを実行する。試した環境でも、"fmt": "echo ..." を置くと整形せずにそのスクリプトだけが動いた。--no-script を付けると常に整形する
  • 終了コード: 整形が必要なファイルがあれば1、なければ0、構文エラーなどの失敗は2。知らないオプションはエラーで止まる(試した環境では --foo で終了コード2)
  • プラグイン: Tailwind CSS のクラスの並べ替え、import の並べ替え、Svelte、package.json の並べ替えなど7つは組み込み。それ以外のプラグインが設定にあると、そのファイルは整形せずに終了コード2になる(--allow-unsupported を付けると、プラグインなしで整形する)

CI で prettier --check . を bun fmt --check に替えるだけなら、終了コードの扱いはほぼ同じです。ただし、Prettier が1を返していた失敗の一部は、2になります。

移行の前にやること

編集部としては、次の順番を勧めます。

  1. bun fmt --doctor を実行する: 整形も書き込みもしない。どのファイルを自前で整形し、どれを Prettier に渡すか、削除できるパッケージが表示される
  2. 別のブランチで全体を整形し、差分を読む: 今回のようなカスタムプロパティの色や、Markdown の空白の違いが出ないかを見る。差分が出たら、チームで受け入れるか、Prettier のままにするかを決める
  3. スクリプト・フック・CI を書き換える: fmt という名前のスクリプト、引数が空になり得るフック、prettier file で結果を表示していた処理を確認する
  4. エディタの設定を確認する: エディタの Prettier の拡張機能が使う prettier は残す(手引きも、その場合は残すよう書いている)

整形のような開発の道具を替えるときは、速さだけでなく、出力が変わったときに誰が気付くかを決めておくと安心です。フロントエンドの道具を移すときの確認は、Vite+ 1.0 正式版に移る前の確認や、Vite 8 の Rust バンドラーでも扱いました。

確認した範囲

2026年10月29日に、npm から bun@1.4.4・bun@1.4.3・prettier@3.9.10・prettier-plugin-astro@0.14 を入れ、Linux のコンテナで試しました(実機検証)。仕様は、GitHub の oven-sh/bun のリポジトリにある整形のドキュメント(docs/format/index.mdx)と移行の手引き(docs/guides/format/migrate-from-prettier.mdx)で確認しました(資料調査)。公開前の10月29日に、bun.com のリリースノートと、プルリクエスト #45800・issue #47214 も確認しました。時間は1つの環境での3回の計測で、macOS・Windows、.astro を多く含むリポジトリ、エディタとの連携は試していません。

フロントエンドの開発環境やCIの見直しは、開発・AI・自動化のご相談からお問い合わせください。

参考資料

この記事を共有XFacebook
鈴木 翔

技術の可能性に魅了され、学生時代からプログラミングとデジタルアートの分野に深い関心を持つ

この記事のテーマを、自社の次の一歩へ

Webサイトで、実現したいことから。

使う人の目的、必要な機能、更新の体制を整理し、制作・改善で最初に取り組むことを考えます。

  • サイトの目的
  • 機能と使いやすさ
  • 公開後の運用
Web制作・改善を相談する

構想段階からご相談いただけます。この記事の情報を相談フォームに引き継ぎます。

最新記事をメールで受け取る・Web制作ガイドを読む
無料ダウンロード

Web制作 費用・発注・集客 完全ガイド【2026年版】

費用相場・制作会社の選び方・集客戦略をPDFにまとめました。

The PDF and newsletter emails are currently in Japanese.

メルマガにも登録されます。いつでも解除可能です。