私は生活のためのツールを構築し、誰かを読む前に行う唯一の最も一般的なこと& #39; s フロントエンドはフォーマッタを介して、それらのHTMLを実行します. サーバーテンプレートは、1 行にマークアップを吐き出す バンドラーがそれを崩壊させる 誰かがSlackに貼り付けるスニペットは、斜角括弧の壁に平らに入れ子の3 つのレベルで到着します. 私は読み取れないものをデバッグすることができないので、最初の動きは常に同じです: それを貼り付け、beautifyを打つと、構造自体が明らかにするようにします. このガイドは、私は手でマークアップを再びインデントするために使用し、半分の間間違ってしまった私の若い自己を渡していたことを望むものです。
tl;dr: HTMLフォーマッターはマークアップを再インデントして構造を読み取れるようにし、縮小化して小さく出荷できるようにします ビルドやデバッグ中にbeautifyを使い、本番用にminifyを使います HTML フォーマッタ Toolz.dev では、ブラウザーで実行し、スクリプト、スタイル、コンテンツの事前バイト単位を維持し、何もアップロードしません。
HTMLフォーマッタとは何ですか?
HTMLフォーマッタは、あなたのマークアップをそのタグツリーに解析し、ネスト深さごとに1 つのレベル、一貫したインデントでそれを印刷し直すツールです。 beautifyの方向です。 reverse、minify、tags間の取るに足らない空白をストリップして、ブラウザがそれをレンダリングする方法を変更することなく、ファイルができるだけ小さいようにします。 Toolz.dev上のものを含むほとんどの優れたフォーマッタは、同じ入力から両方を行います。
"insignificant" という単語は、その文で実際の作業を行っています。 HTML では、空白が重要で、そうでないものもあります。改行と、クロージングの間に置く 2 つのスペース </li> そして次 <li> レンダリングされたページについては何も変更しないので、フォーマッタは自由に追加、削除、正規化することができます。 しかし、 a の中のスペース <pre> ブロック、または 2 つのインライン間の 1 つのスペース <a> 要素、ユーザーが見ているものの一部です。違いがレイアウトを喜んで壊してしまうことを理解していないフォーマッター。これは、役立つフォーマッターと不信感を覚えるフォーマッターの間の境界線です。
使用したことがある場合 プレティエ エディターでは、ツールがインデントを保証するため、インデントを気にする必要がなくなるという感覚がすでにわかっています。ブラウザベースのフォーマッターは、プロジェクトをセットアップすることなく、制御できないワンオフのスニペット、生成された出力、マークアップに対して同じ保証を提供します。
そもそもなぜHTMLは面倒な結果になってしまうのでしょうか?
フォーマッタが生き残るために何が必要かを教えてくれるので、混乱がどこから来たのかを知るのに役立ちます。
最初のソースはサーバーレンダリングです PHPテンプレート、Railsビュー、またはBladeファイルは、テンプレートエンジンが生成するように感じた空白でHTMLを放射し、ミニフィケーションミドルウェアが実行された後、多くの場合、数千文字の単一行ブラウザで何かが間違って見え、ヒットしたとき " ソースを表示, " それが得られます。
2 つ目のソースはコピーアンドペーストです デザインシステムからコンポーネントをつかむとか CMSの断片 誰かが送ってきたメールテンプレート そしてそれはソースが使う間隔を 取ります 混合タブとスペース 一貫性のないネスト 末尾の空白 1週間のうちを WordPressとヘッドレスCMS出力の中で過ごします CMS生成マークアップは最悪の部類に入ります それぞれ異なるフォーマットだった断片から組み立てられるからです。
3 つ目のソースは生成されたマークアップです ビルドツール、WYSIWYGエディター、エクスポート関数は、人間が読むことを意図したものではなかったHTMLを生成します 正しいですが、不透明です フォーマッターはそれを監査できるものに戻します。
共通するのは、これらのソースのどれも、結果を読み取れるかどうかを気にしないということです。それがあなたの仕事であり、フォーマッターが最も速い方法です。
HTMLをオンラインでフォーマットするにはどうすればよいですか?
Toolz.dev のワークフローには約 10 秒かかります:
- を開きます HTML フォーマッタ そして入力パネルにマークアップを貼り付けます。 1 行に縮小されるか、不一致にインデントされるか、または裸のフラグメントであるかは関係ありません。
- Beautify を選択して展開するか、Minify を選択して圧縮します。
- Beautify の場合、インデントを選択します: 2 スペース、4 スペース、またはタブ。 2 つのスペースが一般的な Web デフォルトです。
- オプションで、"Remove comments" にチェックマークを付け、出力から HTML コメントを削除します。
- 結果をコピーするか、としてダウンロードします
.htmlファイル。
すべてクライアント側で実行されます。パーサーはブラウザの JavaScript なので、マークアップがサーバーに触れることはありません。これは人々が想定するよりも重要です。これについては後で説明します。
美容とミニ化の違いは何ですか?
これらはパーサーを共有する逆の操作であり、それぞれにいつ到達するかを知ることがスキルのほとんどです。
美化とは人間のためのものです改行とインデントを追加してネストが見えるようにしますこれは編集中やデバッグ中や2 つのバージョンを差分したりプルリクエストのレビュー中に欲しいものですレイアウトバグを狩っているときはまず美化をしてどの要素が閉じられていないかネストされているのが1 レベル深すぎるかを確認できるようにします。
縮小化は機械のためです ブラウザが無視する空白を削除するので ファイルは小さくなり転送も速くなります HTMLを縮小するのは CSSやJavaScriptを縮小するのと同じ理由でです バイトオーバーワイヤーで時間がかかり 大きなページで空白が足し算されるのに 既に頼っている場合です HTML ミニファイア 本番環境の圧縮では、フォーマッタは、何かが壊れたときにその出力を再度読み取るために使用するツールです。
実際に異なる決定について、2 つの方向がどのように比較されるかは次のとおりです:
| アスペクト | 美化する | ミニファイ |
|---|---|---|
| ゴール | 可読性 | 最小 ファイル |
| タグ間の空白 | 追加され、正規化されました | 削除しました |
| 出力サイズ | より大きい | 小さいです |
| いつ使うか | 編集、デバッグ、レビュー | 制作、移籍 |
| 字下げ | 2 スペース、4 スペース、またはタブ | なし |
| レンダリングされた結果 | 同じ | 同じ |
最後の行が重要な行です どちらの操作でもページの見え方は変わりません ブラウザが取るに足らない変更として扱う空白部分だけです フォーマッタがレンダリングされた出力を変更した場合、それはフォーマッタ内のバグであり、フォーマットのプロパティではありません。
フォーマットすると、JavaScript、CSS、またはプリフォーマットされたテキストが壊れますか?
これはおもちゃと道具を区別する質問であり、それが私がどのフォーマッタを使用するかにこだわる理由です。
特定の要素は、空白と文字が重要で、触れてはならないコンテンツを保持します。 the WHATWG HTML 標準 分類 script あんど style 生のテキスト要素として、および textarea あんど title 逃げることのできる生のテキスト要素として その内部では、フォーマッタはコンテンツを不透明なものとして扱わなければなりません。 a で JavaScript を再インデントしようとすると、 script タグ、テンプレートのリテラルの内容をシフトしたり、正規表現を変更したり、複数行の文字列内の行を移動したりすることができ、コードの動作が異なります。これは書式設定の変更ではなく、書式設定者が導入したバグです。
ザ・ pre element は関連するケースです.その目的は全て空白を保持するためです.そのため,そのテキスト内容は書かれたとおりに表示されます.中に再びインデントするフォーマッタ <pre> ページを目に見えて変更します.
Toolz.devフォーマッタは、これらすべてを処理して処理します script、 style、 pre、 textarea、そして title 生のコンテンツとして: それら周辺のHTMLを再インデントしますが、それらの内部テキストをそのままコピーします あなたのコードとプリフォーマットされたテキストは、バイトごとに同一になります これを構築しながらテストしたとき、受け入れバーはシンプルでした: a <script> 含む if(a<b){x=1} 手付かずで生き残る必要があり、実際に生き残ります。インライン スクリプトまたはスタイルを含むマークアップを使用している場合、これはフォーマッタを信頼する前に確認すべきプロパティです。
フォーマッタは壊れた HTML や不完全な HTML を処理できますか?
実際の HTML は XML のように整形式であることはほとんどなく、完璧を要求するフォーマッターは役に立ちません。ブラウザーが寛容であることは有名です HTML解析アルゴリズム は省略されたエンドタグと誤ネストされた要素の処理方法を正確に定義しており、それが欠落しているページの理由です </li> それでもレンダリングは問題ありません。 good formatter は同じ許容範囲を借用します。
最も一般的なケースはオプションの終了タグです。 HTML では、次のような要素で終了タグを省略できます li、 p、 td、 tr、そして option、スペックにオープンと書かれているため li は、次のときに暗黙的に閉じられます li 始まる。 というわけで <ul><li>a<li>b</ul> は有効であり、 Toolz.dev フォーマッタはこれらの暗黙的閉じたルールを適用して生成します <li>a</li> あんど <li>b</li> ブラウザがツリーを構築するのと同じように、独自の行で。 A <p> 段落にはブロックの内容を含めることができないため、ブロック要素がその内部で開くと自動的に閉じられます。
2 番目のケースは、真に壊れたマークアップです: タグが開かれ、決して閉じられなかった、または一致するタグが開かれなかった迷走した終了タグ。 formatter は、ドキュメントの最後にぶら下がったままのものを閉じ、警告として報告するため、入力が静かに推測するのではなく不完全であることがわかります。これらの警告は、多くの場合、修正に来た正確なバグを見つけるための最速の方法です。
その動作を厳密なフォーマッタと比較し、手で行うことに対して、次のことを比較します:
| 近づく | 省略された終了タグ | 非クローズタグ | 速度 |
|---|---|---|---|
| トレラントフォーマッタ (Toolz.dev) | 暗黙の閉じたルールを適用します | 自動で閉じて警告します | インスタント |
| 厳密な XML スタイルのフォーマッタ | 多くの場合、エラーが発生します | エラーが発生します | 動作するとすぐに |
| 手動再インデント | 自分で追跡するんだ | 見逃しやすい | 遅くてエラーが発生しやすい |
私は以前その最下段にいて、手でインデントし直して、閉じられていないものを欠いていました div 10 回中3 回。 real markupは厄介で、拒否されるのではなく、混乱を表面化させたいので、寛容なツールが勝ちます。
フォーマッタとエディタはいつ使用すればよいですか?
ファイルを所有していて、それがプロジェクト内にある場合、エディターとプレティエ、または同等のものがフォーマットに適したホームです。保存時に実行され、チーム全体で一貫性が保たれるため、ファイルを置き換えることを提案しているわけではありません。
ブラウザベースのフォーマッタは、ワークフローが残すギャップの中でその地位を獲得します。 バグレポートから断片を貼り付け、今すぐ読む必要があります。 dev ボックスではないマシンに乗っています。 CMS 出力、電子メール テンプレート、またはレポには住んでいなかった生成されたマークアップを見ています。ビルド ステップを配線せずに 1 つのスニペットを縮小したい場合。これらすべての場合において、タブを開くことはプロジェクトを構成するよりも速く、結果は同じです。
また、プライバシーの角度があり、これは小さなことではありません。 Toolz.devパーサーは完全にブラウザで実行されるため、内部URL、未公開コピー、テンプレートに埋め込まれたAPI応答、またはcustomer& #39; sデータを含むマークアップは、デバイスを離れることはありません 多くのオンラインフォーマッタは、作業を行うためにサーバーに入力POST作業を行うため 作品コードベースからのものは何でも、それはあなたが取る必要がないデータ露出であるサイト上のすべてのツールの設計ルールであるほど、私はこれを気にしています、私はそれについて詳しく書きました Web 開発者ツールキット と の ガイド オンライン ツールのデータ プライバシー。
実用的なワークフローにより、時間を節約できました
レイアウトが正しくないときに実際に実行するループは次のとおりです。マークアップを美化してネストが表示されるようにします。見当違いのレベルについてはインデントをスキャンします。迷った余分なインデントは、ほとんどの場合、決して閉じられないタグを意味します。フォーマッターの警告を読んでください。これは、閉じられていない正確な要素を頻繁に指定します。ソースで修正します。フラグメントが生産される予定である場合は、元の途中で縮小します。サイクル全体は 1 分で、その 1 分の大部分は私が読んでいます。ツールと戦っているわけではありません。
同じループがコンテンツ監査にも機能します。アクセシビリティまたは SEO のマークアップをチェックするときは、まず美化を行って、見出しの構造とランドマーク要素が一目でわかるようにしてから、特定の部分を他のツールに引き込みます。チャンクを Markdown に変換してドキュメントを作成します html に値下げする コンバータ、またはとの比較テーブルの生成 マークダウン テーブル ジェネレーター。 formatting is the step that makes the structure regeible enough to work with.これらのツールが収まるより広いルーチンが必要な場合は、 開発者の生産性向上ツール ガイドがそれを説明しています.
よくある質問
HTMLをオンラインでフォーマットするにはどうすればよいですか?
HTMLを入力パネルに貼り付け、 Beautify を選択し、インデントの幅を選択して Format をクリックします ツールはタグツリーを解析してインデントし直してから、結果をコピーまたはダウンロードできます すべての処理はブラウザで行われるため、何もアップロードされません。
HTMLを美化することと、縮小することの違いとは?
美化すると改行やインデントが追加されるため、ネストが読みやすくなり、編集やデバッグに最適です。 minifying はタグ間の重要でない空白を削除して、より小さなファイルを生成します。どちらも同じレンダリング結果を維持します。;空白のみが変更されます。
フォーマットすると、ページの外観が変わりますか?
いいえ formatter はタグ間の空白を変更するだけであり、要素、属性、テキストは変更しません。 pre、textarea、インラインテキストなど、空白が重要なコンテンツは保持されるため、ページは書式設定の前後で同じようにレンダリングします。
フォーマッタは私のJavaScriptとCSSを再フォーマットしますか?
いいえ スクリプトタグとスタイルタグ内のコンテンツは生のテキストとして扱われ、そのままコピーされます。ツールは周囲の HTML を再インデントしますが、コード自体には決して触れないため、テンプレートリテラル、正規表現、および CSS 値はバイト単位で同一になります。
壊れたHTMLや不完全なHTMLを処理できますか?
はい、理由の範囲内で。 parser は寛容です: li、p、td のようなタグに対してブラウザが使用するのと同じ暗黙の閉包規則を適用し、文書の最後に開いたままのタグを自動閉じるようにすると、警告を表示するため、マークアップが不完全であることがわかります。
機密データを含むHTMLをフォーマットするのは安全ですか?
はい。パーサーはブラウザーの JavaScript で完全に実行されます。ネットワーク リクエストにはマークアップが実行されず、何も保存されず、ツールはロードされるとオフラインで動作します。内部リンク、API 応答、または未公開コピーを保持している HTML は、マシンから離れることはありません。
どのようなインデントオプションが利用可能ですか?
Beautify 出力は 2 つのスペース、4 つのスペース、またはタブをサポートします。 Web プロジェクトでは 2 つのスペースが一般的なデフォルトで、より広いインデントを好むチームには 4 つのスペースが適しており、タブを使用すると各開発者がエディターで独自の表示幅を設定できます。
HTMLフォーマッタはHTMLミニファイアとどう違うのですか?
フォーマッタは1 つのツールで両方向を持っています: 読み取りのためにマークアップを展開するためにbeautify、出荷のためにそれを折りたたむためにminify 専用のミニファイアが圧縮するだけです.主に本番圧縮が必要な場合は、HTMLミニファイアがそれに焦点を当てます; 読み取りと出荷を切り替える場合、フォーマッタは両方をカバーします。
無料のマークアップをフォーマットします HTML フォーマッタ。ブラウザ内で完全に実行され、スクリプトとプリフォーマットされたコンテンツはそのままに保たれ、バイトをアップロードすることはありません。
