コードスタイル: Vue テンプレート
このページを使用して、Vue ファイルのフォーマットオプションを構成します。 これらの設定を変更すると、 プレビュー ペインに、これがコードに与える影響が表示されます。
どの最上位のタグの内容にインデントを適用するかを指定します。デフォルトでは、インデントは template タグ内のコードのみに適用されます。 また、インデントをすべての最上位タグで統一するか、使用する言語によって(たとえば HTML や Pug など)変えるかを決めます。
タブとインデント
ブロックの言語に合わせる | このオプションを選択すると、最上位のタグの内容が言語固有のスタイルでインデントされます。 |
ファイル全体で同一 | ファイル内のすべてのトップレベルタグ内のコードに均一なインデントを適用するには、このオプションを選択します。 以下のコントロールを使用して、均一なインデントを構成します。 |
タブ文字を使用する |
|
スマートタブ | インデントは 2 つの部分で構成されます。 1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。
|
タブサイズ | このフィールドで、タブに収まるスペースの数を指定します。 |
インデント | このフィールドでは、各インデントレベルに挿入されるスペースの数を指定します。 |
連続インデントの文字数 | このフィールドでは、式、メソッド宣言、メソッド呼び出しで、配列の要素間に挿入するスペースの数を指定します。 |
空行でインデントを保持する | このチェックボックスが選択されている場合、IntelliJ IDEA は、空行のインデントにコードが含まれているかのように保持します。 チェックボックスをオフにすると、IntelliJ IDEA は空行のタブ文字とスペースを削除します。 |
トップレベルのタグの子をインデントする | デフォルトでは、 |
スペース
このタブを使用して、IntelliJ IDEA にスペースを自動的に挿入する場所を指定します。 関連する場所の説明の横にあるチェックボックスを選択し、 プレビュー ペインで結果を確認します。
折り返しと波括弧
このタブでは、例外、ブレースの配置、および位置合わせオプションをカスタマイズできます。これらのオプションは、IntelliJ IDEA がさまざまなコンストラクトに ソースコードの再フォーマット時に適用します。 プレビュー ペインで結果を確認します。
ビジュアルガイド | このフィールドには、複数の右マージンを指定します。 デフォルト値のままにするか、余白のスペース数を入力することができます。 複数のマージンを指定する場合は、コンマで区切って番号を入力します。 |
補間 | この領域で、 補間(英語)の折り返しスタイルを選択し、括弧 Vue.js 補間内の JavaScript 式(英語)に改行がある場合、IntelliJ IDEA はこの JavaScript 式を新しい行から自動的に開始し、その後に新しい行を追加します。 このデフォルトの動作を変更するには、 '{{' の後の改行 および '}}' の前の改行 チェックボックスをオフにします。 |
折り返しオプション | 折り返しスタイルは、左側のペインで指定されたさまざまなコード構成体に適用されます(たとえば、メソッド呼び出し引数、代入ステートメントなど)。
|
配置
このタブでは、好みに応じて Vue.js テンプレート内のコードを再配置するための一連のルールを定義します。
マッチングルール | この領域を使用して、ルールのリストとして要素の順序を定義します。すべてのルールには、修飾子や型などの一致のセットがあります。
|
空のルール | このエリアを使用して、新しい一致ルールを作成するか、既存のルールを編集します。 次のフィルターから選択できます。
|
このアイコンは、 順序 リストから 名前で並べ替えを選択すると表示されます。 アイコンは、このルールの項目がアルファベット順にソートされていることを示します。 |
選択して設定
該当する場合、リンクはページの右上隅に表示されます。 このリンクをクリックして、現在の言語コードスタイルのベースとして使用する言語を選択します。
コードスタイル設定の初期セットに戻り、変更を破棄するには、 リセット をクリックします。