Windows: CSScombの使い方 - すたらブログ

CSScombとは
CSScombをインストール
CSScombをコマンドプロンプトで使う
独自のルールを指定する
- 私の設定
各エディタの拡張機能として使う
- おすすめのエディタ

CSScombとは

comb(コーム)は「くし(櫛)」の意味だそうです。
(参照: http://ejje.weblio.jp/content/comb)
CSSの記述をルールに基づいて自動で整形してくれます。
ルールは自由に設定できます。

(整形前)

(整形後)

公式: http://csscomb.com/

CSScombをインストール

Node.jsを入手

CSScombを使うには、土台としてNode.js(ノードジェイエス)が必要です。
下記から入手してください。
https://nodejs.org/en/

「LTS」の方を選べばいいと思います。
Node.js自体を使ってガンガン開発するわけではありませんから。
ウィザードによるインストールは一本道で迷うことはないと思うので割愛します。

Node.jsの確認

Node.jsが正しくインストールされたかを確認します。
コマンドプロンプトを起動して、「node -v」と入力してEnterキーを押してください。
バージョン番号が表示されれば成功です。

失敗しているようなら、パスが通っているかを確認してください。
コントロールパネルの「システム」を開き、左側の「システムの詳細設定」を選びます。

システムのプロパティの最下部の「環境変数」を選びます。

システム環境変数のPathを編集します。

写真のようなC:\Program Files\nodejs\の記述がない場合は、「新規」を選んで追加してください。
その後、PCを再起動します。

CSScombを入手

コマンドプロンプトで下記を入力してEnterします。

npm -g i csscomb

命令の意味は下記をご覧ください。
(参考: npmコマンドの使い方 - Qiita)

写真のような結果が表示されれば成功です。

なお、「簡易編集モード」を有効にしておくと、右クリックだけでコマンドプロンプトの画面内への文字列の貼り付けができるようになり、とても便利です。

CSScombの確認

「csscomb --version」と入力して、バージョン番号が表示されれば成功です。
失敗しているようなら、パスが通っているかを確認してください。
今回は、「ユーザー環境変数」の方のPathを編集します。

写真のようなC:\Users\(ユーザー名)\AppData\Roaming\npmの記述がない場合は、「新規」を選んで追加してください。
その後、PCを再起動します。

CSScombをコマンドプロンプトで使う

それでは、CSScombでCSSの記述を整える実際の手順を説明します。

エクスプローラからコマンドプロンプトを起動

エクスプローラを起動して、CSSファイルのある場所へ移動します。
そこで「Shiftを押しながら右クリック」し、「W」を押します。
もちろん写真のように「コマンドウィンドウをここで開く」を選んでもいいのですが、ショートカットキーの「W」を押すほうが速いと思います。

整形を実行

写真のように、「csscomb (対象のファイル名またはフォルダ名)」というコマンドを実行します。
何も表示されなければ成功です。

CSSファイルを開いてみると、インデントが揃えられたり、要素名が小文字に統一されたり、CSSプロパティの記述が並び替えられたりと、CSScombによって整形されたことが分かると思います。

エラーの例

CSSの記述に間違いがあると、全ての整形が取り消されてエラー文が表示されます。
具体的に何行目が間違っていると指摘されることもあれば、そうでない場合もあります。
ともかく、英語は読めなくても、何か表示された場合はCSSの記述を見なおしてみてください。

(エラーの行を示される場合)

(エラーの行が不明の場合)

独自のルールを指定する

デフォルトのルールではいろいろと不満があるので、自分なりのルールを設定します。
JSON形式の「.csscomb.json」という設定ファイルに記述します。
設定項目はたくさんありますが、24の問いに順番に答えることで自動でJSONを出力してくれるページが公式サイト内にあります。

設定項目一覧: https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
自動作成: http://csscomb.com/config

設定ファイルを設置する場所は自由に選べますが、一番楽で面倒がないのは対象のCSSファイルと同じ階層だと思います。

私の設定

私の好みの設定は冒頭の写真のような形です。

インデント幅はスペース2つ分。
{はセレクタからスペース1つ空けたところに置く。
全てのプロパティをアルファベット順で並べ替える。

上のような方針で自動作成のページで選んだものを使っていますが、ひとつだけ「"sort-order": []」という記述を追加しています。
これと「"sort-order-fallback": "abc"」の組み合わせで、全てのプロパティを例外なくアルファベット順に並べ替えることができます。

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "single",
    "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": []
}

各エディタの拡張機能として使う

コマンドプロンプトでコマンドを入力するのではなく、テキストエディタの拡張機能としてCSScombを使える場合があります。
SublimeText3、Brackets、Atomのそれぞれで拡張機能が提供されていますが、私が試してみたところ、SublimeText3とAtomでの動作を確認しました。

SublimeText3
- CSScomb
  成功です。
  まずは対象のCSSと同じ階層にある「.csscomb.json」の設定が優先され、それが存在しなければこの拡張機能のユーザ設定が、それもなければ拡張機能のデフォルト設定で整形されます。
Atom 1.7.3
- css-comb
  成功です。
  「.csscomb.json」は、エディタ左サイドバーのプロジェクトフォルダの、より上位にあるものが適用されるようです。
  もちろん、対象のCSSファイルと同じ階層でも正常に動作します。
  設定ファイルが存在しなければ、この拡張機能のデフォルト設定で整形されます。
- csscomb
  一応、成功です。
  ただし「.csscomb.json」は、対象のCSSファイルの場所にかかわらず、プロジェクトフォルダの最上位に設置しなければなりません。
- atom-csscomb
  拡張機能内のデフォルトのルールでの整形には成功しましたが、独自の設定ファイルは反映されません。
- atom-css-comb
  一応動作するようですが、正しく整形されていないようです。独自の設定ファイルは反映されません。
Brackets 1.6
- CSScomb Brackets plugin
  拡張機能内のデフォルトのルールでの整形には成功しましたが、独自の設定ファイルは反映されません。
- CSScomb
  全く動作しません。