CSSのLint "stylelint"を入れてみた

# Stylelintとは

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

https://stylelint.io/user-guide/get-started

## なぜStylelintを使うのか？

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

## 基本的な使い方

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

   ```bash
   npm i -D stylelint
   ```

### 2. **設定ファイルの作成**
   プロジェクトのルートディレクトリに `.stylelintrc` という名前のファイルを作成し、ルールを定義します。
   例えば、以下のように設定します
   
- `extends` は既存のルールセットを利用するための設定です。
- cssの場合は、`stylelint-config-standard` は最も一般的なルールセットの一つです。
- **scssの場合は、`stylelint-config-standard-scss` は最も一般的なルールセットの一つです。**

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

https://qiita.com/y-w/items/bd7f11013fe34b69f0df#2-styelint%E3%81%AE%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AE%E8%A8%AD%E5%AE%9Acss-scss-sass%E3%81%AE%E5%A0%B4%E5%90%88

### 3. **Lintの実行**
   プロジェクト内のスタイルシートファイルをチェックするには、以下のコマンドを実行します。
- `"src/**/*.scss"` はチェックしたいファイルのパターンです。
- 例えば、`src`ディレクトリ内のすべてのsCSSファイルを対象としています。

   ```bash
   npx stylelint "src/**/*.scss"
   ```

## Stylelintの主な機能

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

### 具体例

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

```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}"
  }
```

https://qiita.com/y-w/items/bd7f11013fe34b69f0df#33-%E8%87%AA%E5%8B%95%E4%BF%AE%E6%AD%A3%E3%81%AE%E3%82%84%E3%82%8A%E6%96%B9

# その他おすすめ機能

### プロパティの順番の入れ替え
https://github.com/hudochenkov/stylelint-order

#### 自分で順番入れ替えもしてみた
> 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();)

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

https://qiita.com/y-w/items/bd7f11013fe34b69f0df#5-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E6%B4%BB%E7%94%A8-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E9%A0%86%E7%95%AA%E3%81%AE%E5%85%A5%E3%82%8C%E6%9B%BF%E3%81%88css-scss


### 無効なプロパティを検知
https://qiita.com/FumiyaShibusawa/items/fdeb7632177643cd42e1#stylelint-declaration-block-no-ignored-properties

### 対象ファイルを除外
https://qiita.com/simochee/items/e1f9e557ca4b5aa410b9

### 命名規則をルール化
例：デフォルトはケバブケースなので、スネークケースにしてみた！！

https://github.com/postcss/postcss-scss

```diff_json
{
...
+  "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_]+$",
  },
}
```

### 色の宣言指定

https://www.npmjs.com/package/stylelint-color-format

### `px`は禁止

https://stylelint.io/user-guide/rules/unit-disallowed-list/

### その他ルール一覧
https://stylelint.io/user-guide/rules/

https://qiita.com/DesignChips/items/cd5282dba553026757c8



# 参考

https://qiita.com/y-w/items/bd7f11013fe34b69f0df

https://zenn.dev/sa2knight/scraps/5ffe0c44cb0895

https://zenn.dev/ignorant_kenji/articles/b331600a5c48d0