コードフォーマッター・整形ツール

コードのインデントと改行を整えます。JavaScript・CSS・HTML・JSONは圧縮もできます。

コード入力

ファイルはUTF-8として読み込みます(5MBまで)。拡張子から言語を選び直します(.txt などは言語を変えません)。

フォーマット設定

言語ごとの処理

JavaScript・TypeScript

Prettier で整形します(JSX にも対応)。構文チェックあり。圧縮は JavaScript のみ。

HTML

js-beautify でタグの入れ子に合わせてインデントを整え、120文字を超える行は折り返します。構文チェック・圧縮あり。

CSS・SCSS・Less

Prettier で整形します。構文チェックあり。圧縮は CSS のみ。

JSON

値の書き方(数値の桁数、キーの順番や重複)を変えずにインデントを付け直します。構文チェック・圧縮あり。

Java・C/C++・C#・PHP

{ } ( ) [ ] の入れ子の深さからインデントだけを付け直します。改行の位置は変えません。構文チェック・圧縮なし。

SQL

SELECT・FROM・WHERE などの句ごとに改行し、予約語を大文字にします。構文チェック・圧縮なし。

Python

インデントは変えません。行末の空白の削除と、3行以上続く空行を2行にまとめる処理だけを行います。構文チェック・圧縮なし。

サンプルコード

コードフォーマッター・整形ツールについて

整形

インデントと改行を整えます。言語ごとの処理は上の一覧のとおりです。

圧縮

JavaScript・CSS・HTML・JSONのコメントと不要な空白・改行を取り除きます。引用符で囲んだ文字列の中身は変えません。

構文チェック

JavaScript・TypeScript・HTML・CSS・SCSS・Less・JSONの構文エラーを、行・列とともに表示します。

ファイルの読み込み・保存

コードファイルを読み込み、結果を formatted-code.js などの名前で保存します。拡張子は選んだ言語に合わせます。

整形・圧縮・構文チェックの仕様

  • 言語は自動判定しません。コードに合わせて選んでください(ファイル読み込み時は拡張子から選び直します)。
  • セミコロン・末尾カンマの設定は JavaScript・TypeScript に、クォートの設定は JavaScript・TypeScript・CSS・SCSS・Less に使います。末尾カンマは複数行の配列・オブジェクトなどに付けます。
  • JavaScript・CSSに構文エラーがある場合は、js-beautify による簡易整形に切り替え、エラーの位置を表示します。このときセミコロン・クォート・末尾カンマの設定は反映されません。TypeScript・SCSS・Lessは構文エラーがあると整形しません。
  • JSONは構文エラーがあると整形しません。整形・圧縮のどちらでも、数値の表記(1.0 や桁数の多い整数)、キーの順番、重複したキーはそのまま残します。
  • Java・C/C++・C#・PHPは、文字列やコメントの中の括弧を数えずにインデントを付け直します。複数行にまたがる文字列(テキストブロック・ヒアドキュメントなど)の行、C/C++・C#の # で始まる行、PHPの <?php の外側は変更しません。case の下の文や、括弧のない if 文の次の行は字下げしません。
  • SQLは予約語(SELECT・FROM・WHERE・AND など)だけを大文字にし、テーブル名・列名・関数名・文字列・コメントは変えません。文字列の中の「\'」の扱いがデータベースにより異なり、文字列の終わりを判断できない場合は整形しません。
  • JavaScriptの圧縮では、圧縮後のコードを読み直して元と同じ構文になることを確かめます。確かめられない場合は圧縮しません。/*! で始まるコメントと先頭の #! 行は残します。
  • CSSの圧縮では、/*! で始まるコメント以外を削除し、{ } ; , の前後と : の後ろの空白を詰めます。HTMLの圧縮では、条件付きコメント以外のコメントを削除し、連続する空白・改行を1つの空白にまとめます。pre・textarea・script・style・title の中は変更しません。CSSで white-space: pre などを指定している要素は、表示が変わる場合があります。
  • TypeScript・SCSS・Less・Python・Java・C/C++・C#・PHP・SQLは圧縮の対象外です。Python・Java・C/C++・C#・PHP・SQLは構文チェックの対象外です(構文チェックなし)。
  • HTMLの構文チェックは、閉じタグの対応など、パーサーが検出できる誤りだけを確認します。エラーの内容はパーサーの英語のメッセージで表示します。
  • 改行コードはLFにそろえます。結果の保存はUTF-8(BOMなし)です。

使用例

  • 開発作業 - コードレビュー前の整形・統一
  • リファクタリング - 既存コードの可読性向上
  • デバッグ作業 - 1行に詰められたコードやJSONの整形・確認
  • 構文の確認 - 貼り付けたコードの構文エラーの位置を確認
  • サイズの削減 - JavaScript・CSS・HTML・JSONのコメントと空白を除いた圧縮
ブラウザ内で処理

処理はブラウザ内で行い、入力したコードをサーバーへ送信しません。