（多分）正しいPrettier×ESLintとStylelintの組み方

2021-10-19

ここ数年ずーっと Prettier と ESLint および Stylelint の組み方を模索していたのですが、ようやく正解だと思われる方法にたどり着いたので、備忘録がてら。

前提

基本的にフォーマットは Prettier におまかせします。

そのため、ESLint と Stylelint 側で Prettier のフォーマットルールにバッティングするルールを無効化します。

Prettier × ESLint

ESLint の組み方

最低限必要なパッケージは以下のとおりです。

で、あとは設定を組むだけです。

{
  "extends": [
    "eslint:recommended",
    // 必ず配列の末尾に設定すること
    "prettier"
  ]
}

簡単ですね。

ESLint を組むときの注意点

eslint-plugin-prettier や prettier-eslint の導入は不要です。

これらの導入は推奨されておらず、基本的に考慮する必要もありません。

Prettier × Stylelint

Stylelint の組み方

ESLint の場合とほぼ同様です。

今回は stylelint-config-standard も導入したとします。

{
  "extends": [
    "stylelint-config-standard",
    // 必ず配列の末尾に設定すること
    "stylelint-config-prettier"
  ]
}

こちらもめちゃくちゃ簡単ですね。

Stylelint を組むときの注意点

こちらも ESLint と同様に stylelint-prettier および prettier-stylelint の導入は不要です。

　詳細

Prettier の公式ドキュメントを読んでいただければと、自分は読んでもよくわかりませんでした。

全体的にパッケージの名前がややこしすぎますね、ほんと良くない。

備考

Prettier の導入は必要ないのか

あくまで Linter 側の設定を無効にするパッケージを導入しているだけなので、Prettier 自体の導入は関係ないです。

ただ実際には husky × lint-staged の組み合わせで動作させると思いますので、必然的に Prettier も導入することになるかと。

ESLint と Stylelint のフォーマットもかけたい

ぶっちゃけ Prettier のフォーマットだけだと物足りないので、Linter 側でもフォーマットはかけることがほとんどだと思います。

VS Code であれば以下の設定でいけると思います。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

上記の設定だと【Prettier でフォーマットをかける → Linter でフォーマットをかける】という流れになるっぽいです。

そんな感じです、いろいろとややこしいですね。

kk-web