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。
"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は禁止
その他ルール一覧
参考