stylelintの使い方動かして体験してみるまで

TL;DR

「stylelint 使い方」での検索が結構だったものの対象の記事がなくなんか申し訳ないので作ってみました。

結構入れ方や使い方が色々ありますのでフォローアップや追記希望等あれば、ContactかメニューにSNSが貼ってありますのでお気軽にお問い合わせください。

最終のサンプルはこちらにありますので、必要であれば参照してください。
https://github.com/isoppp/isoppp-com-examples/tree/master/how-to-use-stylelint

また、設定ファイルの記述等はgithubでファイル名で検索して人のコードをパクる方法がおすすめです。
エラーが出て動かない場合も人のファイルを見てみると書き方が間違っていた、等結構あります。

対象読者

stylelintを使ったことがない方
npmの基本はなんとなく分かる方
cliコマンドに抵抗がない方

に対してstylelintを動かして見る、までを行います。

やること

npm init から stylelint のインストール
タスク（npm scripts) の作成
stylelintの設定ファイルの作成
stylelintの設定の追加
stylelintで整形してみる

やらないこと

エディタへ入れる方法
PostCSS対応
gulp/grunt対応

npm init & install stylelint

mkdir stylelint-example
cd stylelint-example
npm init or npm init --y (お試しで適当にやるだけであれば --y で全てデフォルト値で初期化できます)
npm i -D stylelint (npm install --save-dev stylelint と同じです)

上からフォルダ作成、カレントディレクトリ移動、npmの初期化、stylelintをローカルインストールというコマンドになります。
stylelintのグローバルインストールは環境によってインストールされていない、等になりやすいのとバージョンがずれたりするためあまりオススメしません。
（npm i -g stylelint 形式のことです)

設定ファイルの作成と公式ルールの適用とscssの対応

資料: 公式config設定

色々な形式で設定ファイルを作成できるのですが、今回は .stylelintrc.js というファイルを作成します。
.stylelintrc というファイルを作成するのが一般的かもしれませんが、ルール間やルール自体にコメントを書きたいことや部分的にコメントアウトしたいということも多いので、jsの形式がおすすめです。

今回は公式のおすすめの設定とsassのサードパーティ製のオススメ設定を適用します。

資料: stylelint/stylelint-config-recommended
資料: kristerkari/stylelint-scss
資料: kristerkari/stylelint-config-recommended-scss

先ずは追加で上記パッケージをインストールします。

npm i -D stylelint-config-recommended stylelint-scss stylelint-config-recommended-scss

stylelintrc.jsというファイルを作成して下記の内容を設定します。

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss',
  ],
}

では実行といきたいのですが、cssファイルがないため、お試し用ファイルを作成します。

エラーが出そうなファイルの作成

後のために変な感じかもしれませんが、下記の構成でファイルを作成してみてください。

stylelint-example
├── sample-css
|  └── incorrect.css
├── sample-ignore
|  ├── incorrectcss.css
|  └── incorrectscss.scss
└── sample-scss
   └── incorrect.scss

全て中身は同じで下記のようにします。

.sample {
  background-color: #aaa;
  color: #FFFFFF;
}

.sample {
  background-color: #aaa;
  color: #FFFFFF;
  opacity: 0.5;
}

タスクの作成 (npm scripts)

stylelintを動かしてみたいと思います。

package.jsonのscriptsに下記のタスクを追加します。

デフォルトではtestのタスクがあるのでその上に追加します。

    "test": "echo \"Error: no test specified\" && exit 1"

  "scripts": {
    "cli:lint:css": "stylelint \"**/*.css\"",
    "cli:lint:scss": "stylelint \"**/*.scss\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

名前が長いですが、任意に変えて頂いても大丈夫です。
** は配下全てのフォルダ（サブフォルダを含む）を対象とし、そのフォルダ配下の .css / .scss が対象、というタスクの意味になります。

早速実行してみましょう。

npm run cli:lint:css
npm run cli:lint:scss

下記のようなエラーが出れば成功です。
加えてsample-ignoreフォルダも同様のエラーが出ると思いますが、これは後で除外の設定をしますので説明的に省略します。

sample-css/incorrect.css
 6:1  ✖  Unexpected duplicate selector ".sample", first used at line 1   no-duplicate-selectors

sample-scss/incorrect.scss
 6:1  ✖  Unexpected duplicate selector ".sample", first used at line 1   no-duplicate-selectors

このルール何を言っているかわからないという場合はstylelint no-duplicate-selectors という感じでルールをぐぐればすぐに出ます。

今回の場合はこちらのページが出るかと思います。
https://stylelint.io/user-guide/rules/no-duplicate-selectors/

同じクラスに対する定義が2つあるよというエラーだったようです。

ルールを追加する

それでは公式のオススメルールに対して上書きの設定を追加してみましょう。
上記サンプルファイルで気になる所といえば、カラーコードの書式を統一させたいですよね。

カラーコードは小文字に統一させたい
カラーコードは省略可能な場合に省略させたい

というルールを追加してみようと思います。

資料: 公式のrulesの一覧

こちらを color で検索してみるとこちらのルールが見つかると思いますのでこちらを設定してみます。

color-hex-case: Specify lowercase or uppercase for hex colors (Autofixable).
color-hex-length: Specify short or long notation for hex colors (Autofixable).

stylelintrc.js に rule というプロパティを追加します。

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss',
  ],
  rules: {
    'color-hex-case': 'lower',
    'color-hex-length': 'short',
  },
}

npm run cli:lint:scss

を実行すると下記のような内容になると思います。
ルールとそれている所が検出されています。

sample-scss/incorrect.scss
 3:10  ✖  Expected "#FFFFFF" to be "#ffffff"                              color-hex-case        
 3:10  ✖  Expected "#FFFFFF" to be "#FFF"                                 color-hex-length      
 6:1   ✖  Unexpected duplicate selector ".sample", first used at line 1   no-duplicate-selectors
 8:10  ✖  Expected "#FFFFFF" to be "#ffffff"                              color-hex-case        
 8:10  ✖  Expected "#FFFFFF" to be "#FFF"                                 color-hex-length

次にno-duplicate-selectorsというプロパティをオフにしてみましょう。

資料: 公式のrule単体の設定方法

指定のルールに null を設定するとオフにできると書かれているので、stylelintrc.js に追記しましょう。

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss',
  ],
  rules: {
    'color-hex-case': 'lower',
    'color-hex-length': 'short',
    'no-duplicate-selectors': null,
  },
}

もう一度 npm run cli:lint:scss を実行するとエラーが消えたのが分かるかと思います。

特定フォルダを対象外にする

例えばライブラリのフォルダにすごい反応が出てしまってエラーが見づらいという場合等に特定のフォルダを除外したい場合があります。

そんな時は .stylelintignore というファイルを作成してそちらに除外するファイルを設定します。

.stylelintignore を作成して下記の中身を記述してください。

sample-ignore

すごい簡素ではありますが、これでsample-ignoreフォルダがstylelint実行時のファイル指定(**/*.css)に含まれていても除外されるようになります。
npm run cli:lint:scss で試してみてください。

stylelintで自動修正してみる

stylelintにはエラーが自動修正できるものがありますので、そちらを試してみたいと思います。
git等を使っていたら現時点で一度コミットしてください。

package.jsonの scripts に下記のcli:format:xxx というタスクを追加してください。

  "scripts": {
    "cli:lint:css": "stylelint \"**/*.css\"",
    "cli:lint:scss": "stylelint \"**/*.scss\"",
    "cli:format:css": "stylelint --fix \"**/*.css\"",
    "cli:format:scss": "stylelint --fix \"**/*.scss\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

npm run cli:format:css を実行すると sample-css/incorrect.css に対して下記の修正が自動で行われていると思います。

-  color: #FFFFFF;
+  color: #fff;

stylelintでプロパティ順を一律に修正する

賛否両論あるかもしれませんが、cssのプロパティ順も修正したりしていると結構ぐちゃぐちゃな並びになりますよね。
並び順のルールを決めるのは大変だったりしますが、一旦アルファベット順に並べるプラグインがありますのでそちらを適用してみます。

資料: hudochenkov/stylelint-order

まずプラグインをインストールします。

npm i -D stylelint-order

stylelintrc.jsに設定を追加します。

下記の plugins 部分でこのプラグインを使う、ということと、'order/properties-alphabetical-order': true, でアルファベット順に並べる、という指定を行います。

module.exports = {
  plugins: [
    "stylelint-order",
  ],
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss',
  ],
  rules: {
    'color-hex-case': 'lower',
    'color-hex-length': 'short',
    'no-duplicate-selectors': null,
    'order/properties-alphabetical-order': true,
  },
}

sample-css/incorrect.cssの中身を下記にしてみましょう。

.sample {
  background-color: #aaa;
  color: #fff;
}

.sample {
  opacity: 0.5;
  color: #fff;
  background-color: #aaa;
}

npm run cli:format:css を実行します。
そうすると opacity color background-color の並びがアルファベット順になるかと思います。

.sample {
  background-color: #aaa;
  color: #fff;
}

.sample {
  background-color: #aaa;
  color: #fff;
  opacity: 0.5;
}

こうなれば成功です。

おわりに

チェックを目視でやっているととても手間だしモチベーションも下がるので是非是非こういうツールを入れていくと良いと思います。

stylelintの使い方 動かして体験してみるまで