Hirotum Note

CSScomb

CSSのフォーマットが出来る拡張機能を探していたところ、CSScombを見つけたので検証がてらインストールして試してみました。こちらの拡張機能は最終更新が 2020/7/5 となっているので現在は開発がされていない拡張機能のようです。

というのもそもそもの目的としては、久しぶりにcssに触れる機会があり Google推奨のアルファベット順 での並び替えが出来るのかを探していたのですが、結果としては自分の意図する形には落とし込めなかったので参考程度の記事になります。scss/cssを併用して実行までは動かせたので導入手順と設定方法をまとめてみました。
共同開発でcssのフォーマットルールを決めて運用するには使えそうな拡張機能なのと、SCSSでの利用も出来そうです。 個人運用ではLive Sass Compilerでほとんど事足りているんですが引き出しのひとつとして知識は持っておいても良いかと思います。
たしかにコードを記述するうえではcssの並び順が統一されているというのはきれいで見やすくなるので重要な一要素になります。

VSCodeはインストール済みという前提で[CSScomb]のインストールから説明します。大まかな手順としては以下のようになります。

CSScombの拡張機能のインストール

上の画像のとおり、[VSCode]の拡張機能で “CSScomb”を検索してインストールします、現段階で2つ種類がありましたが、バージョンが新しいほうをインストールすればいいようです。
現在で ver 5.3.2 を選択してインストールしての解説になります。

csscomb.jsonファイルの作成

次に < csscomb.json > ファイルを作成します。CSScombを利用するために必要な設定ファイルになります。 アルファベット順かプロパティごとのグループ別に分けたパターンを試してみましたが、最終的に参考にさせていただいた設定ファイルが以下になります。

GitHub csscomb.json 外部サイトへ

バシャログ。様 csscombでソートだけでなくインデントなどのフォーマットも整形する　外部サイトへ

// セミコロンの設定（true or false）
"always-semicolon": true,
// インデントのサイズ設定（なし：""、半角スペース2個："  "、タブ："\t" ）
"block-indent": "  ",
// 色コードの設定（lower or camel）
"color-case": "lower",
// 色コードのショートハンド（true or false）
"color-shorthand": true,
// 要素の指定（lower or camel）
"element-case": "lower",
// EOFでの改行（true or false）
"eof-newline": false,
// 小数点数値の0.を省略するか（true or false）
"leading-zero": false,
// クォートの設定（single　or double）
"quotes": "single",
// 「：」の後に入れる文字を設定
"space-after-colon": " ",
// 「>」や「+」の後に入れる文字を設定
"space-after-combinator": " ",
// 「{」のあとに入れる文字を設定
"space-after-opening-brace": "\n  ",
// 複数要素指定時「,」の後に入れる文字を設定
"space-after-selector-delimiter": "\n",
// 「}」の前に入れる文字を設定
"space-before-closing-brace": "\n",
// 「：」の前に入れる文字を設定
"space-before-colon": "",
// 「>」や「+」の前に入れる文字を設定
"space-before-combinator": " ",
// 「{」の前に入れる文字を設定
"space-before-opening-brace": " ",
// 複数要素指定時「,」の前に入れる文字を設定
"space-before-selector-delimiter": "",
// 末尾のスペースを削除するか（true or false）
"strip-spaces": true,
// 値が0の場合に単位を省略するか（true or false）
"unitless-zero": true,
// ベンダープレフィックスを整列するか（true or false）
"vendor-prefix-align": true,
// 空のルールセットを残すか（true or false）
"remove-empty-rulesets": true,
// abc順にソート、プロパティ別で分ける場合は最後に自分の設定したファイルを参照お願いします
"sort-order-fallback": "abc",
//アルファベット順に並べ替える場合は下の記述も必要のようです
"sort-order": []

次に < csscomb.json > ファイルを作成します。CSScombを利用するために必要な設定ファイルになります。 アルファベット順かプロパティごとのグループ別に分けたパターンを試してみましたが、最終的に参考にさせていただいた設定ファイルが以下になります。

また、開発しているローカルフォルダごとに< csscomb.json > ファイルをおく方法もあるのですが、[VSCode] に共通にしたので、以下のパスの .vscode フォルダ直下に作成したJsonファイルを設置しました。
C:\Users\[パソコンのユーザー名]\.vscode\
Cドライブのユーザーの .vscode フォルダ直下にcsscomb.json を設置して完了です。
おそらくファイル名は 変えても大丈夫だとは思いますが未検証です。

setting.jsonに設定情報を追記する

続いて、VSCode の設定ファイルの < setting.json >に[CSScomb]を利用するための設定記述をします。
ユーザー設定かワークスペースでの設定にするか状況によって使い分けていただければです。

// --------CSScomb -------------
// 保存時に自動でフォーマットしないようにする場合は "false" に 
"csscomb.formatOnSave": true,
// csscomb.json ファイルの設置している場所のパスを指定 私は .vscode　フォルダ直下にファイルを設置したので以下のようになりました。
"csscomb.preset": "~/.vscode/csscomb.json",
// SCSS でも利用する場合はこちらを記述する  ","が最後に必要な場合は忘れずに 
"csscomb.syntaxAssociations": {
"postcss": "scss"
},

最終的には Live Sass Compilerと併用してscss,cssのファイルを並び替えまで出来ましたが、scssファイルの [@include] でインデントがずれたり、font:{ …} の最後にセミコロンがどうしても入ってしまったりしてしまったので、運用的にはいちど [CSScomb]でフォーマット実行後に フォーマットの自動保存を解除してもう一度別の整形フォーマット処理をしてと2度手間な作業になってしまいました。
まぁとりあえずはcssのプロパティをきけたルールどおりに並び替えまでは出来ました。

久しぶりの更新でした、詳細の画像などあらためて更新しておきます。ご覧いただきｱﾘｶﾞ㌧♪