Stylelint を導入して、規則性のある CSS へ | CSS Modules, Scss対応

Stylelintとは？

Stylelint は名前の通り、CSSのlinterです. (参考)
リントなので、CSSファイル内のコーディングルールを指定して強制させることができます.

こうすることで、CSSファイル内の統一感を保てます.

インストール

npm or yarn or pnpm or bun

bun i -D stylelint stylelint-config-standard-scss

SassでScss記法を使って書いているので、それをパースしてもらうために、...standard-scssを入れています.

設定ファイルを追加

.stylelintrc.json

{
  "extends": "stylelint-config-standard-scss"
}

設定してみる

npm scriptsにstylelint用のコマンドを追加

package.json

"scripts": {
    "lint:style": "stylelint 'src/**/*.(scss|css)'"
}

src配下のscssまたはcssファイルを対象にしています.

実行

bun lint:style

実行結果
デフォルトで入っているルールによって、エラーが出てくれました！
color-codeはもっと短く描けるよ、と言われています.

--fix をつけると、このエラーを直してくれます.

package.json

"lint:style": "stylelint 'src/**/*.(scss|css)' --fix"

ルールをカスタマイズ

統一感という意味では、プロパティ名の順番も揃えたいところです.

設定をカスタマイズして拡張します. 参考

.stylelintrc.json

{
  "extends": ["stylelint-config-standard-scss"],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

プラグインを設定して、アルファベット順で並び替えるためのルールを追加します.

これで、もう一度リントをかけると、全てのCSSファイル内のプロパティ名がアルファベット順に並びます.