はじめに

リンターとフォーマッターはそれぞれが担う役割が異なります。
リンターは構文チェック、フォーマッタは書式のチェックを行うものです。

CSSに関して、前まではリンターであるStylelintとフォーマッタであるPrettierを併用すると、書式ルールについて競合するという問題がありましたが、これが解消されたようなので、これをまとめていきます。

※Stylelintの具体的な導入やその他変更点については↓の記事で書いています。

Stylelint v15で76の書式ルールが非推奨に

v15からcolor-hex-caseやproperty-caseなど、76個の書式ルールが非推奨になりました。
非推奨となったルールについては以下をご参照ください。

非推奨となった理由は、現在はPrettierなどのフォーマッタが存在するため、書式のフォーマットについてはそれらのフォーマッタに任せ、Stylelintではエラー回避のための書式以外のルール策定と維持に重きを置いていく方針にしたためであると説明されています。

v15では非推奨とするに留まっていますが、次回のメジャーリリースでは削除も辞さないとのことですので、本リリースから該当のルールは使わないようにするのが良さそうです。

Prettierとの併用

さて、書式ルールをStylelintに任せていた場合、Prettierとの併用が必要になったということですが、そもそも、前のバージョンだとPrettierと併用すると問題がありました。

その問題とは、Prettierで整形したものを、Stylelintが書式エラーとして検出してしまうという問題です。
この対策として、競合する可能性のあるStylelintのルールをオフにするstylelint-config-prettierを利用する必要がありました。

しかし、v15のリリースによってこの拡張ツールを利用しなくてもよくなったようです。

you may no longer need to extend Prettier's Stylelint config as there should be no conflicting rules¹

「may」と言われるといささか不安ですが、stylelint-config-prettierのREADMEを参照すると、

If you are using v15 or higher and are not making use of these deprecated rules, this plugin is no longer necessary.²
v15以降を使っている方で、これらの非推奨ルールを利用していない場合は、このプラグインはもう必要ありません。

と記載がありました。

ということで、素のStylelintとPrettierをそのまま併用できるようになったようです。どんどはれ。

まとめ

早速Stylelint v15とPrettierを併用していますが、今のところルールの競合の問題は無さそうなので、この運用で今後も進めていきたいと思います。

Prettierはあまり自由が効かない印象ですが、それが逆にフォーマッタとしては書式の「統一」に適しているのかもしれませんね。