ESLint : Configuration pour un code propre et productif

0:00bon les amis aujourd'hui petite vidéo du dimanche je voulais vous parler d'un outil qui que j'utilise au quotidien et que je trouve absolument bah essentiel cet outil s'appelle es lint et il y a beaucoup de de choses que l'on peut faire avec es lint qui vont qui font que c'est vraiment un un obrainer à avoir sur un un sas la première chose c'est que bah déjà c'est un ça va permettre de détecter forcément les toutes les erreurs que vous pourriez avoir dans votre code des variables par exemple qui sont pas déclaré des propriétés dans objet qui n'existe pas donc il a il y a plein de choses que que es l va vous

0:35faire éviter notamment une tonne de bugs mais ce qui est intéressant surtout dans es lint c'est que il va il gère également maintenant le le formatting c'està-dire que quand on lorsque l'on ajoute par exemple lorsque l'on fait un un retour à la ligne ou un trop h enlever les espaces à la fin ou et on peut faire vraiment pas pas mal de choses intéressantes avec comme par exemple automatiquement trier les propres parordre alphabétique donc là vous voyez que si je modifie une automatiquement il ma tout réordonné on peut également le câbler avec des sur des sur des properties aussi interfaces de des propriétés d'interface de typ script

1:16donc si je modifie automatiquement h vous voyez qu'il a tout automatiquement et bien réorienté et ça en fait c'est l'un des points que j'adore le plus avec es lint c'est que quand on commence à être plusieurs sur un code base ce qui arrive très rapidement on a chacun a ses propres conventions chacun a ses préférence et honnêtement c'est juste impossible de et bien d'y penser même moi qui suis assez strict sur les sur les la manière de de coder sur l'ordre alphabétique des choses sur sur comment est-ce qu'on sur sur tout un tas de critères et bien quand tu codes pendant de heur des fois tu fais des erreurs et

1:55en fait avoir une sorte de copilote derrière qui nous réoriente à l'autosave lorsque l'on sa le le sauvegarde son fichier c'est vraiment un un gain de temps essentiel et surtout ça vous permet de pouvoir et bien avoir un code qui est propre et un code qui est propre c'est moins de bug c'est plus de rapidité c'est plus de productivité et c'est surtout euh une expérience pour les développeur qui est et pour les consteurs de produits qui est absolument et bien amélioré de manière significative alors pourquoi je voulais faire une une vidéo de lint euh c'est parce que j'avais plusieurs choses à dire sur eslint sur la manière

2:29d'utiliser notamment que il vous va vous permettre de pouvoir maintenant supprimer préer vous avez plus besoin de préer tout ce que vous avez à faire c'est définir vos règles dans un fichier qui s'appelle es eslint.config.js alors ça c'est c'est la nouvelle version de de eslint qui est sortie il y a quelques mois qui permet de faire du du flat d'avoir un objet flat ce qui est intéressant au niveau de la config c'est parce que ça permet de pouvoir avoir du coup du javascript dans la dans tout ce qui est dans la configuration et de pouvoir aussi faire des composaes et ce qui est voyez donc on peut définir des des sortes de règles

3:02et installer des plugins par exemple pour automatiquement trier les les clés dans une d structuration d'objet ou comme je vous ai montré tout à l'heure dans un dans une interface tyesript pour tout trier de manière alphabétique donc tout ce que vous avez à faire c'est si vous êtes sur les anciennes versions de tabript vous pouvez faire sur un Y en yamel vous pouvez également le faire dans un fichier point Jon mais maintenant dans les nouvelles versions ça se fait en avec tout simplement dans un fichier esl.config.js et ce qu'il faut savoir avec ESL c'est que ça fonctionne extrêmement bien avec tyabesript alors euh j'adore un truc absolument génial

3:40c'est que quand on est dans un turboipo en fait quand on a tout dans un turboripo c'est de l'or en barre parce qu'on a juste un fichier esling.config.js à la racine du projet et c'est tout tout le reste en fait on a on va modifier uniquement ici et automatiquement nos API notre application NX ou ce qu'on veut en fait elle va hériter ce package là parce que en fait la configuration de ce fichier elle va remonter et va voir que le premier es Ling config GS il est là et du coup elle va prendre ses configurations et ça c'est trop bien parce que ça veut dire que pour un

4:09projet entier on a que un seul es lint et pas et qu'on doit mettre à jour qu'un seul parce que ce qui arrive très souvent et ce qui était manqué avant c'est quand tu en as 10 ou 15 des repositories sur GitHub à chaque fois que tu fais une modification automatiquement il va falloir modifier les 15 repository et franchement ça c'est très laborieux c'est très chiant euh surtout quand tu viens modifier les 15 et tu viens de te rendre compte que tu as oublié une règle al faut remodifier encore les 15 euh ça je trouve que ça aussi abîme le l'History de de Git donc ça c'est aussi l'avantage

4:36franchement es l il se marie extrêmement bien avec turboripo tout les stratégies monoripo et donc je vous encourage à switcher sur ce genre de configuration même si certains sont pourêre rétissant moi sur ça c'est un gros gain de temps et surtout ce qui est absolument génial et ça je vais vous montrer par exemple si je fais NPM pnpm run ici à la racine de mon projet automatiquement en fait il va me ça c'est turboripo ça vient pas avec il va me faire le linting sur tous les package que j'ai ainsi que sur tous les les les API les applications N et CEET là on peut voir par exemple j'en ai j'en

5:17ai deux qui ont fait et un qui qui a 25 qui ont réussi donc si je regarde un peu et je remonte l'History je vais me rendre compte que par exemple ici dans ce fichier là alors c'est celui-ci hop je peux voir que vous voyez l'import en fait il est pas bien orienté donc si je fais comment si je sauvegarde h il m'a tout bien réorienté et et ça vous permet comme ça de pouvoir contrôler en une seule commande notamment dans des dans un C bah toutes les que vous assurez que tout est bien au niveau du formatting du code alors ça pe paratre du détail mais je vous

5:51garantis que c'est pas du détail c'est vraiment quelque chose qui est qui est clé sur le long terme par exemple là vous voyez que ce fichier visiblement il y a des erreurs ici alors là c'est parce qu'en fait il veut un number point par sint donc ça c'est d'autres règles donc turboripo il se marie extrêmement bien pour ces deux raisons là notamment parce qu'il va vous permettre en une seule commande de faire un linting sur tous vos projets sur tout votre projet en entier et surtout il va vous permettre de pouvoir faire un un il va vous permettre d'exécuter toutes les commandes NPM runint de tous les packag

6:18spison de votre turboipo et il va vous permettre également de pouvoir avoir une seule et unique config qu'on met à jour de manière à aller plus vite alors comment est-ce qu'on installe le S lint certains qui se demande ça va être très vite tout ce que vous avez à faire c'est de créer un fich de installer es lint et de définir un fichier es lint. config.js maintenant euh et pour les packetes vous pouvez voir que c'est la même chose he souvent ils sont préfixés par esl- plugin et tout ce qu'on a à faire c'est de les installer comme ça ce qu'il faut comprendre c'est que il y a des gens qui

6:52ont plus ou moins soit on fait soi-même ses règles en fonction de notre manière de coder en fonction des règles qu'on veut soit on peut on peut utiliser des gens qui ont déjà fait un sorte de de box de package avec toutes des règles et tous les tous les configurations de slin pour nous notamment un qui est super qui s'appelle eslin- config de hand fou et voilà et ça en fait ça vient avec tout un tas de fonctionnalités et de on va dire de préférences qu'il a qu'il a qu' peut avoir sur le code c'est ce que j'utilise ce qui me permet de de pas du

7:23tout m'embêter avec les règles et c'est très extensible donc vous pouvez regarder hein comment l'installer c'est très facile vous installez ça package.jison et ensuite dans votre esling.config.js vous avez juste à créer un handfou et à définir vos différentes règles donc moi vous pouvez voir que bah ces règles là en fait je il y en a qui viennent des des plugins que j'ai installé et surtout que il y en a d'autres qui l'utilisent que je trouve pas forcément très intéressante pour moi donc et donc je les ai enlevé donc c'est très extensible mais ça vous permet vraiment de partir d'une base qui est très très travaillée et surtout qui est

7:53mis à jour euh assez assez régulièrement euh ça c'est vraiment un assez cool donc c'est extensible c'est c'est personnalisable et on peut ajouter absolument toutes les règles qu'on veut et surtout un autre point important c'est que ça fonctionne extrêmement bien avec les framework comme VGS react angular et vous avez d'ailleurs même des vu es lint qui existent pour ceux qui veulent vous pouvez voir en fait alors ça en fou il utilise déjà dans sa package pour ce dans son package pour ceux qui l'utilise mais vous pouvez voir que par exemple dans VJs c'est la même chose sur react il y a tout un tas de de

8:20règles qui sont mis en avant par exemple le fait de pouvoir créer des composants de cette manière là donc et non pas en Pascal euh donc tout ça c'est il y a des des ou une tonne de règles tout ça ça vous permet encore d'une fois d'avoir un code qui est extrêmement clean l'autre point important qu'il faut se rendre compte c'est qu'avoir des milliers de règles c'est pas forcément très très facile à maintenir parce que quand vous allez en rachouter une et que vous allez faire UNP runing sur tout votre projet vous allez vous rendre compte que ça pète de partout euh donc des fois c'est facile à à fixer des fois

8:53c'est un peu plus long donc je vous conseille en fait de quand vous créez un projet de soit démarrer de la config d' fou soit de rajouter vos règles au fur et à mesure mais gardez toujours en tête que plus il y a de règles plus c'est compliqué à maintenir donc elles doivent être extrêmement pertinante et surtout un autre point important c'est que vous devez privilégier un maximum les choses qui se font à l'Autos saave ça c'est quelque chose que je ne faisais pas mais en fait toutes ces secondes de perdu euh il y a plein de règles qui fonctionnent à l'autosave donc quand on sauvegarde ça

9:18met à jour automatiquement le fichier bah ça c'est un très très gros plaisir au quotidien c'est aussi pas très compliqué hein de faire ses propres règles eslin si jamais vous voulez créer votre propre plugin franchement c'est assez bien fait va il nous guide beaucoup dans la compréhension et l'analyse syntaxique donc et la compréhension du contenu d' fichier de code quand on va ce plugin ça va vraiment pas être quelque chose de compliqué pour ça je vous recommande de regarder la documentation deint et nous en ce qui nous concerne on a jamais vraiment utilisé on jamais codé les not nousmême on on utilise C f et on utilise

9:49ces de packag là et par exemple juste pour finir pour vous montrer à quel point c'est vraiment chouette il y a des règles qui viennent si j'ouvre un fichier au hasard qui a beaucoup d'impimport par exemple dans companies controller vous pouvez vous voir que là j'ai une tonne d'import et en fait ça devient vite le bordel donc les gens ils peuvent automatiquement mettre un peu là où où ils veulent donc vous allez avoir des modèles qui vont être mélangés et tout ça et c'est pour ça et je vais terminer sur ça c'est pour ça que j'adore c'est que ça vous fait vraiment gagner du temps un temps assez fou parce

10:18que le fait d'avoir un un plugin qui lorsque tout est mélangé et qu'on sauvegarde h tout se met au bon tout se réoriente de manière intelligente et ben ça ça vous fait gagner quelques secondes chaque euh même quelques minutes par par jour et sur et ça vous enlève de l'énergie mentale donc on sait où est-ce que sont les choses h si je veux attaquer mes validators boum je sais qu'ils sont là si je veux voir mes modèles Bou je sais qu'ils sont là mes providers en haut boum là les tous les types les types que j'importe de typ script ils sont définis en bas et si j'

10:52en a un parce qu'un développeur il a eu la flemme et qu'il a foutu ici hop quand il va saugarder le fichier ça va automatiquement le mettre ici la dernière point c'est que dans vous avez un fichier point vs code aussi vous pouvez soit le faire dans votre propre configuration mais je vous reconseille d'avoir un dossier point vs code à la racine de votre turboipo vous pouvez automatiquement mettre euh ici des euh editor. format unsave alors à false c'est pour désactiver mais vous pouvez automatiquement euh définir euh que es lint il va automatiquement euh lorsque l'on sauvegarde ici code Action unsave il va automatiquement vous le

11:27vousactiver euh cette fonctionnalité cette fonctionalité là et de réer de fixer les erreurs W lint lorsque l'on sauvegarde si vous voulez avoir plus de détails sur ça je vous conseille d'aller en bas du fichier de es lint du package de handfu et vous verrez que il a différentes fonctionnalités qu'ilutilise qui vous vous permettre de pouvoir encore une fois gagner du temps donc voilà hésitez pas à me dire les plugins que vous utilisez pour l que vous trouvez intéressant et qui vous aident j'éta une vidéo assez courte mais voilà j'ai travaillé pas mal là-dessus sur cette semaine et vraiment un grand plaisir de et bien de l'utiliser au

11:59quotidien et de le partager avec vous donc voilà hhésitez pas à vous abonner si ça vous intéresse d'avoir ce genre de tips dans le futur je vous souhaite une agréable semaine et à bientôt