Correction incrémentale de nombreuses erreurs ESlint de manière propre avec ESlint Nibble

À mesure que notre équipe grandit, nous avons besoin de plus de règles fonctionnelles et de règles esthétiques pour garder notre base de code moins sujette aux erreurs et plus cohérente. Heureusement, notre backend et notre frontend utilisent JavaScript (avec la même version de TypeScript), donc ces changements ont un impact important sur notre travail quotidien pour toute l'équipe.

Nous effectuons généralement ce genre d'améliorations lors de ce que nous appelons des "journées techniques" (le lundi toutes les deux semaines) lorsque nous pouvons travailler sur des tâches que nous choisissons nous-mêmes. Nous essayons de les faire progressivement pour éviter les branches durables qui sont difficiles à entretenir et à revoir.

Récemment, nous avons choisi d'ajouter le plugin Unicorn, qui contient des dizaines de règles ESlint. Cela peut sembler écrasant au début car cela déclenche des centaines d’erreurs. Heureusement, nous avons découvert eslint-nibble : un outil en ligne de commande qui permet d'ajouter des règles une par une avec une interface graphique.

Comment l'utiliser

La première étape consiste à installer le nouveau plugin que nous souhaitons appliquer. Ensuite, au lieu d'activer les règles une par une, nous pouvons désormais toutes les activer dans .eslintrc.js. Enfin, au lieu de tout pelucher d'un coup avec eslint, on peut simplement utiliser eslint-nibble comme ceci :

npx eslint-nibble --fixable-only --no-warnings --cache "./src/**/*.{ts,js,vue}"

• cela accélère notre processus au début avec des règles --fixables uniquement
• Comme nous ne faisons pas échouer CI en cas d'avertissement, nous utilisons --no-warnings pour clarifier les choses
• l'option --cache est similaire à celle d'ESlint et rendra le processus répété beaucoup plus rapide

Nous sommes ensuite accueillis par un joli graphique qui montre chaque règle défaillante avec le nombre d'erreurs pour chacune :

Lors de la sélection d'une règle via son interface, il nous est proposé de la corriger automatiquement (si possible). Ensuite, nous l'examinons généralement manuellement avant de nous engager, juste au cas où quelque chose d'étrange apparaîtrait.

Un autre point clé est qu'il est capable de corriger une et une seule règle à la fois, même si une ligne d'un code contient plusieurs erreurs de règle. Cela rend les commits atomiques, il est donc facile de déboguer et de réviser par exemple.

Si vous apportez des modifications supplémentaires avant de valider — par exemple, nous devons parfois appliquer Prettier sur la ligne modifiée — assurez-vous de ne pas enregistrer ni lint le fichier, car cela corrigerait toutes les autres erreurs liés aux autres règles du fichier. La bonne méthode consiste à résoudre manuellement le problème nécessaire uniquement en focalisant la ligne et en exécutant Quick Fix, puis en utilisant la commande Fix sans formatage du VS Code.

Avantages

Le principal avantage est de pouvoir facilement voir quelles règles sont les plus simples à ajouter ensuite. Chaque jour, nous pouvons désormais choisir de corriger une règle comportant de nombreuses erreurs, ou un grand nombre de règles ne comportant que quelques occurrences. Auparavant, nous activions aveuglément les règles une par une sans connaître à l'avance leur impact.

C'est aussi l'occasion de comprendre la règle elle-même en lisant sa documentation et pourquoi il est préférable (ou pas) de procéder de cette façon, ainsi on apprend de nouvelles choses.

Nous décidons parfois de personnaliser ou de désactiver complètement une règle parce qu'elle ne correspond pas à nos besoins ou à notre style de code. Par exemple, nous avons décidé de désactiver une règle obligeant à utiliser Set dans certains cas : comme Vue 2 ne supporte pas la réactivité sur Map et Set, nous avons pensé que cela pourrait introduire des bugs ou inciter les développeurs à l'utiliser de manière inattendue.

Enfin, il est plus facile pour les réviseurs de lire les commits concernant une règle à la fois. Cet outil facilite l'amélioration progressive en nous aidant à ajouter quelques règles ESlint de temps en temps.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!