web-dev-qa-db-fra.com

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

66
Yangshun Tay

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.

enter image description here

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.

151
Yangshun Tay