eslint-plugin-prettier と prettier-eslintの使い分け

eslistとprettierを併用してるのですが、恥ずかしながら今ごろ知りました。。。

この併用するには
1. prettier-eslintを使う
2. eslint-plugin-prettierを使う

の２つの方法があることを！！

それぞれの特徴

prettier-eslint

This formats your code via prettier, and then passes the result of that to eslint --fix

prettierを通してから、その結果をさらにeslint --fixに通すんやで。
とのこと。
prettier-eslint-cliと一緒に使うことで、コマンドラインから便利に使えるようになるみたい。

eslint-plugin-prettier

Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

ESLintのルールでprettierを走らせて、ESLintのエラーをレポートするで。
って感じ？
それよりも重要なのは

The rule is autofixable -- if you run eslint with the --fix flag, your code will be formatted according to prettier style.

eslint --fixで、prettierのスタイルを適用してフォーマットするで。
とのこと。
eslint-config-prettierで、prettierとeslintのルール間のコンフリクトを解決してくれる。

prettier-eslint vs eslint-plugin-prettier

じゃ、どっちを使えばええんや

やっぱり同じ疑問を持った人がいて、prettierのコントリビューターが答えてくれてる。
https://github.com/prettier/prettier-eslint/issues/11

この２つの違いのポイントが、
prettier-eslintはprettierの結果をeslint --fixに渡す。なのでeslintの設定が優先され、prettierのフォーマットは上書きされてしまう可能性がある。
eslint-plugin-prettierはeslint --fixと同時に動かすので、prettierのフォーマットは保たれる。

eslint-plugin-prettier - ESLint plugin. While prettier-eslint uses eslint --fix to change the output of prettier, eslint-plugin-prettier keeps the prettier output as-is and integrates it with the regular ESLint workflow.
https://github.com/prettier/prettier-eslint#related

なので、どちらを使うのがベストとういわけではなくケースバイケースになるみたい。

個人的感想

eslint-plugin-prettierを使ってます。自分のプロジェクトではairbnbのスタイルをベースにしているのですが、運用上これで問題になっているところは今の所ありません。
eslintに規約をゴリゴリに書いて、prettierは補助的に使いたいという人などはprettier-eslintを使う選択の方がいいのかもしれないと思いました！