私のHTMLに何をしたか.

私は、私が私のコードをフォーマットしている仕事対コードが十分に満足していたので、私は長い間、現在のために準備して、使用するのに抵抗しました.それから、クリスマスブレークの上で、私の息子は、私にそれをインストールするよう説得しました.私がしたあと、彼は言いました、「現在、HTMLファイルを開けてください、そして、あなたにあなたが好きでない何かを示します.」確かに、今、彼は私に言う!それは私に不吉な印象を与えたが、私は乗車に行くことに決めた.
私たちはHTMLファイルを開き、すぐにファイルを再フォーマットのデフォルト設定を使用して再フォーマットします.ファイルの上部には、ナビゲーションメニューを表すHTMLのブロックがあります.

<ul>
  <li>
    <a routerLink="/" (click)="closeSidebarPanel()">Home</a>
  </li>
  <li>
    <a routerLink="/reports/" (click)="closeSidebarPanel()">Reports</a>
  </li>
  <li>
    <a routerLink="/annual-sales/" (click)="closeSidebarPanel()">Annual Sales</a>
  </li>
  <li>
    <a routerLink="/product-maintenance/" (click)="closeSidebarPanel()">Product Maintenance</a>
  </li>
</ul>

最後の2行<a> タグは80文字より長いです.これらの行をラップするための再フォーマット中に、レンダリングされた出力に意味的に影響を与えることなく、その方法を決定する必要があります.ほとんどのフォーマッタが作る決定は、このようなコードのブロックで終わるかもしれません.

<ul>
  <li>
    <a routerLink="/" (click)="closeSidebarPanel()">Home</a>
  </li>
  <li>
    <a routerLink="/reports/" (click)="closeSidebarPanel()">Reports</a>
  </li>
  <li>
    <a routerLink="/annual-sales/" (click)="closeSidebarPanel()">
    Annual Sales</a>
  </li>
  <li>
    <a routerLink="/product-maintenance/" (click)="closeSidebarPanel()">
    Product Maintenance</a>
  </li>
</ul>

これに関する問題はHTML<a> tagはインライン表示要素で、その周りにあるテキストと一緒に流れます.コードフォーマッタには、行の先頭に追加された空白が重要かどうかを知る方法がありません.メニューラベルに余分なスペースを単に誤って追加することは全く可能です.
代わりに何を行うのですか?これは、アイテムのCSSの表示規則に基づいてそれらの行をラップして再フォーマットする方法についての知的な決定をしようとします.要素がブロックレベルの要素である場合、その周囲にスペースを追加すると、そのレイアウトには影響しません.一方、要素がインライン表示要素の場合、追加の空白を追加しないように注意してください.代わりにそれはむしろ賢いです.これが最終出力です.

<ul>
  <li>
    <a routerLink="/" (click)="closeSidebarPanel()">Home</a>
  </li>
  <li>
    <a routerLink="/reports/" (click)="closeSidebarPanel()">Reports</a>
  </li>
  <li>
    <a routerLink="/annual-sales/" (click)="closeSidebarPanel()"
      >Annual Sales</a
    >
  </li>
  <li>
    <a routerLink="/product-maintenance/" (click)="closeSidebarPanel()"
      >Product Maintenance</a
    >
  </li>
</ul>

タグ自体の空白は、その属性の周りでは重要ではありません.このように、それは最終的な属性とタグを閉じるアングルブラケットの間の線をラップします.そのアングルブラケットは次の行に置かれます(それは空白が無関係であることを忘れないでください)、すぐにリンク自体のテキストに従ってください.その後、リンクは、テキストに追加された任意の空白なしで再び閉じられます.

その閉じ角ブラケットはどうですか?
なぜそれを行うのですか?

    <a routerLink="/product-maintenance/" (click)="closeSidebarPanel()"
      >Product Maintenance</a
    >

ではなく、これはより直感的かもしれない?

    <a routerLink="/product-maintenance/" (click)="closeSidebarPanel()"
      >Product Maintenance</a>

私がそれを理解している理由は、それが意図的に閉じ角アングルブラケットを自分のラインに配置していることです.このように、それは視覚的に意味のブロックとして視覚的に見えます.その観点から見ると、それは優雅で利口であることがわかった.
息子は正しかった.私が最初にそれを見たとき、私はそれが好きでありませんでした、しかし、理解で、感謝と承認は来ます.

HTML属性
私が期待しなかったもう一つの変更は、タグが多くを持っているとき、HTML属性を整理する方法です.これは、行ごとに1つの属性で、それらをフォーマットし、/> 最後の行で<a> 上記タグ.閉じるこの動画はお気に入りから削除されています.
それを見つけるのは本当に簡単ですが、編集、追加、および属性を削除します.Gitのようなソースコントロールシステムを使用する場合は特に顕著です.
次のHTML要素定義を考えます.

<input #emailAddress type="email" class="email-input" placeholder="Email Address" required id="email-address" title="Enter your email address" name="email-Address" [(ngModel)]="emailAddress">

それは属性のリストですが、それは決して珍しいことではありません.一見、この要素は必要ですか?それはあるかid 属性?これらの質問に対する答えを見つけることは難しくありません、しかし、彼らがそのように組織されるとき、それは属性をスキャンするために少しの努力をします.
これは、その要素を再フォーマットする方法です.

<input
  #emailAddress
  type="email"
  class="email-input"
  placeholder="Email Address"
  required
  id="email-address"
  title="Enter your email address"
  name="email-Address"
  [(ngModel)]="emailAddress"
/>

属性の順序を変更しないことに注意してください.それは、各々が属するところの私の決定を光栄に思いました.いくつかのフォーマッタをアルファベット順に主張する.これはきれいなオプションかもしれませんが、上で述べたように、今のところデフォルトで作業しています.多分、私は後で調査して、それを微調整するでしょう、しかし、その利点の1つはそれがそうであったように、あなたがそれを使うことができるということです.
このフォーマット決定による最終的な輝きは、以前に述べたソース管理に関するものです.上記の最初の要素定義では、新しい属性を追加する場合には、disabled ), 全体の行は、ソースコントロールの“diff”画面で“変更”として表示されます.そのような小さな変化を見つけることは合理的に単純であり、ほとんど精神的な努力を必要としない.
今、多くのそのような変化を想像してください.一人一人が簡単ですが、これらの変更数十または数百を追加負担のように感じることが開始できます.
1行あたり1つの属性を表示するのは、それぞれの変更が1行に影響を与えるということです.変更は簡単にスポットです彼らは明らかに周囲のコードから際立って、あなたが見て、何を迅速かつ容易に変更理解することができます.
この利点は、直前に属性を追加することによって行われる/> 登場人物新しい属性が独自の行にあるため、ソースコントロールに1つの変更として表示されます.
私にとって、これは巨大な勝利です.

ボトムライン
少なくとも私自身のプロジェクトのために、きれいにしています.次は僕のチームを仕事でシェアしてくれたこと.
空白の決定の長い説明を見つけることができますon the Prettier blog .