Je veux utiliser Prettier et ESLint ensemble, mais j'ai rencontré des conflits simplement en les utilisant l'un après l'autre. Je vois qu'il y a ces trois paquets qui semblent leur permettre d'être utilisés en tandem:
prettier-eslint
eslint-plugin-prettier
eslint-config-prettier
Cependant, je ne sais pas lequel utiliser car ces noms de paquetages contiennent tous eslint
et prettier
.
Que devrais-je utiliser?
ESLint contient de nombreuses règles. Celles liées au formatage peuvent être en conflit avec Prettier, telles que arrow-parens
, space-before-function-paren
, etc. Par conséquent, les utiliser ensemble causera des problèmes. Les outils suivants ont été créés pour utiliser ESLint et Prettier ensemble.
J'ai écrit un comparaison sous forme de tablea dans un Gist, car Stack Overflow ne prend pas en charge le formatage des tableaux. Vérifiez-le si vous préférez plus d'organisation.
prettier-eslint
: Lance prettier
puis lancez eslint --fix
sur le code. eslint
a généralement des corrections automatiques pour le formatage des règles, et eslint --fix
pourra résoudre le formatage conflictuel introduit par Prettier. Vous n’avez pas besoin d’exécuter la commande prettier
séparément.
eslint-plugin-prettier
: Ceci est un plugin ESLint, ce qui signifie qu'il contient l'implémentation de règles supplémentaires que ESLint va vérifier. Ce plugin utilise Prettier sous le capot et soulèvera des problèmes lorsque votre code diffère de la sortie attendue de Prettier. Ces problèmes peuvent être corrigés automatiquement via --fix
. Avec ce plugin, vous n'avez pas besoin d'exécuter la commande prettier
séparément, la commande est en cours d'exécution dans le cadre du plugin. Ce plugin ne désactive pas les règles liées au formatage, vous devrez les désactiver si vous constatez des conflits pour ces règles manuellement ou via eslint-config-prettier
.
eslint-config-prettier
: Il s'agit d'une configuration ESLint, qui contient des configurations pour les règles (que certaines règles soient activées, désactivées ou des configurations spéciales). Cette configuration vous permet d’utiliser Prettier avec d’autres configurations ESLint telles que eslint-config-airbnb
en désactivant les règles de mise en forme qui pourraient entrer en conflit avec Prettier. Avec cette configuration, vous n’avez pas besoin d’utiliser prettier-eslint
comme ESLint ne se plaindrait pas après que Prettier ait formaté votre code. Vous devrez toutefois exécuter la commande prettier
séparément.
J'espère que cela résume les différences.
Mise à jour: prettier-eslint
n'est plus recommandé et vous pouvez utiliser eslint-plugin-prettier
et eslint-config-prettier
ensemble.