[Stylelint] Prettierと競合したルールを検出する方法
1 min read
背景
Prettier と Stylelint を導入していて、Prettier のルールと Stylelint のルールが競合してしまっているケースがある(例えば indentation
)。
// stylelint.config
{
"extends": ["stylelint-config-prettier"]
}
さらに CSS in JS を導入していて、Stylelint の overrides
でさらにそれを打ち消すルールを追加して複雑化してしまっていた。
不要なルールは削除しておきたい。
方法
stylelint-config-prettier-checkを利用する。
(Stylelint の設定ファイルにstylelint-config-prettierが導入されている前提)
stylelint-config-prettier-check
を実行して、競合するルールが存在していると以下のように一覧が表示される。
$ npx stylelint-config-prettier-check
Conflicting rule(s) detected in your stylelint configuration:
indentation
block-closing-brace-newline-after
block-closing-brace-newline-before
block-opening-brace-newline-after
block-opening-brace-space-before
declaration-block-semicolon-newline-after
declaration-block-semicolon-newline-before
declaration-block-semicolon-space-after
declaration-block-trailing-semicolon
max-empty-lines
no-extra-semicolons
selector-list-comma-newline-after
selector-list-comma-space-before
string-quotes
value-list-comma-space-after
value-list-comma-space-before
Stylelint の設定ファイルから上記のルールを削除して、再度実行すると以下のように競合がない旨のメッセージが表示されれば良い。
$ npx stylelint-config-prettier-check
No conflicting rules detected in your stylelint configuration!