VS CODEでCSSのフォーマットをするまで

①CSSのフォーマットとソートをしたい

CSScombという拡張機能によって自分の好きなフォーマットを作成、適用できる。

リンクから緑のInstallボタンを押すと下記のようなポップアップが出るのでContinueをクリック。

②VS CODEにCSScombをインストールする

VS CODEが起動して、Installをクリック。
画面は既にインストール済みなので、アンインストールの選択肢が出ている。

③自分好みのフォーマットを作成する

CSScomb Build Configを開き、自分好みのフォーマット形式を選択していく。全部で24問ある。基本的に2択か3択で、一番最後の選択肢はどっちでもいいよ、の意味になっている。

④作成したフォーマットを読み込む

完成したjsonファイルを下記パスにあるjsonファイルと置き換える。なお、元のものはバックアップをとっておくと良い。

path

C:\Users\Minato\.vscode\extensions\mrmlnc.vscode-csscomb-5.2.2\node_modules\csscomb\config\csscomb.json

⑤VS CODEで読み込むファイルを指定する

ファイル→基本設定→設定　から設定画面を開き、下記を追記する。

"csscomb.preset": "csscomb"

⑥これで最後、フォーマットする

Ctrl + a などでキレイにしたいコードを選択し、F1で拡張機能の呼び出し画面を開く。
csscombなどと打つと選択肢に表示されるので、クリックして完成！

⑦おまけ

僕好みのフォーマットはこんな感じです。もし同じで良ければ、コードを貼っとくのでお使いください。

minato.json

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "space-before-colon": " ",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": " ",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}