【CSS】CSS や SCSS を整えるリントツールである stylelint の紹介

　stylelint は CSS 関連の言語に対する静的解析ツールです。これを使うことでインデントの整形をはじめ、重複したCSSセレクター、読み難いプロパティ、無効な値などを検出できます。

Home ｜ Stylelint
Demo ｜ Stylelint

　インストール方法は例によって npm の次のコマンドでできます。

npm i --save-dev stylelint

　ただこれだけでは適用するルールの設定が存在しないので解析ができません。ルールの設定を手作業ですべて行うのは恐ろしく手間なのでルールセットもインストールすると手軽です。使うルールセットはソースコード中で使っている言語が CSS の場合と SCSS の場合で変わります。

// CSS の場合
npm install --save-dev stylelint-config-standard
// SCSS の場合
npm install --save-dev stylelint-config-standard-scss

　インストールしたルールセットを継承した設定ファイルを用意すれば準備完了です。このあたりは JavaScript のリントツールである ESLint 同様です。

/* .stylelintrc.js */
module.exports = {
     // CSS の場合
    "extends": "stylelint-config-standard",
     // SCSS の場合
    "extends": "stylelint-config-standard-scss",
}

　慣れてきたり、既にあるコードが stylelint おすすめのルールと大きく異なる場合は手動で細部のルールを詰めると運用が楽になります。

// 無効例
module.exports = {
    "extends": "stylelint-config-standard-scss",
    "rules": {
        // 無効化をする場合 ルール名 : null でできます。
        "selector-class-pattern": null, // セレクターでケバブケース以外を使うとのルールに怒られます
        "no-duplicate-selectors": null, // 重複したセレクターがあるとこのルールで怒られます
        "no-descending-specificity": null,// 優先度の高いセレクターの後に優先度の低いセレクターを書くと怒られます
        "declaration-block-no-redundant-longhand-properties": null, // grid を短縮で書けと怒られたりとかそういうやつで
    }
}

　手動実行は次の様に glob 形式でできます。

# Windows上での実行例。resources ディレクトリ以下にある scss ファイル全てを対象に取ります
.\node_modules\.bin\stylelint.cmd resources/**/*.scss

　特に癖のないツールであり、lint-staged と husky なり simple-git-hooks なりとをつなぐことによって、Git でコミットした際に自動でコミット対象のファイルに stylelint を実行できます。

toplenboren/simple-git-hooks： A simple git hooks manager for small projects
typicode/husky： Git hooks made easy 🐶 woof!#multiple-commands
okonet/lint-staged： 🚫💩 — Run linters on git staged files

【Git】package.json上でコマンドとGitを連携させるためのhusky, lint-staged – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発

// package.json
// simple-git-hooks と lint-staged による自動 stylelint 設定例
{
    "scripts": {
        "pre-commit": "npx lint-staged"
    },
    "simple-git-hooks": {
        "pre-commit": "npm run pre-commit"
    },
    "lint-staged": {
        "*.scss": [
            "stylelint --fix",
            "git add"
        ]
    },
    "dependencies": {},
    "devDependencies": {}
}