コードスタイル: SCSS

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

タブとインデント

タブ文字を使用する	このチェックボックスをオンにすると、タブ文字が使用されます。 `Tab` キー押下時インデント用コードを再フォーマットするためチェックボックスがオフの場合、PhpStorm はタブではなくスペースを使用します。
スマートタブ	インデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が（必要に応じて）含まれますが、alignment によって定義される部分はスペースのみで構成されます。このチェックボックスをオフにすると、タブのみが使用されます。これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。タブ文字を使用するチェックボックスが選択されている場合は、スマートタブチェックボックスが使用可能です。
タブサイズ	このフィールドで、タブに収まるスペースの数を指定します。
インデント	このフィールドでは、各インデントレベルに挿入するスペースの数を指定します。
連続インデントの文字数	このフィールドでは、プロパティの値の間に挿入するスペースの数を指定します。
空行でインデントを保持する	このチェックボックスをオンにすると、PhpStorm は空行のインデントを、コードが含まれているかのように保持します。チェックボックスをオフにすると、PhpStorm は空行のタブ文字とスペースを削除します。

空白行

このタブを使用して、再フォーマット後に PhpStorm が保持してコードに挿入する空白行の場所と数を定義します。結果はプレビューペインに表示されます。

空白行の指定	この領域では、再フォーマット後に保持する余白行数を指定します。
最小の空白行数	この領域で、最上位ブロックとネストしたセレクターの周囲に余分な空行を追加するかどうかを構成します。各オプションの横にあるフィールドで、残す余白の最小行数を指定します。

その他

このタブでは、再フォーマットに適用される配置、中括弧、スペース、引用符のオプションを指定します。

波括弧の配置	このリストを使用して、PhpStorm がセレクターの左中括弧を配置する場所を指定します。利用可能なオプションは以下のとおりです。行末次の行に配置
値の配置	このリストを使用して、PhpStorm が属性と値を調整する方法を指定します。利用可能なオプションは次のとおりです。揃えない : このオプションを選択して、属性名の最初の文字の位置合わせを指定します。値の位置 : このオプションを選択して、属性値の最初の文字の位置合わせを指定します。コロンの位置
引用符	CSS、SCSS、Less コンテキストでは、PhpStorm はデフォルトで、`import` ステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。単一引用符を使用するには、このリストから単一を選択します。再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。現在、引用符の構成を変更しても、`<style>` タグ内に挿入されたスタイルシートと CSS コードには影響しません。
右波括弧をプロパティに揃える	このチェックボックスが選択されている場合、セレクターの閉じ中括弧はプロパティのリストに配置されます。このチェックボックスが選択されていない場合、セレクターの閉じ括弧はセレクターに配置されます。
一行のブロックを保持する	このチェックボックスが選択されている場合、単一のプロパティを持つブロックは 1 行に制限されます。このチェックボックスが選択されていない場合、各プロパティは独自の行に配置されます。
スペース	この領域のチェックボックスをオンにして、コロンで区切られたキーと値の後、セレクタの左中括弧の前にスペースを追加します。
コメント	この領域のコントロールを使用して、行コメントとブロックコメント、およびそれらの内部のスペースの位置を構成します。最初の列に行コメントを入れる : このチェックボックスを選択すると、最初の列から行のコメントが始まります。チェックボックスをオフにすると、コード内で行コメントが整列されます。行コメントの先頭に空白を追加する : このチェックボックスを選択すると、行コメント文字とコメント行の最初の文字の間にスペースが挿入されます。ブロックコメントの周りにスペースを追加する : ブロックコメントに先頭と末尾のスペースを追加するには、このチェックボックスを選択します。デフォルトでは、コードフラグメントをブロックコメントで囲むと、テキストはスペースなしで `/` 文字を開いた直後に始まります。`/` 文字を閉じる前に、スペースも挿入されません。このデフォルトのコードスタイルは、ESLint などの一部のリンターのルールと競合する可能性があります。
16 進数の色	この領域を使用して、16 進カラー構文を設定します。以下のチェックオプションから選択できます。 16 進数の色を次へ変換 : このチェックボックスを選択して、16 進カラーの大文字小文字を設定します。小文字または大文字を選択できます。 16 進数の色フォーマットを次へ変換 : このチェックボックスを選択して、16 進カラーフォーマットの長さを設定します。長いフォーマットまたは短いフォーマットを選択できます。プレビューペインで変更を表示します。

配置

このタブでは、SCSS ファイル内の CSS プロパティのソートを有効にし（デフォルトではオフになっています）、ソート順を選択します。

並べ替えを有効にするには、CSS プロパティをソートするチェックボックスを選択します。
各ブロック内のすべての CSS プロパティをアルファベット順に並べ替えるには、名前を選択します。PhpStorm はベンダー固有の接頭辞を無視しますが、特定のプロパティに対して複数のベンダー固有の接頭辞をアルファベット順に並べます。
border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black;
独自の並べ替え方法を定義するには、カスタム順オプションを選択し、その隣のフィールドに希望の並べ替え順序を指定します。
PhpStorm は常に接頭辞なしの対応するものとグループ化するため、区切り文字としてコンマとスペースを使用し、ベンダー固有のプロパティをスキップします。そのようなグループ内では、プロパティはベンダー接頭辞でソートされ、接頭辞のないものが最後になります。
カスタム順リストでは、正規表現を使用できます。たとえば、.* は任意のプロパティに一致します。
PhpStorm は、変更したカスタム順リストを記憶し、カスタムソートをオフにしてから再びオンにした場合はそれを復元します。

SCSS ファイル内のすべての CSS プロパティをソートする

コード | コードの再配置に移動します。
または、メインメニューからコード | ファイルの整形を選択し、表示されたダイアログでファイル全体とコードの再配置を選択します。

ブロック内の CSS プロパティを並べ替えるには

ソートするブロックを選択してから、メインメニューからコード | コードの再配置を選択します。
あるいは、メインメニューでコード | ファイルの整形に移動し、表示されるダイアログでコードの再配置を選択します。

選択して設定

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

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

2024 年 10 月 08 日

PhpStorm 2025.2 ヘルプ