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

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

サンプルコード

https://github.com/ohnaka0410/nodejs-samples/tree/main/stylelint

最後に

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

ohnaka0410
福井のバックエンド・アプリ制作メインの会社で働いています🍀 マークアップ / CSS設計 / NodeJs / Vuejs / React / Jamstack / PHP / DDD / Docker 🤔
https://twitter.com/ohnaka0410
no4
みんなのしあわせのためにソフトウェアをつくる会社です🍀
https://no4.co.jp/
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