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