コードフォーマッター

機能

コードフォーマッターは、詰め込まれたコード、minify されたコード、インデントがばらばらなコードを、きれいで一貫したスタイルに整えて出力します。Web 開発でよく扱う言語に対応しています：HTML、CSS、SCSS、Less、JavaScript、TypeScript、JSON、XML、Markdown、YAML、GraphQL。

内部では数百万のプロジェクトで使われているフォーマッター Prettier を実行しているため、VS Code や pre-commit フックで整形したコードとまったく同じ見た目になります。各言語のパーサーは選択したときに初めて読み込まれるので、ページは軽快に動作します。

使い方

1. コードの 言語 を選びます。
2. コードを貼り付けるか、ファイルを開きます。
3. インデント の種類（スペース 2 つ、スペース 4 つ、タブ）と 行幅 を選びます。行幅を超える行は、言語の許す範囲で折り返されます。
4. JavaScript と TypeScript では、文末に セミコロン を付けるかどうかを選びます。スクリプトやスタイルシートでプロジェクトが好む場合は シングルクォート を選びます。
5. 結果をコピーするか、ダウンロードします。

例

サンプルは、インラインの CSS と JavaScript を含む 1 行の HTML ページです。整形すると各要素がそれぞれの行に配置され、CSS ルールは 1 行に 1 宣言ずつ展開され、スクリプト内のアロー関数には括弧とセミコロンが付きます：

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

ヒント

• 整形は手軽な構文チェックとしても使えます。Prettier が入力を解析できない場合、エラーメッセージに行と列が表示されるので、間違いの箇所にすぐ移動できます。
• XML は空白を意味のないものとして扱って整形するため、ネストしたタグがインデントされます。要素内の空白をそのまま保持する必要があるドキュメントでは、使う前に結果を確認してください。
• 逆の処理が必要なら、本番用にコードを縮小する JavaScript・CSS 圧縮ツールや、JSON の検証と圧縮ができる JSON フォーマッターを使ってください。