Help us understand the problem. What is going on with this article?

ここがすごいぞ! stylelint!

More than 3 years have passed since last update.

tl;dr

  • ESLintっぽいCSS用のLint
  • PostCSSプラグインとして動作するので色々嬉しい
  • SCSSもだいたい使える

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にstylelintpostcssReporterを追加するだけで良い

Gulpfile.js
  :
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のexamplepostcssを直接扱うexampleがほしければ公式にある。

当然、Command Lineから直接叩くことも出来る。なので、gulpやらを使いたくない人はこちらを使うと良いだろう。

Scss、SugerSSなどにも対応

PostCSSがCSS-likeな言語をサポートしているScss, SugerSSなどを、stylelintでもそのまま使える(LessはExperimentalの模様)

gulpで使いたければこんな感じになる

Gulpfile.js
  :
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

例えばカスタムルールはこんな具合で書ける

custom-plugin.js
// ruleはpluginの一部として記載する
module.exports = stylelint.createPlugin(ruleName, function(expectationKeyword, optionsObject) {
  return function(root, result) {
     // PostCSSのRoot Nodeが取得されるので、これを利用してruleを書いていく
  }
})

その他良い所

ルール違反時のメッセージをカスタマイズ出来る

多分ESLintなどには無い(と思う)が、表示するメッセージをカスタマイズすることが出来る。これはデザイナなど非エンジニアにもフレンドリーだろう。

stylelint.config.js
{
  "color-hex-case": [ "lower", {
    "message": "色はhexで統一しましょう"
  } ]
}

Atom周り充実

linter-stylelint.stylelintrcのアイコンなど、Atomプラグインが一通り対応されている。

stylefmtと組み合わせて自動修正

eslint --fix的な自動修正として、stylefmtというプラグインとの組み合わせが言及されている。実はまだここまで手をつけれていないが、組み合わせればかなり便利そう。


  1. 軽くコードを追ってみたが、どうもこれはPostCSSの仕様によるものらしい。 

  2. 実際、no-browser-hacksなどは、stylehacksという別なPostCSSプラグインを使って作られている。 

terrierscript
https://zenn.dev/terrierscript
https://terrier.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away