Stylelint v15 で stylistic rules が非推奨になったので対応する

はじめに

Stylelint の v15 からは CSS に関係しない stylistic rules (改行や空白などのコードフォーマット) が非推奨になりました。

Stylelint の開発当初はコードフォーマットライブラリが成熟していなかったため空白や改行のフォーマットも Stylelint が担っていました。現在は Prettier などのライブラリが充分に発達したため、Stylelint はそれらのルールを非推奨にしました。

Migrating to 15.0.0 - Deprecated stylistic rules

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.

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

問題発生

一箇所、インデントのリント合戦が発生し修正できなくなりました（結局、もともと不要なスタイルだったので当該箇所を削除することで対応しました）。

すでにイシューとして上がっているようです。

I've this issue 188:3 ✖ Insert "··" prettier/prettier with --fix flag, but no error without --fix flag

おわりに

これまでは stylelint-config-prettier を使って Prettier との競合を打ち消す形でした。今後は Stylelint が stylistic rules を廃止することで Prettier との責務が明確になり、よりシンプルに運用できそうですね。

参考

• Migrating to 15.0.0
• ｢Stylelint｣｢Prettier｣を使ってコードの品質を高める【2023年版】