yuw27b’s blog

技術メモと雑記

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-quotessingleシングルクオートを使う
color-hex-caseupper16進数の色コードは大文字
color-hex-lengthshort色コードを省略できるときは省略する
color-no-invalid-hextrue色コードがおかしい場合に警告
number-leading-zeronever数字の前にゼロをつけない
number-no-trailing-zerostrue数字の後ろに(不要な)ゼロはつけない(「10.0px」はダメ)
number-zero-length-no-unit
length-zero-no-unit
true「0」の場合は単位なし(「margin: 0px;」はダメ)
value-list-comma-newline-afternever-multi-lineカンマの後で改行しない
value-list-comma-space-afteralwaysカンマの後は必ずスペースを入れる(「Arial, Helvetica」)
declaration-colon-space-afteralwaysコロンの後に必ずスペースを入れる(「margin:0;」はダメ)
declaration-no-importanttrue「!important」は使わない
declaration-block-no-single-linetrue1行で全部書かない(「a {color: #000; }」はダメ)
declaration-block-single-line-max-declarations01行で全部書かない(「a {color: #000; }」はダメ)
block-no-emptytrue空のブロックを許可しない
block-opening-brace-newline-afteralways「{」のあとは必ず改行
block-closing-brace-newline-beforealways「}」の前に必ず改行
block-opening-brace-space-beforealways「{」の前に必ずスペース
selector-combinator-space-afteralways「div +p」はダメ(「+」や「>」のあとに必ずスペース)
selector-combinator-space-beforealways「div+ p」もダメ(「+」や「>」の前にも必ずスペース)
selector-list-comma-space-afteralways「div, p」のとき、カンマの後に必ずスペース
rule-no-duplicate-propertiestrueプロパティの重複を警告(「display」が2個あるとか)
declaration-block-no-duplicate-propertiestrueプロパティの重複を警告(「display」が2個あるとか)
rule-trailing-semicolonalwaysルールの後に必ずセミコロン
declaration-block-trailing-semicolonalwaysルールの後に必ずセミコロン
indentationtabインデントはタブ

※設定ファイル(.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が見つからなければ、さらに上の階層にさかのぼって探しに行きます。


エディタのプラグインを利用してリアルタイムにチェック

このような実行方法でもいいのですが、エディタのプラグインを使えば、書いている最中にどんどん警告してくれるので便利です。
公式サイトにプラグインの一覧がありますが、現在AtomSublime Text、Visual Studio用のプラグインがあるようです。



GitHubのリポジトリを見ると、現在(2016年2月)も開発がどんどん進んでいるようです。新しいルールが追加されたりもしているようなので、何かあればまた追記したいと思います。