【VSCode】CSScombの使い方【CSSをアルファベット順に並べる方法】

CSSのプロパティをアルファベット順に並べたいんだけど、自動で並び替える方法ない？

今回はそんな疑問にお答えします。

CSSのプロパティの順番については人によってルールが違うと思いますが、誰が書いても変わらないアルファベット順にしている人も多いと思います。

今回はそのCSSのプロパティの順番を自動でアルファベット順にしたり、好きなフォーマットで並び替える方法について書いていきます。

CSScombの使い方（VSCodeにインストール）

まずはVSCodeにCSScombをインストールします。

VSCodeを開いて左側の拡張機能のアイコンをクリックし、csscombと検索するとプラグインが出てくるのでインストールします。

この画像では既にインストールしているので「無効にする」と「アンインストール」と表示されています。

またCSScombが2つヒットしますが、バージョンが新しい物をインストールすればいいと思います。

csscomb.jsonを自作する

次にcsscomb.jsonというフォーマットのルールを決めるファイルを作成していきます。

これに関しては以下のサイトで作成することが出来ます。

CSScomb

ここでは24個の質問が表示され、2～4つの中から自分が選択したいルールをクリックしていきます。

例えばこちら

これは4番目の質問になりますが、インデントの幅についてどれがいいですか？という質問になります。

この項目に限らず、最後の項目は「そのまま」となっています。

そしてこちらがアルファベット順にするかどうかになります。

そして24個全ての質問に回答すると、コードが表示されます。

このコードをcsscomb.jsonファイルに書いて保存します。

私がこちらのサイトで作成したファイルはこちらになります。

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "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": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}

しかしこれだけではなぜかアルファベット順に並び替えてくれないので、

"sort-order": [],

この1行をどこかに入れて下さい（"sort-order-fallback": "abc",）の下あたりが分かりやすいかと思います。

csscomb.jsonファイルを設置する

次に作成したファイルを置く場所ですが、分かりやすく.vscodeフォルダの直下に置くとします。

その前に元のcsscomb.jsonファイルの場所は以下になります。

【Windows】
C:\Users\ユーザー名\.vscode\extensions\mrmlnc.vscode-csscomb-5.3.2\csscomb.js\config\csscomb.json

【Mac】
Macintosh HD\ユーザ\user\.vscode\extensions\mrmlnc.vscode-csscomb-5.3.2\csscomb.js\config\csscomb.json

Macbookでは.vscodeが隠しフォルダとなって表示されていないかも知れないので、そういった場合は「command + shift + .(ドット)」などで表示させることが出来ます。

そして今回自作したファイルは.vscodeの直下に置くので、以下のようになります。

【Windows】
C:\Users\ユーザー名\.vscode\csscomb.json

【Mac】
Macintosh HD\ユーザ\user\.vscode\csscomb.json

 VSCodeで自作したcsscomb.jsonを読み込む

次に先ほど.vscodeの直下に置いたcsscomb.jsonをVSCodeで読み込むコードを追記します。

追記するファイルはsettings.jsonになります。

まずコマンドパレットを開きます。

Windowsの場合は「ctrl + shift + P」

Macの場合は「⌘ + Shift + P」

で開きます。

そしてsettingsjsonと検索して見つかる「Preferenses: Open Settings(JSON)」を選択します。

そして以下のコードを追記します。

｛
  "csscomb.preset":"~/.vscode/csscomb.json"
}

これが.vscodeの直下にあるcsscomb.jsonファイルになります。

これで自作したcsscomb.jsonファイルの読み込みが出来るようになりました。

フォーマットして並び替える

あとはcssのプロパティを並び替えたいファイルを開いた状態で、Windowsでは「ctrl + shift + P」、Macでは「⌘ + Shift + P」などでコマンドパレットを開き、CSSComb：Format styles を選択するとフォーマットされます。

これがフォーマット前。

これがフォーマット後です。

プロパティがアルファベット順になってるだけでなく、

などなど、自作した時の24項目が反映されています。

以上です。