2017-06-22 14 views
38

私はPrettierとESLintを一緒に使いたいですが、私はちょうどそれらを次々と実行することによっていくつかの競合を経験しました。私は彼らが並行して使用することができるように思えるこれらの3つのパッケージがあることを参照してください。prettier-eslint、eslint-plugin-prettierとeslint-config-prettierの違いは何ですか?

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

しかし、私はこれらのように使用しているか不明ですパッケージ名はすべてeslintprettierです。

私はどちらを使用しますか?

答えて

87

ESLintには多くのルールが含まれており、フォーマット関連のものは、arrow-parens,space-before-function-parenなど、Prettierと競合する可能性があります。これらを一緒に使用すると、いくつかの問題が発生します。 ESLintとPrettierを一緒に使用するために、以下のツールが作成されています。

スタックオーバーフローはテーブルの書式設定をサポートしていないため、私はcomparison in a tabular formatを要点として書きました。あなたがより多くの組織を好むなら、それをチェックしてください。

enter image description here

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設定であり、特定のルールがオン、オフ、または特別な設定であるかどうかにかかわらず、ルールの設定が含まれています。この設定では、Prettierと矛盾するフォーマット関連のルールをオフにして、eslint-config-airbnbのような他のESLint設定でPrettierを使用することができます。この設定では、Prettierがあなたのコードをフォーマットした後にESLintが文句を言うことがないので、prettier-eslintを使う必要はありません。ただし、prettierコマンドを個別に実行する必要があります。

これは、相違を要約しています。

+6

驚くばかりの自己回答形式です。 –

+0

私はカスタムルールを持つeslintrcファイルを持っています。すなわち余分な半分しかし実行中のeslint - よりきれいなセミコロンが必要です、私はもっときれいに別のルールファイルが必要ですか? – jasan

+1

プラグインは新しいeslintルールを定義し、configsはルールを適用するかどうか(そして、どのように)ルールを適用すべきかを設定するために、eslintプラグインとconfigsの一般的な違いについてコメントしました。 – laugri

関連する問題