stylelintのおすすめ設定

stylelint とは

• stylelint
• 160種類以上のルールをカスタマイズできるリンター
• デフォルトでは、すべてのルールが無効化されているため、少しずつルールを追加していける
• 予め定義されたルールもあるので、それをベースにルールをカスタマイズすることもできる
• プラグインにより新しいルールを追加することができる
• 一部のルールは自動修正(fixオプション)に対応している
• PostCSSプラグインとしても動作するのでタスクランナーに組み込みやすい

おすすめ設定

console

% npm i -D stylelint-prettier stylelint-declaration-block-no-ignored-properties stylelint-config-recess-order stylelint-config-standard stylelint-config-prettier

/.stylelintrc.js

/**
 * stylelint Configuration
 */
module.exports = {
  plugins: [
    // stylelintにprettierの設定を読み込むためのプラグイン
    "stylelint-prettier",
    // displayプロパティの値によって無視されるプロパティを記載していないか検知するルールを追加するプラグイン
    "stylelint-declaration-block-no-ignored-properties",
  ],
  extends: [
    // プロパティの記述順に関するルール
    "stylelint-config-recess-order",
    // 一般的なルール
    "stylelint-config-standard",
    // prettierと連携するためのルール
    "stylelint-prettier/recommended",
    // prettier設定と重複するルールを打ち消すルール
    "stylelint-config-prettier",
  ],
  rules: {
    "plugin/declaration-block-no-ignored-properties": true,
    // custom
  },
  ignoreFiles: [
    "**/node_modules/**",
  ],
};

補足

bemを利用する場合は、stylelint-selector-bem-pattern、
colorなど特定のプロパティだけ必ず変数を利用したい場合は、stylelint-declaration-use-variable
などをプロジェクトによってもう少しプラグインを導入する場合もありますが、
縛りがきつすぎると使いづらくなるので塩梅が難しい。。。