IntelliJ IDEA 2026.1 Help

コードスタイル: Vue テンプレート

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

どの最上位のタグの内容にインデントを適用するかを指定します。デフォルトでは、インデントは template タグ内のコードのみに適用されます。 また、インデントをすべての最上位タグで統一するか、使用する言語によって(たとえば HTML や Pug など)変えるかを決めます。

タブとインデント

ブロックの言語に合わせる

このオプションを選択すると、最上位のタグの内容が言語固有のスタイルでインデントされます。

ファイル全体で同一

ファイル内のすべてのトップレベルタグ内のコードに均一なインデントを適用するには、このオプションを選択します。 以下のコントロールを使用して、均一なインデントを構成します。

タブ文字を使用する

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

    • Tab キー押下時

    • インデント用

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

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

スマートタブ

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

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

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

タブサイズ

このフィールドで、タブに収まるスペースの数を指定します。

インデント

このフィールドでは、各インデントレベルに挿入されるスペースの数を指定します。

連続インデントの文字数

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

空行でインデントを保持する

このチェックボックスが選択されている場合、IntelliJ IDEA は、空行のインデントにコードが含まれているかのように保持します。 チェックボックスをオフにすると、IntelliJ IDEA は空行のタブ文字とスペースを削除します。

トップレベルのタグの子をインデントする

デフォルトでは、 template タグ内のコードのみに最初のインデントがあります。 必要に応じて、コンマを区切り文字として使用して他のタグを追加します。 例: フィールドで script を指定すると、すべての script タグ内のコードは、 プレビュー ペインに示されているように最初のインデントを取得します。

スペース

このタブを使用して、IntelliJ IDEA にスペースを自動的に挿入する場所を指定します。 関連する場所の説明の横にあるチェックボックスを選択し、 プレビュー ペインで結果を確認します。

折り返しと波括弧

このタブでは、例外、ブレースの配置、および位置合わせオプションをカスタマイズできます。これらのオプションは、IntelliJ IDEA がさまざまなコンストラクトに ソースコードの再フォーマット時に適用します。 プレビュー ペインで結果を確認します。

ビジュアルガイド

このフィールドには、複数の右マージンを指定します。 デフォルト値のままにするか、余白のスペース数を入力することができます。 複数のマージンを指定する場合は、コンマで区切って番号を入力します。

補間

この領域で、 補間(英語)の折り返しスタイルを選択し、括弧 {{ }} を改行で囲む(デフォルト)かどうかを指定します。

Vue.js 補間内の JavaScript 式(英語)に改行がある場合、IntelliJ IDEA はこの JavaScript 式を新しい行から自動的に開始し、その後に新しい行を追加します。

このデフォルトの動作を変更するには、 '{{' の後の改行 および '}}' の前の改行 チェックボックスをオフにします。

折り返しオプション

折り返しスタイルは、左側のペインで指定されたさまざまなコード構成体に適用されます(たとえば、メソッド呼び出し引数、代入ステートメントなど)。

  • 折り返さない - このオプションが選択されている場合、特別なラッピングスタイルは適用されず、ネストされた位置合わせと波括弧の設定は無視されます。

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

  • 常に折り返す - このオプションを選択すると、リスト内のすべての要素が折り返され、1 行に 1 つの要素が正しくインデントされます。

  • 長い場合は切り捨てる - 適切なインデントで 1 行に 1 つの要素が存在するように、右マージンを超えたリスト内の要素を折り返すには、このオプションを選択します。

配置

このタブでは、好みに応じて Vue.js テンプレート内のコードを再配置するための一連のルールを定義します。

マッチングルール

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

  • 追加ボタン: このボタンを使用してルールを追加します。 空のルール 領域が開きます。

  • the Remove button: このボタンを使用してリストからルールを削除します。

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

  • 上に移動ボタン 下に移動ボタン: これらのボタンを使用して、選択したルールを上下に移動します。

空のルール

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

  • タイプ: このフィルターを使用して、ルールのタグまたは属性を選択します。

    タイプキーワードを 2 回クリックすると、条件が無効になることに注意してください。

  • 名前: このフィールドを使用して、ルール内のエントリ名を指定します。 このフィルターは、フィールド名、メソッド名、クラス名などのエントリ名のみに一致します。 フィルターは正規表現をサポートし、 標準的な構文(英語)を使用します。 一致は名前全体に対して実行されます。

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

  • 順序: このリストを使用して、ルールのソート順を選択します。 このオプションは、複数の要素が同じ一致ルールを使用する場合に役立ちます。 この場合、 順序を維持を選択すると、再配置前に設定されたのと同じ順序が維持され、 名前で並べ替えを選択すると、同じ一致ルールを持つ要素が名前で並べ替えられます。

  • エイリアス: このオプションは、 ルールの別名定義 ダイアログで定義されたエイリアスを表示します。 不要なものは削除できます。

the Sort Alphabetically button

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

選択して設定

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

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

2026 年 3 月 30 日