stylelint入門

stylelint とは

• stylelint
• 160種類以上のルールをカスタマイズできるリンター
• デフォルトでは、すべてのルールが無効化されているため、少しずつルールを追加していける
• 予め定義されたルールもあるので、それをベースにルールをカスタマイズすることもできる
• プラグインにより新しいルールを追加することができる
• 一部のルールは自動修正(fixオプション)に対応している
• PostCSSプラグインとしても動作するのでタスクランナーに組み込みやすい

とりあえず使ってみる

初期化

$ npm init -y
$ npm install --save-dev stylelint stylelint-config-standard

設定ファイル作成

.stylelintrc.json

{
  "extends": [
    // 一般的な設定を継承する
    "stylelint-config-standard"
  ],
  "rules": {
    // ルールを上書きする
    "block-no-empty": null,
  }
}

Lint

$ npx stylelint src/**/*.css
# 自動修正(一部ルールのみ対応)
$ npx stylelint src/**/*.css --fix

プロパティの並び順をいい感じにする

$ npm install --save-dev stylelint-config-recess-order

.stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
+     "stylelint-config-recess-order"
  ],
  "rules": {
    ルールを上書きする
    "block-no-empty": null,
  }
}

SCSSにLintをおこなってみる

初期化

$ npm init -y
$ npm install --save-dev stylelint stylelint-config-recommended-scss stylelint-scss

設定ファイル作成

.stylelintrc.json

{
  "extends": [
    "stylelint-config-recommended-scss"
  ],
  "plugins": [
    SCSS用のルールを追加する
    "stylelint-scss"
  ],
  "rules": {
    ルールを上書きする
    "block-no-empty": null,
  }
}

Lint

$ npx stylelint src/**/*.scss --syntax scss
# 自動修正(一部ルールのみ対応)
$ npx stylelint src/**/*.scss --syntax scss --fix

サンプルコード

最後に

おすすめ設定はこちら
　→ stylelintのおすすめ設定