IntelliJ IDEA 2020.2ヘルプ

コード・スタイル: HTML

WindowsおよびLinux用のファイル | 設定 | エディター | コード・スタイル | HTML

macOS Ctrl+Alt+S the Settings/Preferences iconIntelliJ IDEA | 環境設定 | エディター | コード・スタイル | HTML

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

タブとインデント

タブ文字を使用
  • このチェックボックスをオンにすると、タブ文字が使用されます。

    • Tab キーを押すと

    • インデント用

    • コードを再フォーマットするため

  • チェックボックスがオフの場合、IntelliJ IDEAはタブではなくスペースを使用します。

スマート・タブ

インデントは2つの部分で構成されます。1つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。

  • このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が(必要に応じて)含まれますが、alignmentによって定義される部分はスペースのみで構成されます。

  • このチェックボックスをオフにすると、タブのみが使用されます。これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。

タブ・サイズこのフィールドで、タブに収まるスペースの数を指定します。
インデントこのフィールドでは、各インデントレベルに挿入するスペースの数を指定します。
連続インデントの文字数

このフィールドでは、式、メソッド宣言、およびメソッド呼び出しで、配列の要素間に挿入するスペースの数を指定します。

空行でインデントを保持するこのチェックボックスをオンにすると、IntelliJ IDEAは空行にインデントを保持しているように見えます。チェックボックスをオフにすると、IntelliJ IDEAは空白行のタブ文字とスペースを削除します。

その他

項目説明
右マージンこれらの設定を使用して、要素の右側に必要なマージンスペースを指定します。デフォルトオプションを選択すると、グローバル設定の右マージンの値が使用されます。
入力時に折り返す

これらの設定を使用して、編集したテキストを指定した右余白に合わせる方法を指定します。

次のオプションのいずれかを選択できます。
  • デフォルト - この場合、IntelliJ IDEAは、グローバル設定で指定された入力時に折り返すオプションを使用します。

  • はい -この場合、指定された右マージンの値が使用されます。

  • いいえ - この場合、このオプションはオフになり、行は右マージンで指定された数を超える可能性があります。

行ブレイクを維持するこのチェックボックスを選択すると、エディターでHTMLファイルを確認するときにIntelliJ IDEAが改行を受けるようになります。
テキスト内の改行を保持するこのチェックボックスを選択すると、エディターでHTMLファイルを確認するときにIntelliJ IDEAが属性に改行(たとえば、長い説明など)を付けるようにします。
空白行の維持このテキストボックスには、再フォーマット後に保持する連続空白行の最小数を指定します。
属性の折り返し

このドロップダウンリストを使用して、属性行をどのようにラップするかを決定します。使用可能なオプションは次のとおりです。

  • 折り返しなし - このオプションを選択すると、特別な折り返しスタイルはコードに適用されません。

  • 長い場合は折り返す - このオプションを選択すると、右マージンを超える行が適切なインデントで折り返されます。

  • 長い場合に切り捨てる - このオプションを選択すると、リストの要素が右マージンを超えて折り返され、適切なインデントで1行に1つの要素が表示されます。

  • 常に折り返す - このオプションを選択すると、リスト内のすべての要素が折り返されて、1行に1要素ずつ適切なインデントが付けられます。

テキストの折り返しこのチェックボックスを選択すると、コードスタイル設定に従って長い行が折り返されます。
属性の位置合わせをするこのチェックボックスをオンにすると、属性を順次行に整列させることができます。
テキストの位置合わせをするこのチェックボックスを選択すると、IntelliJ IDEAはタグ内の複数の行を占めるテキストを整列させます。
空白を維持する実際のホワイトスペースをタブで置き換えないようにするには、このチェックボックスを選択します。
スペース

この領域では、属性とタグ名のスペースの使用を定義します。

  • " ="の周囲属性内 - " ="の周囲にスペースを追加するには、このチェックボックスを選択します。属性内のシンボル。

  • タグ名の周囲 - このチェックボックスを選択すると、タグ名の後にスペースが追加されます。

  • 空のタグ内 - 空のタグに空白を追加するには、このチェックボックスを選択します。

次のタグの直前に新規行を挿入するこの表示フィールドには、その前に新しい行を挿入するタグのリストが表示されます。フィールドの横にあるボタン icons.general.expandComponent.svg を使用するか、または Shift+Enter を押してタグの前に新規行を挿入するダイアログボックスを開き、タグのリストを編集します。
次のタグの直前の新規行は除去するこの表示フィールドには、その前に改行を削除するタグのリストが表示されます。フィールドの横にあるボタン icons.general.expandComponent.svg を使用するか、または Shift+Enter を押してタグの前の行ブレイクを除去するダイアログボックスを開き、タグのリストを編集します。
次のタグの子はインデントしないこの表示フィールドには、子をインデントしてはいけないタグのリストが表示されます。フィールドの横にあるボタン icons.general.expandComponent.svg を使用するか、または Shift+Enter を押して次のタグの子はインデントしないダイアログボックスを開き、タグのリストを編集します。
またはタグが次のサイズ以上の場合:このテキストボックスには、タグがインデントされていない行のタグの最小長を指定します。
インライン要素この表示フィールドには、他のタグと同じ行のソースコードで表示されるタグのリストが表示されます。タグがリストから削除された場合、ソースコードにそのようなタグを追加すると、自動的に新しい行に移動されます。フィールドの横にあるボタン icons.general.expandComponent.svg を使用するか、または Shift+Enter を押してインライン要素ダイアログボックスを開き、タグのリストを編集します。
内側に空白を維持するこの表示フィールドには、エディターが空白をそのまま保持するタグのリストが表示されます。変更ありません。フィールドの横にあるボタン icons.general.expandComponent.svg を使用するか、Shift+Enter を押して、内側に空白を維持するダイアログボックスを開き、タグのリストを編集できます。
インライン・コンテンツの場合は中断しないこの表示フィールドには、コンテンツがインライン展開されている場合にラップされないタグのリストが表示されます。フィールドの横にあるボタン icons.general.expandComponent.svg を使用するか、または Shift+Enter を押してインラインコンテンツのみをラップしないでくださいダイアログボックスを開き、タグのリストを編集します。
生成される引用符

=の入力時に、HTML属性の周囲に自動的に挿入される引用符(ダブル、シングル、またはなし)のスタイルを選択します。

これは、JavaScriptやPHPを使用してHTMLを動的に挿入し、JavaScriptやPHP文字列に二重引用符を一貫して使用し、コピーや貼り付けなどの問題を防ぐために一重引用符でHTMLを使用する場合に重要です。

フォーマットを強制するこのチェックボックスが選択されている場合、コードを再フォーマットすると、以前に生成された引用符が置き換えられます(たとえば、二重引用符と単一引用符)。

配置

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

一致ルールこの領域を使用して、ルールのリストとして要素の順序を定義します。すべてのルールには、修飾子や型などの一致のセットがあります。
  • icons.general.add.svg - このボタンを使用してルールを追加します。空のルール領域が開きます。

  • icons.general.remove.svg - このボタンを使用してリストからルールを削除します。

  • icons.actions.edit.svg - このボタンを使用して既存のルールを編集します。このボタンを表示するには、編集するルールに移動してボタンをクリックします。表示されるポップアップで、ルールフィールドを変更します。

  • icons.actions.previousOccurence.svg icons.actions.nextOccurence.svg - これらのボタンを使用して、選択したルールを上下に移動します。

空のルールこのエリアを使用して、新しい一致ルールを作成するか、既存のルールを編集します。次のフィルタから選択できます。
  • タイプ - このフィルターを使用して、ルールのタグまたは属性を選択します。
    タイプキーワードを2回クリックすると、条件が無効になることに注意してください。

  • 名前 - このフィールドを使用して、ルールのエントリ名を指定します。このフィルターは、タグ名や属性名などのエントリー名のみに一致します。フィルターは正規表現をサポートし、標準の構文を使用します。名前全体に対して照合が実行されます。

  • 名前空間 - このフィールドを使用して、ルール内のネームスペースを指定します。名前空間の属性位置を制御する規則を指定できます。

  • 順序 - このドロップダウンリストを使用して、ルールの並べ替え順序を選択します。このオプションは、複数の要素が同じ一致規則を使用している場合に便利です。この場合、秩序を保ちますを選択しても並べ替え前の設定と同じ順序が保持され、名前順を選択すると同じ一致規則を持つ要素が名前順に並べ替えられます。

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

コード生成

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

コメント

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

  • 最初の列に行コメントを入れる : デフォルトでは、このチェックボックスはオフになっており、行コメントはコード内に配置されます。チェックボックスを選択して、最初の列から行コメントを開始します。

    Line comment at first column is cleared
    Line comment at first column is selected
  • 最初の列にブロック・コメントを入れる : デフォルトでは、このチェックボックスはオフになっており、ブロックのコメントはコード内に配置されます。チェックボックスをオンにして、最初の列でコメントのブロックを開始します。

    Block comment at first column is off
    Block comment at first column is on

次からセット

該当する場合、リンクはページの右上隅に表示されます。このリンクをクリックして、現在の言語コードスタイルのベースとして使用する言語を選択します。

コードスタイル設定の初期セットに戻り、変更を破棄するには、リセットをクリックします。

最終更新日: 2020年9月11日

関連ページ:

コード・スタイル

macOSのIntelliJ IDEA | 環境設定 | エディター | コード・スタイルスキーム:この領域では、コードスタイルスキームを選択し、必要に応じて変更します。コードスタイルスキームの設定は、IntelliJ IDEAがコードを生成、リファクタリング、または再フォーマットするたびに自動的に...

コードの再フォーマットと再配置

IntelliJ IDEAでは、コード・スタイル設定で指定した要件に従ってコードを再フォーマットできます。ただし、プロジェクトでEditorConfigを使用する場合、ファイルで指定されたオプションは、コードを再フォーマットするときにコードスタイル設定で指定されたオプションをオーバーライドします。設...

コード・スタイル: ERB

macOSのIntelliJ IDEA | 環境設定 | エディター | コード・スタイル | ERBこのページを使用して、ERBファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。タブとインデントタブ文字を使用このチェックボック...

コード・スタイル: JavaScript

このページは、プラグインの管理で説明されている設定/環境設定 | プラグインページでJavaScriptとTypescriptプラグインが有効になっている場合にのみ使用できます。macOSのIntelliJ IDEA | 環境設定 | エディター | コード・スタイル | JavaScriptこのペ...