読者です 読者をやめる 読者になる 読者になる

すたらブログ

文系Webプログラマの備忘録

Windows: CSScombの使い方

目次

CSScombとは

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

(整形前)

(整形後)

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を出力してくれるページが公式サイト内にあります。

設定ファイルを設置する場所は自由に選べますが、一番楽で面倒がないのは対象の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の拡張機能の比較は上の通りですが、私がお勧めするエディタの順位は「SublimeText3 > Brackets > Atom」です。

Atomは動作が時々不安定なのが気になります。
今回の拡張機能を数種試した時も、Atom拡張機能を無効化してもメニューからその拡張機能を実行できてしまうのでいちいち削除してました。
しかも、拡張機能を削除しても設定画面上では残っているように見えたので、念のためエディタを再起動しました。
別に致命的な不具合ではないのですが、エディタは仕事の基盤としてあらゆる場面で使うので、やっぱり気になります。

無料のエディタの中では、私は今後もBracketsを勧めるつもりです。
CSScombはコマンドプロンプトで実行すればいいんですから。