tl;dr
stylelint
ESLintのようなconfigでPostCSSプラグインとして動くstylelint。
唐揚げチャーハンのような「美味いものと美味いもの組み合わせたら絶対おいしいじゃん！」みたいなプロダクトが実際とても良かったので色々利点を記載。
導入についての手順などはすでに記事があったので、そちらへリンクしたい
ESLintっぽくて良い所
javascriptのLinterとしてスタンダードになってきたESLintに非常に良く似て作られているので、一度そちらを導入していればstylelintの導入はおそらくすんなり出来る。
また、ESLintの持っていた良い所をそのまま持ってきたような良さがある。
config周りがESLintにすごく近いので覚えることが少なめ
肝となるstylelintのconfigは、だいたいこんな感じで、ESLintにかなり近く作られているので、先にESLintを導入していれば覚えることは少ないはず。
{
"plugins": [
"../some-rule-set.js"
],
"rules": {
"block-no-empty": null,
"color-no-invalid-hex": true,
},
}
config関連は、下記のような部分もESLintと同様に扱える
- 設定は
package.json,.stylelintrcでも設定可能。stylelint.config.jsとすればJavaScript Objectとして設定を書ける - 無視対象のファイルを
.stylelintignoreなどで設定できる - plugin, extendの機能がある（後述）
デフォルトでルールが設定されてないので既存プロジェクトに導入しやすい
同様のツールである CSSLint など、デフォルトでルールがたくさん設定されているLinterの場合、既存プロジェクトに導入するのは逐一ルールをdisableにするか、大量に吐き出されるであろうlintを潰さないとまともに使えない状況で困難だった（そしてだいたい途中で辛くなって挫折する）
stylelintはESLint同様、デフォルトでは何のルールも設定されてない。
この事に良し悪しはあれど、既存プロジェクトへの導入では上記のような苦悩が無く、無理なく適用可能なルールから導入していける。
extendsの機能があるので、新規プロジェクト向けにはstylelint-config-standardが使える
ルールが何もないのは新規プロジェクトでは全く無意味。
「推奨ルールがあってくれないと何を入れたらいいかわからない」という人にも安心。ESLintではeslint:recommendedがあるように、stylelint-config-standardが用意されている。
$ npm install stylelint stylelint-config-standard -D
{
"extends": "stylelint-config-standard"
}
これでオススメルールが追加された状態になる。
もしもっと他のextendsを探したければstylelint-configのタグから探せる。
PostCSSを利用している恩恵の良い所
stylelintはパーサーとしてPostCSSを利用しているので、その恩恵にあやかれる。
gulpなどでPostCSSを利用しているなら追加するだけで良い
autoprefixerなど、PostCSSを既に導入しているプロジェクトも少なく無いだろう。そんなプロダクトにとってstylelintを導入するのはとても簡単。
既存のpostcssのpluginにstylelintとpostcssReporterを追加するだけで良い
:
var stylelint = require('stylelint')
var postcssReporter = require('postcss-reporter')
:
gulp.task('postcss', function () {
gulp.src("path/to/css")
.pipe(postcss([
autoprefixer(autoprefixerOpts),
postcssOpacity,
stylelint(), // これを追加
postcssReporter({clearMessages: true}), // こっちも必要
]))
.pipe(gulp.dest('./web/css'));
});
gruntのexampleやpostcssを直接扱うexampleがほしければ公式にある。
当然、Command Lineから直接叩くことも出来る。なので、gulpやらを使いたくない人はこちらを使うと良いだろう。
Scss、SugerSSなどにも対応
PostCSSがCSS-likeな言語をサポートしているScss, SugerSSなどを、stylelintでもそのまま使える（LessはExperimentalの模様）
gulpで使いたければこんな感じになる
:
var postcssScss = require('postcss-scss')
var stylelint = require('stylelint')
:
gulp.task('scss-lint', function () {
gulp.src("path/to/scss")
.pipe(postcss([
stylelint(), // これを追加
postcssReporter({clearMessages: true}), // こっちも必要
], {syntax: postcssScss}))
.pipe(gulp.dest('./web/css'));
});
ただし、残念ながらno-browser-hacksなど、一部のルールはうまく扱えない1
PostCSSと同じAPIを利用してrulesが作れる
恩恵としては地味だが、独自Ruleを作る際にPostCSSのAPIを扱えるのは利点がある。
PostCSSのpluginを書いたことがある人ならば（そんな人がどの程度いるのかは不明）すぐ書けるし、ルールをpluginに移植したくなったり、既存のpluginをルール化したい時もそんなに難しくない2。
例えばカスタムルールはこんな具合で書ける
// ruleはpluginの一部として記載する
module.exports = stylelint.createPlugin(ruleName, function(expectationKeyword, optionsObject) {
return function(root, result) {
// PostCSSのRoot Nodeが取得されるので、これを利用してruleを書いていく
}
})
その他良い所
ルール違反時のメッセージをカスタマイズ出来る
多分ESLintなどには無い（と思う）が、表示するメッセージをカスタマイズすることが出来る。これはデザイナなど非エンジニアにもフレンドリーだろう。
{
"color-hex-case": [ "lower", {
"message": "色はhexで統一しましょう"
} ]
}
Atom周り充実
linter-stylelintや.stylelintrcのアイコンなど、Atomプラグインが一通り対応されている。
stylefmtと組み合わせて自動修正
eslint --fix的な自動修正として、stylefmtというプラグインとの組み合わせが言及されている。実はまだここまで手をつけれていないが、組み合わせればかなり便利そう。
-
軽くコードを追ってみたが、どうもこれはPostCSSの仕様によるものらしい。 ↩
-
実際、no-browser-hacksなどは、stylehacksという別なPostCSSプラグインを使って作られている。 ↩