コードスタイル: HTML

このページを使用して、HTML ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。

タブとインデント

タブ文字を使用する	このチェックボックスをオンにすると、タブ文字が使用されます。 `Tab` キー押下時インデント用コードを再フォーマットするためチェックボックスがオフの場合、PhpStorm はタブではなくスペースを使用します。
スマートタブ	インデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が（必要に応じて）含まれますが、alignment によって定義される部分はスペースのみで構成されます。このチェックボックスをオフにすると、タブのみが使用されます。これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。タブ文字を使用するチェックボックスが選択されている場合は、スマートタブチェックボックスが使用可能です。
タブサイズ	このフィールドで、タブに収まるスペースの数を指定します。
インデント	このフィールドでは、各インデントレベルに挿入するスペースの数を指定します。
連続インデントの文字数	このフィールドでは、式、メソッド宣言、メソッド呼び出しで、配列の要素間に挿入するスペースの数を指定します。
空行でインデントを保持する	このチェックボックスをオンにすると、PhpStorm は空の行にインデントを保持しているように見えます。チェックボックスをオフにすると、PhpStorm は空白行のタブ文字とスペースを削除します。

その他

項目	説明
右マージン	これらの設定を使用して、要素の右側に必要なマージンスペースを指定します。デフォルトオプションを選択すると、グローバル設定の右マージンの値が使用されます。
入力時に折り返す	これらの設定を使用して、編集したテキストを指定した右余白にどのように適合させるかを指定します。次のオプションのいずれかを選択できます。デフォルト - この場合、PhpStorm はグローバル設定で指定された入力時に折り返すオプションを使用します。はい - この場合、指定された右マージンの値が使用されます。いいえ - この場合、このオプションはオフになり、行は右マージンで指定された数を超えることができます。
改行を維持する	このチェックボックスを選択すると、エディターで HTML ファイルを確認する際に PhpStorm が改行を受け付けるようになります。
テキスト内の改行を維持する	このチェックボックスを選択すると、エディターで HTML ファイルを確認するときに PhpStorm が属性の改行（たとえば、長い説明など）を受け付けるようにします。
空白行を維持する	このフィールドでは、再フォーマット後に保持する連続空白行の最小数を指定します。
属性の折り返し	このドロップダウンリストを使用して、属性行をどのようにラップするかを決定します。使用可能なオプションは次のとおりです。折り返さない - このオプションを選択すると、特別な折り返しスタイルはコードに適用されません。長い場合は折り返す - このオプションを選択すると、右マージンを超える行が適切なインデントで折り返されます。長い場合は切り捨てる - このオプションを選択すると、リスト内の右マージンを超えた要素が折り返されて、1 行に 1 要素ずつ適切なインデントが付けられます。常に折り返す - このオプションを選択すると、リスト内のすべての要素が折り返されて、1 行に 1 要素ずつ適切なインデントが付けられます。
テキストの折り返し	このチェックボックスを選択すると、コードスタイル設定に従って長い行が折り返されます。
属性の位置合わせをする	このチェックボックスをオンにすると、属性を順次行に整列させることができます。
テキストの位置合わせをする	このチェックボックスを選択すると、PhpStorm はタグ内の複数の行を占めるテキストを整列させます。
空白を維持する	実際のホワイトスペースをタブで置き換えないようにするには、このチェックボックスを選択します。
スペース	この領域では、属性とタグ名のスペースの使用を定義します。属性の "=" の周囲 - このチェックボックスを選択すると、属性の "=" 記号の周囲にスペースが追加されます。タグ名の周囲 - このチェックボックスを選択すると、タグ名の後にスペースが追加されます。空のタグ内 - 空のタグに空白を追加するには、このチェックボックスを選択します。
次のタグの直前に新規行を挿入する	この表示フィールドには、その前に新しい行を挿入する必要があるタグのリストが表示されます。フィールドの横にあるボタンを使用するか、`Shift+Enter` を押してタグの前に新規行を挿入するダイアログを開き、タグのリストを編集できます。
次のタグの直前の新規行は除去する	この表示フィールドには、ブレークラインを削除する必要があるタグのリストが表示されます。フィールドの横にあるボタンを使用するか、`Shift+Enter` を押してタグの前の行ブレイクを除去するダイアログを開き、タグのリストを編集できます。
次のタグの子はインデントしない	この表示フィールドには、子をインデントしないタグのリストが表示されます。フィールドの横にあるボタンを使用するか、`Shift+Enter` を押して次のタグの子はインデントしないダイアログを開き、タグのリストを編集できます。
またはタグが次のサイズ以上の場合:	このフィールドでは、子がインデントされていない行から始まるタグの最小長を指定します。
インライン要素	この表示フィールドには、ソースコード内で他のタグと同じ行に表示されるタグのリストが表示されます。タグがリストから削除された場合、そのタグをソースコードに追加すると、エディターはそのタグを自動的に新しい行に移動します。フィールドの横にあるボタンを使用するか、`Shift+Enter` を押してインライン要素ダイアログを開き、タグのリストを編集できます。
内側に空白を維持する	この表示フィールドには、エディターで空白を変更せずにそのまま保持するタグのリストが表示されます。フィールドの横にあるボタンを使用するか、`Shift+Enter` を押して内側に空白を維持するダイアログを開き、タグのリストを編集できます。
インラインコンテンツの場合は中断しない	この表示フィールドには、コンテンツがインライン化されている場合にラップされないタグのリストが表示されます。フィールドの横にあるボタンを使用するか、`Shift+Enter` を押してインラインコンテンツのみをラップしないでくださいダイアログを開き、タグのリストを編集できます。
生成される引用符	`=` の入力時に、HTML 属性の周囲に自動的に挿入される引用符（ダブル、シングル、なし）のスタイルを選択します。これは、JavaScript または PHP を使用して HTML が動的に挿入される場合に重要であり、コピーアンドペーストなどの問題を防ぐために、JavaScript または PHP 文字列には二重引用符のペアを一貫して使用し、HTML には一重引用符のペアを使用する必要があります。
整形時に強制する	このチェックボックスが選択されている場合、コードの再フォーマット時に、以前に生成された引用符が置き換えられます (たとえば、二重引用符が単一引用符に置き換えられます)。

配置

このタブでは、好みに応じて HTML コードを並べ替えるための一連の規則を定義します。

一致ルール

この領域を使用して、ルールのリストとして要素の順序を定義します。すべてのルールには、修飾子や型などの一致のセットがあります。

- このボタンを使用してルールを追加します。空のルール領域が開きます。
- このボタンを使用してリストからルールを削除します。
- このボタンを使用して既存のルールを編集します。このボタンを表示するには、編集するルールに移動してボタンをクリックします。表示されるポップアップで、ルールフィールドを変更します。
- これらのボタンを使用して、選択したルールを上下に移動します。

空のルール

このエリアを使用して、新しい一致ルールを作成するか、既存のルールを編集します。次のフィルターから選択できます。

タイプ - このフィルターを使用して、ルールのタグまたは属性を選択します。type キーワードを 2 回クリックすると、条件が無効になることに注意してください。
名前 - このフィールドを使用して、ルールのエントリ名を指定します。このフィルターは、タグ名や属性名などのエントリ名のみに一致します。フィルターは正規表現をサポートし、標準の構文(英語)を使用します。一致は名前全体に対して実行されます。
名前空間 - このフィールドを使用して、ルールの名前空間を指定します。名前空間属性の位置を制御するルールを指定できます。
順序 - このドロップダウンリストを使用して、ルールの並べ替え順序を選択します。このオプションは、複数の要素が同じ一致ルールを使用する場合に役立ちます。この場合、順序を維持を選択すると、再配置前に設定されたのと同じ順序が維持され、名前で並べ替えを選択すると、同じ一致ルールを持つ要素が名前で並べ替えられます。

このアイコンは、順序リストから名前で並べ替えを選択すると表示されます。アイコンは、このルールの項目がアルファベット順にソートされていることを示します。

コード生成

このタブで、生成されたコードのコードスタイルを設定します。

この領域では、生成されたコメントのコードスタイルを設定します。

最初の列に行コメントを入れる : このチェックボックスを選択すると、最初の列から行のコメントが始まります。チェックボックスをオフにすると、コード内で行コメントが整列されます。
最初の列にブロックコメントを入れる : デフォルトでは、このチェックボックスはオフになっており、ブロックのコメントはコード内に配置されます。チェックボックスをオンにして、最初の列でコメントのブロックを開始します。
ブロックコメントの周りにスペースを追加する : ブロックコメントに先頭と末尾のスペースを追加するには、このチェックボックスを選択します。
デフォルトでは、コードフラグメントをブロックコメントで囲むと、テキストはスペースなしで  文字を閉じる前に、スペースも挿入されません。このデフォルトのコードスタイルは、ESLint などの一部のリンターのルールと競合する可能性があります。