フロントエンド - ビルド・ツール

Stylelint すたいるりんと

CSSリンターコード品質SCSSスタイルシート静的解析

Stylelintについて教えて

簡単に言うとこんな感じ！

CSSのコードを自動でチェックしてくれる「文法先生」だよ！「インデントがバラバラ」「同じプロパティが2回書いてある」みたいなミスや表記ゆれを、保存する前に指摘してくれるツールなんだ。チーム全員のCSSを同じルールで統一できるってこと！

Stylelintとは

Stylelint（スタイルリント）は、CSS・SCSS・Lessなどのスタイルシートを静的解析（プログラムを実行せずにコードを調べること）してくれるリンターツールです。コードのミス・表記ゆれ・規約違反を自動で検出し、開発者に警告を出してくれます。Node.js上で動作し、コマンドラインやエディタの拡張機能、CI/CDパイプライン（自動テスト・デプロイの仕組み）と組み合わせて使えます。

JavaScriptの世界にESLintという有名なリンターがあるように、スタイルシートの世界ではStylelintが事実上の標準ツールとして広く使われています。たとえばプロパティの書き順をアルファベット順に統一したり、!importantの使用を禁止したり、色コードを大文字に統一したりといったルールをプロジェクトごとに設定できます。

複数人でCSSを書くと「人によって書き方がバラバラ」になりがちですが、Stylelintを導入することでコードレビューの手間を減らし、品質を一定に保つことができます。発注・選定の立場からは「CSSの品質管理ツールが入っているか」を確認するポイントのひとつです。

Stylelintの仕組みと主なチェック内容

Stylelintは設定ファイル（.stylelintrc）に書かれたルールに従って、スタイルシートを上から順に解析し、違反箇所を報告します。

チェックの種類	具体例
エラー検出	存在しないプロパティ名、無効な値
スタイル統一	インデント幅、クォートの種類（シングル/ダブル）
重複排除	同一セレクター・プロパティの重複
命名規則	クラス名のケバブケース強制（例: `.my-block`）
禁止事項	`!important`の禁止、特定のカラーコード禁止
プロパティ順序	アルファベット順や機能別グループ順の強制

設定ファイルのイメージ

{
  "rules": {
    "color-no-invalid-hex": true,
    "declaration-no-important": true,
    "indentation": 2,
    "string-quotes": "double"
  }
}

共有設定（extends）で楽に始める

Stylelintには「おすすめルールセット」をまとめた共有設定パッケージがあり、それを継承するだけで基本的な設定が完成します。

パッケージ名	特徴
`stylelint-config-standard`	公式推奨の標準ルールセット
`stylelint-config-recommended`	最小限のエラー系ルールのみ
`stylelint-config-prettier`	Prettierとの競合ルールを無効化
`stylelint-config-rational-order`	プロパティを機能別に並べる順序ルール

歴史と背景

2015年 — David Clark・Richard Hallows・Kieran Potts らが開発・公開。ESLintのCSS版を目指してOSSとして誕生
2016年 — プラグイン機構を導入。SCSS・Lessなどのプリプロセッサへの対応が本格化
2017〜2018年 — stylelint-config-standardが普及し、多くのプロジェクトで採用が広がる
2019年 — CSS Modules・CSS-in-JSへの対応が進む。PostCSSプラグインとして動作する設計が確立
2020〜2021年 — GitHub Actionsなどと組み合わせたCI統合が一般的に。VS Code拡張も安定
2022年 — v14リリース。設定ファイルの形式が整理され、TypeScript対応が強化
2023〜現在 — v15・v16でCSSネスト（CSS Nesting）への対応が追加。モダンCSSの進化に追従中

ESLint・Prettier・Stylelintの関係と役割分担

フロントエンド開発では、複数の品質管理ツールを組み合わせて使うのが一般的です。それぞれの役割を整理しましょう。

ツール	対象	主な役割
ESLint	JavaScript / TypeScript	バグ・規約違反の検出
Prettier	JS・CSS・HTML など	コードの自動整形（フォーマット）
Stylelint	CSS・SCSS・Less など	スタイルシートの規約違反・エラー検出

PrettierとStylelintは競合する？

Prettierもインデントやクォートを整形するため、Stylelintと設定が衝突することがあります。その場合は stylelint-config-prettier を使い、Prettierが担当する整形ルールをStylelintから無効化するのが定番の解決策です。役割を「Stylelintは問題検出」「Prettierは整形」と分けて考えると整理しやすくなります。

規格	内容
CSS Syntax Level 3 (W3C)	CSSの構文仕様。Stylelintが解析の基準とするルール
CSS Nesting (W3C)	ネストCSS仕様。Stylelint v15以降で対応