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

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

コンテンツをインデントするトップレベルのタグを指定します。デフォルトでは、インデントは template タグ内のコードにのみ適用されます。また、インデントをすべてのトップレベルのタグで統一するか、使用する言語に依存するかを決定します。たとえば、HTML や Pug 固有にする必要があります。

タブとインデント

ブロックの言語に合わせる	このオプションを選択すると、最上位のタグの内容が言語固有のスタイルでインデントされます。
ファイル全体で同一	ファイル内のすべてのトップレベルタグ内のコードに均一なインデントを適用するには、このオプションを選択します。以下のコントロールを使用して、均一なインデントを構成します。
タブ文字を使用する	このチェックボックスをオンにすると、タブ文字が使用されます。 `Tab` キー押下時インデント用コードを再フォーマットするためチェックボックスがオフの場合、PyCharm はタブではなくスペースを使用します。
スマートタブ	インデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が（必要に応じて）含まれますが、alignment によって定義される部分はスペースのみで構成されます。このチェックボックスをオフにすると、タブのみが使用されます。これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。タブ文字を使用するチェックボックスが選択されている場合は、スマートタブチェックボックスが使用可能です。
タブサイズ	このフィールドで、タブに収まるスペースの数を指定します。
インデント	このフィールドでは、各インデントレベルに挿入するスペースの数を指定します。
連続インデントの文字数	このフィールドでは、式、メソッド宣言、メソッド呼び出しで、配列の要素間に挿入するスペースの数を指定します。
空行でインデントを保持する	このチェックボックスをオンにすると、空の行にインデントがあるように PyCharm にインデントが保持されます。チェックボックスをオフにすると、PyCharm は空白行のタブ文字とスペースを削除します。
トップレベルのタグの子をインデントする	デフォルトでは、`template` タグ内のコードのみに最初のインデントがあります。必要に応じて、コンマを区切り文字として使用して他のタグを追加します。例: フィールドで `script` を指定すると、すべての `script` タグ内のコードは、プレビューペインに示されているように最初のインデントを取得します。

スペース

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

折り返しと波括弧

このタブでは、ソースコードの再フォーマット時に PyCharm がさまざまなコード構造に適用する例外、ブレースの配置、配置オプションをカスタマイズします。プレビューペインで結果を確認します。

ビジュアルガイド

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

補間

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

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

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

折り返しオプション

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

折り返さない - このオプションを選択すると、特殊なラッピングスタイルは適用されません。ネストされたアライメントと波括弧の設定は無視されます。
長い場合は折り返す - このオプションを選択すると、右マージンを超える行が適切なインデントで折り返されます。
常に折り返す - このオプションを選択すると、リスト内のすべての要素が折り返され、1 行に 1 つの要素が正しくインデントされます。
長い場合は切り捨てる - 適切なインデントで 1 行に 1 つの要素が存在するように、右マージンを超えたリスト内の要素を折り返すには、このオプションを選択します。

配置

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

一致ルール

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

: このボタンを使用してルールを追加します。空のルール領域が開きます。
: このボタンを使用してリストからルールを削除します。
: このボタンを使用して既存のルールを編集します。このボタンを表示するには、編集するルールに移動してボタンをクリックします。表示されるポップアップで、ルールフィールドを変更します。
: これらのボタンを使用して、選択したルールを上下に移動します。

空のルール

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

タイプ : このフィルターを使用して、ルールのタグまたは属性を選択します。
タイプキーワードを 2 回クリックすると、条件が無効になることに注意してください。
名前 : このフィールドを使用して、ルールのエントリ名を指定します。このフィルターは、フィールド名、メソッド名、クラス名などのエントリ名のみに一致します。フィルターは正規表現をサポートし、標準の構文(英語)を使用します。一致は名前全体に対して実行されます。
名前空間 : このフィールドを使用して、ルール内のネームスペースを指定します。名前空間の属性位置を制御する規則を指定できます。
順序 : このリストを使用して、ルールのソート順を選択します。このオプションは、複数の要素が同じ一致ルールを使用する場合に役立ちます。この場合、順序を維持を選択すると、再配置前に設定されたのと同じ順序が維持され、名前で並べ替えを選択すると、同じ一致ルールを持つ要素が名前で並べ替えられます。
エイリアス : このオプションは、ルールの別名定義ダイアログで定義されたエイリアスを表示します。不要なものは削除できます。