前提プラグイン

stylelint-scss

SCSS用のルールを追加するプラグイン

https://github.com/stylelint-scss/stylelint-scss

stylelint-order

ソート機能を追加するプラグイン

https://github.com/hudochenkov/stylelint-order

READMEによれば標準で3種類の設定を内蔵している。

• order
• properties-order
• properties-alphabetical-order

stylelint-config-recommended-scss

https://github.com/stylelint-scss/stylelint-config-recommended-scss

https://github.com/stylelint-scss/stylelint-config-recommended-scss/blob/master/index.js

• stylelint-config-recommended を継承している
• customSyntaxオプションで postcss-scss が有効化されている

stylelint-config-standard-scss

https://github.com/stylelint-scss/stylelint-config-standard-scss

https://github.com/stylelint-scss/stylelint-config-standard-scss/blob/main/index.js

• stylelint-config-recommended-scss を継承して拡張している
• CSSの設定もstandard版 stylelint-config-standard が追加になっている

stylelint-config-sass-guidelines

https://github.com/bjankord/stylelint-config-sass-guidelines

https://github.com/bjankord/stylelint-config-sass-guidelines/blob/main/index.js

• 他のルールを継承していない
• orderプラグインを含む
  • properties-alphabetical-orderが true のため並び替えを別途行う場合は明示的に null にする必要がある
• 逆に postcss-scss は含まない
• standard版とは命名規則が若干異なる

資料

npm trends

https://npmtrends.com/stylelint-config-recommended-scss-vs-stylelint-config-sass-guidelines-vs-stylelint-config-standard-scss

ソート

(TBA)

課題

• all: unset を上部（変数より下、at-rulesより上）に単独で置きたいことがあるが、orderプラグインでは対応できなさそう

検索用

stylelint-config-recommended

https://github.com/stylelint/stylelint-config-recommended/blob/main/index.js

stylelint-config-standard

https://github.com/stylelint/stylelint-config-standard/blob/main/index.js