stylelintを動かしてgit commitで自動で検証するまで

エディタなどにあるcssの検証ツールでESLintなどのnpmでないかなと思っていたらstylelintツールがいい感じだったのでメモ。

参照

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

インストール

nodeをインストール自分の場合はv10.15.0

# パッケージをインストール
npm i -D stylelint

これでstylelintでcssで検証できるがscssや公式のおすすめの設定をインストール

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

設定ファイル作成

package.json

{
  "scripts": {
       "lint:scss": "stylelint \**/*.scss\"",
  }
}

stylelintの設定ファイルを作成

.stylelintrcファイルを作成。形式はjs、json、yamlでできる。自分はeslintと合わせるたたま.stylelintrc.jsonただコメントをいれるとjsファイルがいいかもと思ってみたり

ルールは公式を参照（すごく多い）

Rules

• "color-hex-case": "lower"はcolorは小文字
• "color-hex-length": "short"はcolorは16進色には短い表記

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-recommended-scss"
  ],
  "rules": {
    "color-hex-case": "lower", 
    "color-hex-length": "short"
  }
}

動かしてみる

テスト用にエラーのscssファイルを作成

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

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

npm run lint: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",       no-duplicate-selecto
rs
          first used at line 1

 8:10  ×  Expected "#FFFFFF" to be "#ffffff"             color-hex-case

 8:10  ×  Expected "#FFFFFF" to be "#FFF"                color-hex-length