Prettier 公式サイトの説明 によると、 eslint-config-prettier が紹介される一方、 eslint-plugin-prettier は非推奨とされています。

それぞれがどのような機能のパッケージなのか調べてみました。

eslint-config-prettier: Prettier と競合する ESLint ルールを無効にする

https://github.com/prettier/eslint-config-prettier

ESLint には、不具合の原因となるコードを検出するためのルールのほか、フォーマットに関するルールも存在します。 Prettier を使っている場合、フォーマットのルールは不要なだけでなく、 Prettier の設定とコンフリクトする場合もあります。

eslint-config-prettier はそのようなルールを無効にします。

eslint-plugin-prettier: ESLint 実行時に Prettier によるフォーマットを実行する

https://github.com/prettier/eslint-plugin-prettier

eslint-plugin-prettier は ESLint 実行時に Prettier によるフォーマットを実行する ESLint プラグインです。フォーマットが適用されていないファイルを検出する機能もあります。

Prettier が登場した当初は、エディタとの統合はまだ存在していませんでした。一方で ESLint (などの Linter ツール) は以前から存在していたため、多くのエディタがサポートしていました。このような時代に、 ESLint 経由で実行できる eslint-plugin-prettier は有用だったようです。

しかし現在は多くのエディタが Prettier をサポートしています。そして、 ESLint のプラグインとして Prettier を実行することにはデメリットがあり (不要な警告が出る・パフォーマンスが悪いなど) 、現在では eslint-plugin-prettier を使う理由はありません。

ESLint 設定の extends に plugin:prettier/recommended を書くとどうなるのか

README によると、これ一つで eslint-config-prettier と eslint-plugin-prettier の両方が有効になります。以下のように展開されます。

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

現在は eslint-config-prettier だけを有効にすればよいので、 Prettier 関連で eslintrc に必要な設定はこれだけです。

{
  "extends": ["prettier"]
}

なお、以前は prettier/react や prettier/vue のような他のプラグインと共存するための設定も存在したようですが、 eslint-config-prettier の 8.0.0 から不要になったようです。

CI で ESLint と同時に Prettier のチェックも実行する

CI で ESLint を実行しているなら、 prettier --check コマンドも同時に実行するとよいかもしれません。フォーマットが適用されていないファイルを検出できます。

例として CI で npm run lint を実行している場合、以下のように設定します。

{
  "scripts": {
    "lint": "eslint ./src && prettier --check ."
  }
}

参考文献