stylelintを使い始めたので設定例など (2016年9月更新)
※2016年9月13日更新：stylelintのアップデートに伴い、ルールの記述方法が古くなっていたものがありましたので、訂正しました。
stylelintって？
名前のとおりCSSのlintツールです。
設定したルールから外れた書き方をすると警告してくれます。
CSSを書くにあたって、インデントにタブを使うのかスペースを使うのか、スペースなら何文字分にするのか、「{」の前にスペースを空けるかどうか、といった「書き方」を統一する目的で使います。バリデーション（CSSの標準仕様に準拠しているかどうかの判定）は行いません。
公式サイト：http://stylelint.io/
日本語情報だとこちらが分かりやすかったです：CSSのLintをstylelintにする - Qiita
stylelintの特徴
- ルールのカスタマイズができる
- ルールセットの使い分けも簡単
CSSのlintツール自体は他にもありますが、stylelintが気に入った理由は、ルールのカスタマイズが簡単、ルールセットを簡単に切り替えられる、という2点です。
私は、デザインカンプをもらってHTML+CSSをコーディングする、という作業を定期的にするのですが、クライアントさんによってCSSのコーディングルールに違いがあるため、「このクライアントさんは小数点の前にゼロを入れちゃダメだったな」とか「こっちのクライアントさんはmargin-topは禁止だったな」とか、毎回資料を確認して見直しをしていました。
stylelintであれば、クライアントごとにルールのプリセットを作成しておき、警告の出た部分を修正するだけです。設定できるルールもたくさんあるので、これまでのところ、チェックしたい項目はすべてカバーできています。
インストールする
stylelintはnode.jsとnpmを使用するので、node.jsをインストール（インストールおよびバージョン管理方法は様々あるので、検索してみてください）してから、ターミナルで
npm install stylelint
と打つとインストールされます・・・と、公式サイトにありますが、私の環境では、
npm install -g stylelint
としてグローバルにインストールしないと、パスが通りませんでした。
次に設定ファイルですが、「.stylelintrc」という名前のファイルを用意します。ルールについては、公式サイトまたは、冒頭にあげた日本語情報が分かりやすいと思います。
全ルールを網羅したサンプルもstylelintのGitHubリポジトリにあります。
.stylelintrcの例
私が基本セットとして使っているルール一覧です。
多少ゆるめのルールになっていたり、個人的な癖もありますが、それなりに一般的な「書き方」になっているかな、と思います。
(打ち消してあるプロパティは、stylelintのアップデートに伴って使用できなくなった古い表記方法です。)
| string-quotes | single | シングルクオートを使う |
| color-hex-case | upper | 16進数の色コードは大文字 |
| color-hex-length | short | 色コードを省略できるときは省略する |
| color-no-invalid-hex | true | 色コードがおかしい場合に警告 |
| number-leading-zero | never | 数字の前にゼロをつけない |
| number-no-trailing-zeros | true | 数字の後ろに（不要な）ゼロはつけない（「10.0px」はダメ） |
length-zero-no-unit | true | 「0」の場合は単位なし（「margin: 0px;」はダメ） |
| value-list-comma-newline-after | never-multi-line | カンマの後で改行しない |
| value-list-comma-space-after | always | カンマの後は必ずスペースを入れる（「Arial, Helvetica」） |
| declaration-colon-space-after | always | コロンの後に必ずスペースを入れる（「margin:0;」はダメ） |
| declaration-no-important | true | 「!important」は使わない |
| declaration-block-single-line-max-declarations | 0 | 1行で全部書かない（「a {color: #000; }」はダメ） |
| block-no-empty | true | 空のブロックを許可しない |
| block-opening-brace-newline-after | always | 「{」のあとは必ず改行 |
| block-closing-brace-newline-before | always | 「}」の前に必ず改行 |
| block-opening-brace-space-before | always | 「{」の前に必ずスペース |
| selector-combinator-space-after | always | 「div +p」はダメ（「+」や「>」のあとに必ずスペース） |
| selector-combinator-space-before | always | 「div+ p」もダメ（「+」や「>」の前にも必ずスペース） |
| selector-list-comma-space-after | always | 「div, p」のとき、カンマの後に必ずスペース |
| declaration-block-no-duplicate-properties | true | プロパティの重複を警告（「display」が2個あるとか） |
| declaration-block-trailing-semicolon | always | ルールの後に必ずセミコロン |
| indentation | tab | インデントはタブ |
※設定ファイル（.stylelintrc）はこれ
設定ファイルを見てもらうと分かるのですが、上に挙げた項目のほかに、「property-whitelist」というルールにCSSの仕様上定義されている全プロパティを突っ込んでます。プロパティ名のスペルを間違えたときに警告してほしいからなのですが、もっとスマートな方法がありそうな気もしています・・・
それともやっぱりこればvalidatorの範疇かな。
使ってみる
ターミナルで、
stylelint xxx.css
とすると、ルールから外れた記述が見つかった場合に、
30:3 Expected single space after "," (selector-list-comma-space-after) 128:14 Expected "#f0bd25" to be "#F0BD25" (color-hex-case) 129:2 Unexpected duplicate property "background" (rule-no-duplicate-properties)
・・・というように出力されます。左端が行数／文字数なので、その部分を直していきます。
実行時に読み込まれるルールセットは、実行時のディレクトリにある.stylelintrcの内容が読み込まれます。.stylelintrcが見つからなければ、さらに上の階層にさかのぼって探しに行きます。
エディタのプラグインを利用してリアルタイムにチェック
このような実行方法でもいいのですが、エディタのプラグインを使えば、書いている最中にどんどん警告してくれるので便利です。
公式サイトにプラグインの一覧がありますが、現在Atom、Sublime Text、Visual Studio用のプラグインがあるようです。
GitHubのリポジトリを見ると、現在（2016年2月）も開発がどんどん進んでいるようです。新しいルールが追加されたりもしているようなので、何かあればまた追記したいと思います。
