[Stylelint] Prettier競合したルール検出する方法

1 min read
PrettierStylelint
hiroweb developer

背景

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!