1行に詰まったHTMLや乱れたHTMLを貼り付けると、要素ごとに改行して入れ子のインデントを付けます。長い属性は行幅で折り返し、<style> と <script> の中身もCSSとJavaScriptとして整形します。閉じていないタグは行と列で示します。
使い方
- 言語を選び（貼り付けやファイルのドロップで自動判定されます）、コードを貼り付けるかファイルを開きます。
- 「整形」はPrettier（SQLはsql-formatter）で整形します。インデントと行の幅、JavaScriptではクォートとセミコロン、SQLでは方言とキーワードの大文字・小文字を選べます。
- 「圧縮」はHTML、CSS、JSON、XML、SQL、GraphQLのコメントと空白を削除します。JavaScriptとTypeScriptは空白とコメントの削除のみです。
- 構文エラーは行と列、^印で正確に表示されます。エラーをタップするとその位置へ移動します。
- 結果をコピー・ダウンロードするか、そのまま入力として使えます。
- 整形はブラウザ内のバックグラウンドWorkerで実行されるため、大きなファイルでもページが固まらず、コードが送信されることもありません。
- 各言語のプラグインは初めて使うときにだけ読み込まれます。
- コメントや末尾カンマを含むJSON（JSONC）も整形できます。圧縮には厳密なJSONが必要です。
- YAMLとMarkdownは安全に圧縮できないため、整形のみ対応しています。
フォーマッターを使う理由
書式がそろっていると、コードレビューで空白ではなくロジックに集中でき、差分も小さく保てます。Prettierは構文木からファイル全体を書き直すため、元のインデントがどうであっても同じ結果になります。選べるのは、インデント幅またはタブ、行の幅（初期値80文字）、JavaScriptならシングル／ダブルクォートとセミコロンの有無など、少しだけです。
整形の前に必ず構文を解析するので、手軽な構文チェックとしても使えます。括弧の閉じ忘れや閉じていないタグがあると整形が止まり、正確な位置に印が付きます。スタックトレースを読むより早く原因を見つけられることも多いです。
整形と圧縮
整形は人が読むための改行とインデントを加えます。圧縮は機械向けにコメントと空白を取り除きます。HTMLでは空白をまとめつつ pre と textarea の中身は保持し、CSSでは /*! ライセンス */ 以外のコメントを削除し、SQL・JSON・XML・GraphQLは1行にまとめます。JavaScriptとTypeScriptでは空白とコメントを詰めるだけで、バンドラーのように変数名を短くすることはしません。YAMLとMarkdownは空白に意味があるため、整形のみ対応しています。
SQLの整形
SQLには標準の書き方がありません。ここではキーワードを大文字・小文字のどちらにもでき、方言を選ぶとMySQL、PostgreSQL、SQL Server（T-SQL）、Oracle PL/SQL、SQLite、BigQuery、Snowflakeなどの構文、たとえばバッククォートの識別子、:: によるキャスト、$1 のパラメーターを正しく扱います。
よくある質問
コードはサーバーにアップロードされますか？
されません。整形はブラウザ内のWeb Workerで行われ、コードは端末の外に出ません。社外秘のコードや認証情報を含むファイルでも安心です。
どの言語のコード整形に対応していますか？
HTML、CSS、SCSS、LESS、JavaScript、JSX、TypeScript、TSX、JSON、20種類の方言のSQL、XML、YAML、GraphQL、Markdownです。貼り付けやファイルのドロップで言語を自動判別します。
プロジェクトのPrettierと同じ結果になりますか？
同じオプションなら同じになります。中身はPrettierそのものなので、インデント・行幅・クォート・セミコロンをそろえれば prettier --write と同じ出力です。
構文エラーで整形できないのはなぜですか？
整形の前にコードを解析するため、正しくないコードは整形できません。メッセージに行と列が出るので、その場所を直せば整形できるようになります。
JavaScriptを圧縮すると変数名も短くなりますか？
なりません。コメントと不要な空白を取り除くだけです。変数名の短縮や不要コードの削除まで行う本番用のバンドルには、esbuildやTerserなどのビルドツールを使ってください。
コメント付きのJSONも整形できますか？
整形はできます。tsconfig.jsonのようにコメントや末尾カンマを含むJSONC形式も受け付けます。圧縮には厳密なJSONが必要です。