prettier-eslint、eslint-plugin-prettier、eslint-config-prettierの違いは何ですか？

PrettierとESLintを一緒に使いたいのですが、次々と使うだけでコンフリクトが発生しました。タンデムで使用できるように見える次の3つのパッケージがあることがわかります。

• prettier-eslint
• eslint-plugin-prettier
• eslint-config-prettier

しかし、私はすべて含まれているこれらのパッケージ名として使用するか不明だeslintとprettier。

どちらを使うべきですか？

ESLintは多くのルールが含まれていますし、書式設定に関連しているもののようなきれいでかもしれないが競合し、それらのarrow-parens、space-before-function-parenなどしたがってそれらを一緒に使用すると、いくつかの問題が発生します。以下のツールは、ESLintとPrettierを一緒に使用するために作成されました。

私が書いた表形式で比較スタックオーバーフローの書式のテーブルをサポートしていないため、要旨では。あなたがより多くの組織を好むならば、それをチェックしてください。

prettier-eslint：実行してからコードでprettier実行eslint --fixします。eslint通常、フォーマット関連のルールは自動的に修正eslint --fixされ、Prettierによって導入された競合するフォーマットを修正できるようになります。prettierコマンドを個別に実行する必要はありません。

eslint-plugin-prettier：これはESLintプラグインです。つまり、ESLintがチェックする追加のルールの実装が含まれています。このプラグインは内部でPrettierを使用しており、コードがPrettierの期待される出力と異なる場合に問題が発生します。これらの問題は、を介して自動的に修正できます--fix。このプラグインを使用すると、prettierコマンドを個別に実行する必要はありません。コマンドはプラグインの一部として実行されます。このプラグインはフォーマット関連のルールをオフにしませんeslint-config-prettier。手動またはを介してそのようなルールの競合が発生した場合は、それらをオフにする必要があります。

eslint-config-prettier：これはESLint構成であり、ルールの構成が含まれています（特定のルールがオン、オフ、または特別な構成であるかどうか）。この構成eslint-config-airbnbにより、Prettierと競合する可能性のあるフォーマット関連のルールをオフにするなど、他のESLint構成でPrettierを使用できます。このprettier-eslint構成では、Prettierがコードをフォーマットした後、ESLintが文句を言わないため、使用する必要はありません。ただし、prettierコマンドは個別に実行する必要があります。

これが違いを要約することを願っています。

更新：Prettierにフォーマットを処理させ、フォーマット以外の問題についてprettier-eslintはESLintを処理させるprettier-eslintことをお勧めしますが、その方法と同じ方向ではないため、推奨されなくなりました。あなたは使用することができるeslint-plugin-prettierとeslint-config-prettier一緒に。