メインコンテンツまでスキップ

Stylelint

link: https://stylelint.io/

stylelint は CSS のリンターで、CSS のコードのスタイルをチェックするために使用されます。

主な利点には以下のようなものがあります。​

  1. コードのスタイル: stylelint は CSS のコードのスタイルをチェックし、標準に沿っていない部分を指摘します。また、自分たちのチームのスタイルガイドに沿ったコードを保証することもできます。
  2. 自動修正: stylelint は自動修正をサポートしているので、指摘した問題を自動で修正することができます。
  3. 複数のブラウザへの対応: stylelint は複数のブラウザへの対応をチェックし、互換性の問題を指摘します。
  4. 可読性の向上: stylelint は CSS のコードの見通しを良くするために、可読性を向上させるためのルールを提供します。
  5. プラグイン拡張性: stylelint は様々なプラグインを利用することで、より高度なチェックやカスタマイズが可能です。

以上のように、stylelint は CSS のコードのスタイルをチェックするために有用なツールであり、自動修正、ブラウザへの対応、可読性の向上、プラグイン拡張性などの機能を持っています。

Installation​

npm install --save-dev stylelint stylelint-config-recess-order stylelint-config-standard stylelint-config-standard-scss stylelint-scss

Configuration​

ヒント

SCSS, css module に対応した設定例

.stylelintrc
{
  "plugins": ["stylelint-scss"],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-config-recess-order"
  ],
  "rules": {
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ],
    "selector-class-pattern": ".",
    "value-no-vendor-prefix": [
      true,
      {
        "ignoreValues": ["box"]
      }
    ]
  }
}