Angularフォーマッター
このAngularフォーマッターでAngularコンポーネントのテンプレートを整形できます。構造ディレクティブ、バインディング、補間を含むテンプレートHTMLを貼り付けると、div、section、p、ul、tableなどのブロック要素を2スペースのインデントで独立した行に配置し、余分な空白を整理して、インラインのscriptブロックとstyleブロックも整形します。ディレクティブ、バインディング、式は記述どおりに保持されるため、Angular開発者はすばやく整ったテンプレートを得られます。
よくある質問
Angularフォーマッターでは何を整形できますか？
Angularコンポーネントのテンプレート、つまり.component.htmlファイルやテンプレート文字列内に記述するHTMLを整形します。TypeScriptコンポーネントクラスはここでは扱いません。クラスの整形にはTypeScriptフォーマッターを使用してください。
ディレクティブとバインディングは保持されますか？
はい、*ngIf、*ngFor、[value]、(click)、[(ngModel)]などの属性や、{{ user.name }}のような補間は、記述どおりにコピーされます。変更されるのは要素間の空白だけです。
どの要素が独立した行に配置されますか？
要素にdiv、section、article、header、footer、nav、main、form、p、h1からh6、ul、ol、tableなどのブロックレベルの子要素が含まれる場合、各子要素はインデント付きの独立した行に配置されます。そのような子要素がない場合は1行に保たれ、連続する空白は1つのスペースにまとめられます。
カスタムコンポーネントが1行のままなのはなぜですか？
app-rootやmat-cardなどのカスタム要素はブロックレベルのHTML要素ではないため、divやpなどのブロック要素を含まない限り、内容はインラインのままです。展開して表示するには、内容をブロック要素で囲んでください。
リスト項目は別々の行に配置されますか？
liはブロックレベルのタグではないため、それだけでは別々の行になりません。子要素がliだけのulは1行のままです。項目を複数行にするには、各項目の中にdivなどのブロックコンテンツを入れてください。
scriptタグとstyleタグはどうなりますか？
インラインのstyleブロックはCSSとして、インラインのscriptはJavaScriptとして整形され、タグの下にインデントして配置されます。pre要素とtextarea要素の内容は記述どおりに保持されます。
HTMLコメントは保持されますか？
はい、HTMLコメントは保持され、展開された要素内の独立した行に配置されます。内容はそのままコピーされるため、コメントアウトされたマークアップも変更されません。
テンプレートの検証も行いますか？
いいえ。テンプレートのコンパイルや検査は行わず、閉じられていないタグも可能な範囲で整形します。テンプレートのエラーを見つけるには、ng buildまたはエディターのAngular言語サービスを使用してください。
出力がhtmlのコードフェンスで囲まれているのはなぜですか？
AngularテンプレートはHTMLなので、結果はhtmlと記されたMarkdownコードブロックとして返されます。テンプレートファイルには、フェンスの間の行をコピーしてください。
テンプレートのサイズ上限はどれくらいですか？
1回につき最大5 MBを処理できます。それを超える入力はメッセージとともに拒否されます。出力はCode FormatterのAngularオプションと同じです。