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