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


93

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 packages qui semblent leur permettre d'être utilisés en tandem:

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

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

Lequel dois-je utiliser?

Réponses:


208

ESLint contient de nombreuses règles et celles qui sont le formatage liés peuvent entrer en conflit avec Prettier, tels 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 une comparaison dans un format tabulaire dans un résumé, car Stack Overflow ne prend pas en charge le formatage de tableau. Vérifiez-le si vous préférez plus d'organisation.

entrez la description de l'image ici

prettier-eslint: S'exécute prettierpuis s'exécute eslint --fixsur le code. eslinta généralement des correctifs automatiques pour le formatage des règles liées, et eslint --fixsera en mesure de corriger le formatage conflictuel introduit par Prettier. Vous n'aurez pas besoin d'exécuter la prettiercommande séparément.

eslint-plugin-prettier: Il s'agit d'un plugin ESLint, ce qui signifie qu'il contient l'implémentation de règles supplémentaires qu'ESLint vérifiera. 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 automatiquement résolus via --fix. Avec ce plugin, vous n'avez pas besoin d'exécuter la prettiercommande séparément, la commande est exécutée dans le cadre du plugin. Ce plugin ne désactive pas les règles liées au formatage, et vous devrez les désactiver si vous voyez des conflits pour ces règles manuellement ou via eslint-config-prettier.

eslint-config-prettier: Il s'agit d'une configuration ESLint, et elle 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, eslint-config-airbnbpar exemple en désactivant les règles liées au formatage qui pourraient entrer en conflit avec Prettier. Avec cette configuration, vous n'avez pas besoin de l'utiliser prettier-eslintcar ESLint ne se plaindrait pas après que Prettier formate votre code. Vous devrez cependant exécuter la prettiercommande séparément.

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

Mise à jour: Il est recommandé de laisser Prettier gérer le formatage et ESLint pour les problèmes de non-formatage, prettier-eslintn'est pas dans la même direction que cette pratique, et prettier-eslintn'est donc plus recommandée. Vous pouvez utiliser eslint-plugin-prettieret eslint-config-prettierensemble.


J'ai un fichier eslintrc dans lequel j'ai des règles personnalisées. ie no-extra-semi cependant exécuter eslint --fix avec plus joli nécessite un point-virgule, ai-je besoin d'un fichier de règles séparé pour plus joli?
jasan

2
Juste un commentaire sur la différence générale entre les plugins eslint et les configs, car je sentais que c'était ce qui manquait pour moi: les plugins définissent de nouvelles règles eslint et les configurations définissent si ou non (et comment) les règles doivent être appliquées.
laugri

1
Avec eslint-config-prettier, pourquoi avons-nous besoin de courir plus joli? Ne eslint --fixformaterait -il pas le code de la même manière qu'une plus jolie le ferait?
Mateo Hrastnik

@MateoHrastnik ESLint ne gère pas tous les problèmes de formatage possibles. Reportez-vous à ce fil - github.com/prettier/prettier-eslint/issues/101
Yangshun Tay

10
Nous sommes en 2019, et c'est toujours la meilleure explication que je trouve, bien meilleure que celle officielle. Vous pourriez ajouter que plus joli-eslint n'est plus recommandé. Et ces deux derniers peuvent désormais travailler ensemble.
Fate Riddle
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.