Quelle est la différence entre prettier-eslint, eslint-plugin-prettier et eslint-config-prettier?

Je veux utiliser Prettier et ESLint ensemble, mais j’ai vécu des conflits en les utilisant l’un après l’autre. Je vois qu’il y a ces trois paquets qui semblent pouvoir être utilisés en tandem:

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

Cependant, je ne suis pas sûr de savoir à utiliser car ces noms de paquet contiennent tous eslint et prettier .

Que dois-je utiliser?

ESLint contient de nombreuses règles et celles qui sont liées au formatage peuvent entrer en conflit avec Prettier, telles que arrow-parens , space-before-function-paren , etc. Les outils suivants ont été créés pour utiliser ESLint et Prettier ensemble.

J’ai écrit une comparaison dans un format tabulaire dans un ordre général, puisque Stack Overflow ne prend pas en charge le formatage des tableaux. Découvrez-le si vous préférez plus d’organisation.

entrer la description de l'image ici

prettier-eslint : Exécute prettier eslint --fix alors lancez eslint --fix sur le code. eslint généralement des correctifs automatiques pour le formatage des règles associées, et eslint --fix sera capable de corriger le formatage conflictuel introduit par Prettier. Vous n’aurez pas besoin d’exécuter la commande prettier séparément.

eslint-plugin-prettier : Il s’agit d’un plug-in ESLint, ce qui signifie qu’il contient une implémentation pour les règles supplémentaires qu’ESLint vérifiera. Ce plugin utilise Prettier sous le capot et posera des problèmes lorsque votre code diffère de la sortie attendue de Prettier. Ces problèmes peuvent être automatiquement corrigés via --fix . Avec ce plugin, vous n’avez pas besoin d’exécuter la commande prettier séparément, la commande est exécutée dans le cadre du plugin. Ce plug-in ne désactive pas les règles de formatage et vous devrez les désactiver si vous voyez des conflits pour de telles règles manuellement ou via eslint-config-prettier .

eslint-config-prettier : Ceci est une configuration ESLint et contient des configurations de règles (que certaines règles soient eslint-config-prettier , désactivées ou des configurations spéciales). Cette configuration vous permet d’utiliser Prettier avec d’autres eslint-config-airbnb ESLint telles que eslint-config-airbnb en désactivant les règles de formatage susceptibles d’entrer en conflit avec Prettier. Avec cette configuration, vous n’avez pas besoin d’utiliser prettier-eslint car ESLint ne se plaindrait pas après que Prettier formatera votre code. Vous devrez cependant exécuter la commande prettier séparément.

J’espère que cela résume les différences.