Stylelint v15 で stylistic rules が非推奨になったので対応する
はじめに
Stylelint の v15 からは CSS に関係しない stylistic rules (改行や空白などのコードフォーマット) が非推奨になりました。
Stylelint の開発当初はコードフォーマットライブラリが成熟していなかったため空白や改行のフォーマットも Stylelint が担っていました。現在は Prettier などのライブラリが充分に発達したため、Stylelint はそれらのルールを非推奨にしました。
When we created these rules, pretty printers (like Prettier) didn't exist. They now offer a better way to consistently format code, especially whitespace. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.
Migrating to 15.0.0 - Deprecated stylistic rules
stylelint-stylistic などのコミュニティプラグインによって stylistic rules も維持可能です。
ただ、今回は特に規模の大きなプロジェクトではなく変更対象のファイルが少ないので、Prettier によるコードフォーマットへ移行することにしました。
方法
stylelint を介して prettier を実行できる stylelint-prettier を使います。
1npm install --save-dev stylelint-prettier prettier
1module.exports = {
2 extends: [
3 "stylelint-config-standard",
4 "stylelint-config-recess-order",
5 "stylelint-prettier/recommended", // ← 追加
6 ],
7 rules: {
8 "font-family-no-missing-generic-family-keyword": [
9 true,
10 {
11 ignoreFontFamilies: "Menlo",
12 },
13 ],
14 "selector-class-pattern": "^[a-z]|^[a-z][a-zA-Z0-9]+$",
15 "comment-empty-line-before": [
16 "always",
17 {
18 except: ["first-nested"],
19 ignore: ["after-comment"],
20 },
21 ],
22 },
23};
これで設定は完了です。plugins に追加してルールをカスタマイズする方法もありますが、デフォルトルールを使うのであれば extends に追加するだけで OK です。
Stylelint を実行し新しい設定でフォーマットし直します。
1npm run stylelint --fix **/*.css
問題発生
一箇所、インデントのリント合戦が発生し修正できなくなりました（結局、もともと不要なスタイルだったので当該箇所を削除することで対応しました）。
すでにイシューとして上がっているようです。
おわりに
これまでは stylelint-config-prettier を使って Prettier との競合を打ち消す形でした。今後は Stylelint が stylistic rules を廃止することで Prettier との責務が明確になり、よりシンプルに運用できそうですね。