Stylelintとは

Stylelintは、CSSやSCSSなどのスタイルシート言語に対して、コードの品質を保ち、ベストプラクティスに従うための静的解析ツールです。簡単に言うと、Stylelintはスタイルシートのコードをチェックして、エラーや警告を報告し、コードの一貫性を保つのを助けてくれるツールです。

なぜStylelintを使うのか？

エラーの防止: コードに潜む誤りを検出して修正します。
コードの一貫性: チーム全体で一貫したコーディングスタイルを維持できます。
メンテナンスのしやすさ: 規則に従ったコードは読みやすく、保守が容易です。
ベストプラクティスの適用: CSS/SCSSのベストプラクティスに従うことで、パフォーマンスやアクセシビリティが向上します。

基本的な使い方

1. Stylelintのインストール

プロジェクトにStylelintを導入するためには、以下のコマンドを実行してインストールします。

npm i -D stylelint

2. 設定ファイルの作成

プロジェクトのルートディレクトリに .stylelintrc という名前のファイルを作成し、ルールを定義します。
例えば、以下のように設定します

extends は既存のルールセットを利用するための設定です。
cssの場合は、stylelint-config-standard は最も一般的なルールセットの一つです。
scssの場合は、stylelint-config-standard-scss は最も一般的なルールセットの一つです。
```
{
  "extends": "stylelint-config-standard-scss"
}
```

3. Lintの実行

プロジェクト内のスタイルシートファイルをチェックするには、以下のコマンドを実行します。

"src/**/*.scss" はチェックしたいファイルのパターンです。
例えば、srcディレクトリ内のすべてのsCSSファイルを対象としています。
```
npx stylelint "src/**/*.scss"
```

Stylelintの主な機能

エラーの検出: スタイルシートのエラーや警告を報告します。
ルールのカスタマイズ: チームやプロジェクトのニーズに合わせてルールをカスタマイズできます。
プラグインのサポート: 様々なプラグインを利用して、機能を拡張できます。

具体例

例えば、次のようなCSSファイルがあるとします。

.example {
  color: red;
  font-size: 16px;
  margin: 0px;
  padding: 10px;
}

ここで、margin: 0px; を margin: 0; に変更するべきだという警告を出したり、プロパティの並び順をルールに従って整理するよう指摘したりします。

まとめ

Stylelintは、CSSやSCSSなどのスタイルシートのコード品質を保ち、一貫性を維持するためのツールです。エラーの防止、一貫したコーディングスタイルの維持、メンテナンスの容易化、ベストプラクティスの適用など、多くのメリットがあります。設定も比較的簡単で、ルールをカスタマイズすることで、チームやプロジェクトに適したLintingを行うことができます。

自動で修正させてみた

--fixオプションを指定すると、一部の書式に関するエラーを自動修正します。stylelintはアグレッシブな修正はしないので、すべてのエラーを修正できるわけではありません。先のエラーに対して、例えば「未使用のクラスなので、自動削除」ということはしません7。

package.json

"scripts": {
      "lint:css": "stylelint --fix **/*.{css,scss,sass}"
  }

その他おすすめ機能

プロパティの順番の入れ替え

自分で順番入れ替えもしてみた

keywords:

custom-properties — Custom properties (e. g., --property: 10px;)

dollar-variables — Dollar variables (e. g., $variable)

at-variables — At-variables (e. g., @variable available in Less syntax)

declarations — CSS declarations (e. g., display: block)

rules — Nested rules (e. g., a { span {} })

at-rules — Nested at-rules (e. g., div { @media () {} })

less-mixins — Mixins in Less syntax (e. g., .mixin();)

{
  "plugins": [
...
+    "stylelint-order"
  ],
  "customSyntax": "postcss-scss",
  "rules": {
+    "order/order": [
+ [
+        "at-rules",
+        "dollar-variables",
+        "custom-properties",
+        "declarations",
+        "rules"
+      ],
+      {
+        "disableFix": false
+      }
+    ]
  }
}

無効なプロパティを検知

対象ファイルを除外

命名規則をルール化

例：デフォルトはケバブケースなので、スネークケースにしてみた！！

{
...
+  "customSyntax": "postcss-scss",
  "rules": {
+    "selector-class-pattern": "^[a-z0-9_]+$",
+    "selector-id-pattern": "^[a-z0-9_]+$",
+    "scss/dollar-variable-pattern": "^[a-z0-9_]+$",
+    "scss/at-mixin-pattern": "^[a-z0-9_]+$",
  },
}

色の宣言指定

`px`は禁止

その他ルール一覧

参考