コード整形ツール

HTML Formatter

PrettierでHTML文書や一般的なコード断片を解析し、読みやすく整形します。

Ctrl / ⌘ + Enterで実行
読み取り専用の結果

PrettierでHTML文書や一般的なコード断片を解析し、読みやすく整形します。

このツールでできること

HTML Formatter は、正規表現に依存して自由に行を折り返すのではなく、Prettier の HTML パーサーと関連プラグインを使用して構文ツリーを構築します。スクリプトおよびスタイル内の埋め込みコードも、対応する解析プラグインによって処理されます。

  • コードは文字列として解析されるだけで、DOM に挿入されたり、実行可能な iframe に置かれたりすることはありません。
  • 完全なドキュメントと一般的な HTML スニペットをサポートします。
  • 解析エラーが発生すると、特定のメッセージが表示され、入力が保持されます。

使い方

  1. HTML ドキュメントまたはスニペットを貼り付けます。
  2. スペース 2 つまたは 4 つのインデントを選択します。
  3. 「HTMLのフォーマット」をクリックします。
  4. 結果をコピーするか、formatted.html をダウンロードします。

主な用途

  • 圧縮されたテンプレートを整理します。
  • コードレビューの前にインデントと属性の折り返しを統一します。
  • ラベル構造に明らかな問題がないか確認します。

HTML Formatterの機能

Prettier を使用して HTML を解析してフォーマットし、完全なドキュメントと一般的なコード スニペットをサポートします。日常的な開発、デバッグ、データの並べ替え、コードの最適化のシナリオに適しています。処理結果を直接閲覧、コピー、ダウンロードすることができます。

FAQ

ツールはスクリプトを実行しますか?

絶対に違います。 HTML は単にテキストとして書式パーサーに渡され、結果は読み取り専用のテキスト ボックスにも表示されます。

出力スタイルが元のテキストと異なるのはなぜですか?

Prettier は、一貫した決定論的な書式設定ルールを使用し、場合によっては属性を再ラップしたり、一部のタグを書式設定したりします。

スタイルとスクリプトを含むページをフォーマットできますか?

はい、ページは、一般的な埋め込みコンテンツを処理するために、オンデマンドで HTML、CSS、および JavaScript 解析プラグインを読み込みます。

開発者向けツール一覧に戻る