【Stylelint】SCSSの静的解析ルールセットはどれを使ったらいいの？

新プロジェクトでSCSSを利用するにあたり、コーディングルールをチームで揃えることにしました。

ルール違反の検出を自動化するためStylelintという静的解析ツールを採用しました。StylelintでSCSSの静的解析を行う場合、適用できるルールセットにいくつか種類があったので調べた結果をこちらに整理しようと思います。

静的解析ツール「Stylelint」とは

StylelintはSCSSに限らず、CSS、SCSS、Sass、Lessなどのスタイルシート言語の静的解析ができるツールです。

静的解析を実行するとルールに沿わない記述を検出してくれるので、スタイルシートの可読性や保守性を高めることができます。特にチーム開発している場合はコーダーによって記述がバラバラになりがちなので一定のルールを自動的に強制することで、記述が揃い、属人性を減らすことができます。

これによりコードレビューの効果を高めることができるメリットが大きいです。レビュワーとしてはコーディングルールに沿わない些細な整形ミス（ノイズ）に振り回されることなくコードに集中できますし、レビューを受ける側としても本質的でない指摘を受けることが減ります。

静的解析はチーム開発では必須の仕掛けといってもいいでしょう。

SCSS対応の静的解析ルール

Stylelint自体はあくまで解析（パース）をするツールで、ルールは別で用意する必要があります。すべて自力で定義することもできますが、便利なプリセットのルールセットがあるので、大抵はそれを導入して、部分的にカスタムすることになります。

調べたところSCSSに対応するものとして以下のルールセットが見つかりました。

• stylelint-scss
• stylelint-config-sass-guidelines
• stylelint-config-standard-scss
• stylelint-config-recommended-scss

これらを比較していきます

各ルールセットの依存関係

今回これらのルールセットはnpmを利用して導入します。

npmではパッケージの依存関係が定義されますが、この依存関係に基づいてこれを可視化してみました。

「style-scss」がすべてのルールセットの基本になっており、そこからSassのガイドラインに従って拡張されたのが「stylelint-config-sass-guidelines」になります。

「stylelint-config-standard-scss」「stylelint-config-recommended-scss」は元々CSS向けで用意されているルールセット「stylelint-config-standard」「stylelint-config-recommended」をベースに「style-scss」のSCSS向けルールを追加した形になっています。

また、「stylelint-config-standard-scss」は「stylelint-config-recommended-scss」に依存していることからわかるようにrecommendedにさらにルールを追加している形になるので、recommendedより厳格なルールになります。

どの静的解析ルールセットを採用すべきか？

選んだルールセットにカスタマイズができるので特定のルールセットでないといけないということでないですが、自分たちのチームに合ったルールをベースにカスタマイズしたほうが苦労が少ないと思います。

依存関係から分かるように「style-scss」は最小セットなので、実用としては残り3つの拡張されたルールを使うのが良さそうかと思います。

過去にCSSの静的解析で「stylelint-config-standard」もしくは「stylelint-config-recommended」を使われていた場合は「stylelint-config-standard-scss」もしくは「stylelint-config-recommended-scss」の導入がスムーズですね。

新規導入の場合「stylelint-config-sass-guidelines」がシンプルでよさそうですが、もう少し細かく依存関係のバージョンを見てみると表の通りです。

	依存するstylelint-scssのバージョン	最終更新
stylelint-config-sass-guidelines	^4.4.0	2021.10.31(v9.0.1)
stylelint-config-recommended-scss	^5.0.0	2023.5.23(v12.0.0)

執筆時点(2023.6.28)でstylelint-scssは5.0.1がリリースされておりstylelint-config-recommended-scssは対応していますが、^4.4.0（v4.4.0 <= version < 5.0.0の意味）のstylelint-config-sass-guidelinesは対応しておらず、少し古いstylelint-scssを入れることになってしまいます。

メンテナンス状況を見てもstylelint-config-sass-guidelinesは最終更新が2021.10.31と古いですね。

利用状況で見てもstylelint-config-recommended-scssに軍配が上がりそうです。

まとめ

結論、私たちのチームではstylelint-config-recommended-scssをベースにカスタマイズすることに決めました。

今回はSCSSの静的解析ツールStylelint導入にあたりルールセットの選定を行いましたが、皆さんのチームでのルールセット選定の参考になれば幸いです。

昨年2022年10月に@importが廃止されたように、今後もSCSS自体のアップデートまだあると思います。その時に利用しているツールがメンテされていなくて乗り換えが必要になるようなことは避けたほうが良いです。プロジェクト開始時点の技術選定では、早くプロダクト開発に入りたい気持ちを抑えて、技術、ツール等の成熟度や将来性をじっくり検討して開発環境を整備するのが大事ですね。