prettier-compare について
prettier-compareは、フォーマッターの変更を出荷する前にBiomeとPrettierの整形結果を比較するBun製CLIスキルです。コード片、ファイル、標準入力に対応し、比較前にBiome WASMを再ビルドします。
主な機能
- 01BiomeとPrettierの出力比較
- 02中間表現出力の確認
- 03コード片・ファイル・標準入力の処理
- 04比較前のBiome WASM再ビルド
活用シーン
- 01出荷前のフォーマッター変更確認
- 02コード片の整形結果比較
- 03ファイルやエディター選択範囲の出力確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ biomejs/ biome --skill prettier-compareインストール後、Claude Code で/prettier-compareを入力して読み込まれたか確認します。
詳細
目的
フォーマッターの変更をリリースする前に、packages/prettier-compare/ を使って、Biome と Prettier のフォーマット結果の違い(IR 出力を含む)を確認します。
前提条件
- 相対パスが正しく解決されるよう、すべてのコマンドをリポジトリのルートから実行します。
bunを使用します(CLI は Bun スクリプトです)。依存関係がインストールされていることを確認してください。- Biome の WASM バンドルを現在の Rust の変更に合わせるため、必ず
--rebuildを指定します。
コードの規約
重要:絵文字は禁止です
Prettier 比較用のコードと出力では、絵文字を禁止します。
- 比較スクリプトに絵文字を使用しないでください
- テストファイルに絵文字を使用しないでください
- 出力や診断メッセージに絵文字を使用しないでください
コードはすべて、プロフェッショナルで絵文字のない状態にしてください。
よくあるワークフロー
CLI 引数として渡すスニペット:
bun packages/prettier-compare/bin/prettier-compare.js --rebuild 'const x={a:1,b:2}'
言語を強制的に指定する(ツールがファイル名から言語を推測できない場合に便利です):
bun packages/prettier-compare/bin/prettier-compare.js --rebuild -l ts 'const x: number = 1'
ディスク上のファイルを比較する:
bun packages/prettier-compare/bin/prettier-compare.js --rebuild -f src/example.tsx
標準入力から読み取る(エディターで選択した範囲をパイプで渡す場合に便利です):
echo 'const x = 1' | bun packages/prettier-compare/bin/prettier-compare.js --rebuild -l js
ヒント
- 拡張子のないコードをフォーマットする場合は、
-l/--languageを使って、両方のフォーマッターが正しいパーサーを選択するようにします。 - 大きなサンプルやスナップショットテストには、
-f/--fileを使うと、プロジェクトのフィクスチャを直接使って反復できます。 - CLI の詳細については
packages/prettier-compare/README.mdを参照してください。ここで更新を反映する場合も、コマンドに--rebuildを含めるという必須要件を守ってください。 - CLI 引数として渡すコードスニペットには、シェルによる解釈の問題を避けるため、シングルクォートを使用します。
- CLI 引数として渡した
"\n"は改行にエスケープされません。実際の改行を記述するか、代わりにファイルを使用してください。 --rebuildを指定しても、読み取り専用モードや計画モードでこのツールを実行できます。Biome の WASM バンドルを再ビルドするだけで、ソースファイルは変更されません。
コメント
Markdown 対応