Article original : Don’t just lint your code - fix it with Prettier

Le linting facilite notre vie car il nous indique ce qui ne va pas dans notre code. Mais comment éviter de faire le travail réel qui consiste à le corriger ?

Précédemment, j'ai écrit sur le linting, ce que c'est et comment il facilite votre vie. À la fin, j'ai même inclus une méthode pour corriger automatiquement votre code. Alors pourquoi j'écris ceci ?

Que voulez-vous dire par "le corriger" ?

Avant d'aller plus loin, abordons ce point rapidement. Les linters sont puissants et offrent un moyen facile de scanner votre code pour détecter les erreurs de syntaxe qui pourraient entraîner des bugs. Ou ils peuvent simplement aider à maintenir une base de code propre, saine et cohérente. Lorsqu'ils sont exécutés, ils montrent tous les problèmes et vous permettent de les corriger un par un.

En passant au niveau supérieur, certains linters vous permettent de passer un argument à la commande exécutant le linter pour qu'il corrige automatiquement les problèmes pour vous. Cela signifie que vous n'avez pas à corriger manuellement toutes ces petites erreurs d'espacement et de points-virgules (ajoutez-les ! ?) vous-même !

Image Ron Swanson heureux

Que puis-je faire de plus pour corriger les choses ?

Si vous utilisez déjà l'option de correction, c'est un bon début. Mais il existe des outils développés spécifiquement pour résoudre ce problème au-delà d'un simple flag dans votre commande. Celui que je vais aborder est Prettier.

Qu'est-ce que Prettier ?

Prettier se présente comme "un formateur de code opiniâtre". Il prend en entrée votre code et le sortie dans un format cohérent en supprimant tout style de code original. Il convertit en réalité votre code en un arbre syntaxique, puis le réécrit en utilisant les styles et règles que vous et Prettier fournissez ensemble via votre configuration ESLint et les règles par défaut de Prettier.

Vous pouvez facilement utiliser Prettier seul pour formater votre code, ce qui fonctionne très bien. Mais si vous combinez cela avec un processus ESLint sous-jacent, vous obtenez à la fois un linter puissant et un correcteur puissant. Je vais vous montrer comment faire fonctionner ces deux outils ensemble.

Image Voltron

Prise en main de Prettier

Pour ce guide, je vais supposer que vous avez ESLint configuré et installé dans une application. Plus particulièrement, je vais reprendre là où je m'étais arrêté dans mon précédent guide où nous avons installé ESLint dans une application React.

De plus, il est important de noter que Prettier nous indique dès le départ qu'il s'agit d'un formateur de code opiniâtre. Vous devez vous attendre à ce qu'il formate votre code de manière cohérente, mais peut-être différemment de ce que vous avez actuellement configuré. Mais ne vous inquiétez pas ! Vous pouvez ajuster cette configuration.

Alors, par où commençons-nous ? Nous avons déjà :

  • Installé ESLint
  • Ajouté Babel comme notre parseur
  • Ajouté un plugin qui inclut les configurations React

Ensuite, commençons par installer quelques packages :

yarn add prettier prettier-eslint prettier-eslint-cli -D

Note : la commande ci-dessus est similaire à l'utilisation de npm. Si votre projet n'utilise pas yarn, remplacez par npm si nécessaire.

Ci-dessus, nous installons :

  • prettier : package et moteur principal de Prettier
  • prettier-lint : transmet le résultat de Prettier à ESLint pour le corriger en utilisant votre configuration ESLint
  • prettier-eslint-cli : aide Prettier et ESLint à travailler ensemble sur divers fichiers de votre projet

Et nous les installons comme dépendance de développement, car nous n'en avons pas besoin en dehors du développement.

Configurer votre nouveau formateur

Maintenant que nos packages sont installés, nous pouvons configurer yarn pour exécuter cette commande pour nous.

Précédemment, nous avons configuré un script lint pour qu'il ressemble à ceci dans notre package.json :

"scripts": {
  ...
  "lint": "eslint . --ext .js"
  ...
}

Nous allons le laisser tel quel, mais nous allons faire quelque chose de similaire et créer un nouveau script à côté appelé format pour notre formateur Prettier :

"scripts": {
  ...
  "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'",
  "lint": "eslint . --ext .js"
  ...
}

Alors, que se passe-t-il là ? Nous :

  • Ajoutons un nouveau script appelé format, que nous pouvons exécuter avec yarn format
  • Utilisons notre package prettier-eslint-cli pour exécuter le formatage pour nous
  • Passons notre configuration ESLint située à côté de notre package.json à la racine du projet (changez cela si elle se trouve à un autre endroit)
  • Et enfin, nous disons à Prettier d'écrire tous les fichiers correspondant à **/*.js, ou tout fichier JS qu'il trouve récursivement dans notre projet

La beauté ici est que nous passons notre configuration ESLint à Prettier. Cela signifie que nous n'avons à maintenir qu'une seule configuration pour les deux outils, mais nous utilisons toujours la puissance de linting de ESLint ainsi que la puissance de formatage de Prettier.

Exécutez votre formateur !

Maintenant que tout est configuré, exécutons-le ! Exécutez ce qui suit :

yarn format

et immédiatement, nous voyons que cela fonctionne :

Image Exécution réussie de Prettier

Hé, mon code a l'air différent !

Image Foule en colère avec des fourches

Comme je l'ai mentionné précédemment, Prettier nous le dit clairement, c'est un formateur opiniâtre. Il est livré avec ses propres règles, un peu comme sa propre configuration ESLint, donc il apportera également ces modifications.

N'abandonnez pas votre code ! Au lieu de cela, vous pouvez examiner les modifications, voir si cela a peut-être du sens de le garder ainsi (ce sera très cohérent) ou vous pouvez mettre à jour votre configuration ESLint (.eslintrc.js) pour écraser les règles que vous n'aimez pas. C'est aussi un bon moyen d'apprendre peut-être de nouvelles choses que vous ne vous attendiez pas à attraper auparavant.

Alors, où cela nous mène-t-il ?

Si vous avez suivi jusqu'à présent, nous avons maintenant deux commandes :

  • lint : qui vérifie votre code et vous indique ce qui ne va pas
  • format : qui tente automatiquement de corriger les problèmes pour vous

Lorsque vous utilisez ces commandes en pratique, votre meilleur choix est de toujours exécuter format en premier pour qu'il tente de corriger automatiquement tout ce qu'il peut. Ensuite, exécutez immédiatement lint pour attraper tout ce que Prettier n'a pas pu corriger automatiquement.

Qu'est-ce qui suit ?

Maintenant que nous pouvons formater notre code automatiquement, nous devrions être capables de corriger notre code automatiquement !

Image Eddie de Fresh Off the Boat, l'esprit soufflé

La prochaine fois, nous irons plus loin et configurerons un hook git qui permettra d'exécuter cela avant de faire un commit. Cela signifie que vous n'aurez plus jamais à vous soucier d'oublier d'exécuter cela à nouveau !

Publié à l'origine sur https://www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/