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.
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.