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

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

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

ファイル全体で同一

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

タブ文字を使用する

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

  • Tab キー押下時

  • インデント用

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

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

スマートタブ

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

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

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

タブサイズ

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

インデント

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

連続インデントの文字数

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

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

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

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

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

ビジュアルガイド

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

補間

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

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

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

折り返しオプション

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

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

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

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

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

一致ルール

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

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

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

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

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

空のルール

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

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

  型キーワードをクリックすると、条件が無効になりますのでご注意ください。

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

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

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

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