漂亮的eslint，eslint的插件prettier和eslint的配置prettier有什么區別？

Question

我想同時使用Prettier和ESLint，但是我只是一次又一次地使用它們而遇到了一些沖突。 我看到有這三個軟件包似乎允許它們一起使用：

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

不過，我不確定這是所有包含這些軟件包名稱使用eslint和prettier 。

我應該使用哪個？

Answer 1

ESLint包含許多規則，與格式相關的規則可能與Prettier沖突，例如arrow-parens ， space-before-function-paren等。因此，將它們一起使用將導致一些問題。 已創建以下工具，以將ESLint和Prettier一起使用。

由於堆棧溢出不支持表格式 ，因此我以要點的表格格式編寫了一個比較 。 如果您喜歡更多的組織機構，請查看。

prettier-eslint ：運行prettier的代碼，然后運行eslint --fix 。 eslint通常具有自動修復格式相關規則的功能，而eslint --fix將能夠修復eslint --fix引入的沖突格式。 您無需單獨運行prettier命令。

eslint-plugin-prettier ：這是一個ESLint插件，意味着它包含ESLint將檢查的其他規則的實現。 此插件在內部使用Prettier，並且當您的代碼與Prettier的預期輸出不同時，它將引發問題。 這些問題可以通過--fix自動修復。 使用此插件，您無需單獨運行prettier命令，該命令作為插件的一部分運行。 此插件不會關閉與格式相關的規則，如果您手動或通過eslint-config-prettier看到此類規則的沖突，則需要將其關閉。

eslint-config-prettier ：這是一個ESLint配置，它包含規則的配置（某些規則是打開，關閉還是特殊配置）。 通過此配置，您可以通過關閉可能與eslint-config-airbnb沖突的格式相關規則，將eslint-config-airbnb與其他ESLint配置（如eslint-config-airbnb一起使用。 使用此配置，您不需要使用prettier-eslint因為在Prettier格式化代碼后，ESLint不會抱怨。 但是，您將需要單獨運行prettier命令。

希望這可以總結出差異。

更新：建議的做法是讓Prettier處理格式和ESLint以解決非格式問題， prettier-eslint與該做法的方向不同，因此，不再建議使用prettier-eslint 。 您可以同時使用eslint-plugin-prettier eslint-config-prettier和eslint-config-prettier 。