JavaScript整形

エディタのPrettierとまったく同じようにJavaScriptとJSXを整形します。インデントはスペース2つ・4つ・タブ、行幅は80・100・120・160文字、クォートはシングルかダブル、セミコロンの有無を選べます。括弧の対応がずれていれば、壊れた出力ではなく行と列付きのエラーで知らせます。

使い方

1. 言語を選び（貼り付けやファイルのドロップで自動判定されます）、コードを貼り付けるかファイルを開きます。
2. 「整形」はPrettier（SQLはsql-formatter）で整形します。インデントと行の幅、JavaScriptではクォートとセミコロン、SQLでは方言とキーワードの大文字・小文字を選べます。
3. 「圧縮」はHTML、CSS、JSON、XML、SQL、GraphQLのコメントと空白を削除します。JavaScriptとTypeScriptは空白とコメントの削除のみです。
4. 構文エラーは行と列、^印で正確に表示されます。エラーをタップするとその位置へ移動します。
5. 結果をコピー・ダウンロードするか、そのまま入力として使えます。

• 整形はブラウザ内のバックグラウンド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 のパラメーターを正しく扱います。

よくある質問