‫- : Avant de passer
‫à la section suivante et à mongoDB, je veux
‫vous montrer comment configurer eslint avec un code plus joli
‫en vs afin d'améliorer la qualité de notre code.
‫Maintenant, si vous n'utilisez pas vs
‫code, ou si vous avez déjà une sorte
‫de linter dans votre flux de travail, veuillez marquer cette conférence comme
‫terminée et passer directement à la section suivante.
‫Mais si vous êtes nouveau sur
‫es Lint et que vous souhaitez améliorer la
‫qualité de votre code, alors commençons par cette vidéo.
‫Donc, es Lint est essentiellement un programme qui
‫scanne constamment notre code et trouve
‫des erreurs de codage
‫potentielles ou simplement de mauvaises pratiques de codage qu'il pense être erronées.
‫C'est très, très configurable afin que nous puissions
‫vraiment l'adapter à nos besoins et à
‫nos habitudes de codage.
‫Maintenant, nous pouvons également utiliser es Lint pour le formatage du code, mais
‫nous continuerons à utiliser le plus
‫joli que nous avons déjà configuré plus tôt pour cela.
‫Nous allons donc mettre en place
‫tout cela pour que plus joli soit toujours le principal formateur de
‫code mais basé sur certaines règles es Lint
‫que nous définirons.
‫Et donc tout ce que es Lint fera pour nous
‫est de mettre en évidence les erreurs.
‫Mais je sais que
‫tout cela semble probablement plus déroutant qu'autre chose.
‫Et donc mettons cela en place maintenant.
‫Donc, la première chose que je
‫veux que vous fassiez est d'installer l'extension es Lint pour vs Code.
‫Alors venez ici et cherchez es Lint.
‫D'accord?
‫Et je l'ai déjà
‫installé, mais ça ressemble à ça.
‫Et donc tout ce que vous
‫avez à faire est de l'installer, puis de recharger probablement cette fenêtre.
‫Et si vous n'avez pas encore configuré
‫Prettier, allez-y et faites-le également.
‫Donc, avec cette extension ici,
‫mais celle-ci, nous l'avons déjà fait
‫dans la première section si vous l'avez suivie avec moi.
‫Ensuite, nous devons installer un tas de dépendances de
‫développement, alors rendons-le beaucoup plus gros ici et
‫allons à notre autre terminal ici.
‫Et donc disons, npm install et nous devons également installer
‫es Lint dans de plus beaux packages npm.
‫D'accord?
‫Donc es Lint et plus
‫joli, et c'est probablement maintenant la
‫première fois où nous
‫installons réellement plusieurs packages en même temps.
‫Et donc c'est très simple, nous écrivons simplement
‫tous ces packages dans la même commande.
‫D'accord?
‫Mais avec ces deux-là, nous sommes en fait loin d'être prêts.
‫Donc, la prochaine est es Lint config plus jolie
‫et celle-ci désactivera le formatage pour es
‫Lint, car rappelez-vous, nous voulons plus jolie pour formater notre code.
‫Ensuite, nous avons le plugin es Lint plus joli
‫et celui-ci permettra à es
‫Lint d'afficher les erreurs de formatage lorsque nous tapons,
‫encore une fois, en utilisant plus joli.
‫D'accord?
‫Et tout cela est bien sûr très déroutant
‫et j'ai eu besoin de beaucoup de temps pour comprendre cela.
‫Et donc c'est vraiment juste une recette que
‫vous devez suivre ici.
‫D'accord?
‫Il ne s'agit donc pas
‫de comprendre ce que je fais ici,
‫tout ce que vous avez à faire est
‫de suivre cette recette, et cela fonctionnera ensuite pour ce projet,
‫et dans les projets futurs tout ce que
‫vous avez à faire est d'aller dans votre fichier package dot json
‫et copiez cette configuration et installez-la dans votre prochain projet.
‫Parce qu'en fait, tous
‫ces packages doivent être installés localement.
‫Cela ne fonctionnerait pas si nous essayions
‫de le faire à l'échelle mondiale.
‫Bien?
‫Quoi qu'il en soit, nous avons maintenant besoin d'un bon guide de style pour les
‫emplois que nous pouvons suivre.
‫Et il existe de nombreux guides
‫de style, mais le
‫plus populaire est probablement le guide de style airbnb.
‫Et donc en fait, il existe
‫une configuration es Lint que nous pouvons utiliser
‫pour cela, qui est sur npm, et elle s'appelle eslint config airbnb.
‫D'accord, ensuite, nous avons le nœud de plugin eslint, et
‫cela ajoutera quelques règles eslint spécifiques uniquement
‫pour nodejs, d'accord ?
‫Donc, fondamentalement, pour trouver certaines erreurs
‫que nous pourrions faire lors de l'écriture du code nodejs.
‫Et maintenant, enfin, nous avons besoin de trois autres plugins eslint
‫qui ne sont nécessaires que pour que le guide
‫de style airbnb fonctionne réellement.
‫Donc, ce guide de style dépend en quelque sorte de ceux-ci.
‫Donc eslint plugin, import, eslint,
‫plugin,
‫jsx,
‫a11y,
‫et
‫je vois que
‫j'ai une erreur ici.
‫Et enfin eslint,
‫plugin, réagissez.
‫Même si nous n'écrivons pas dans le code de réaction
‫ici, nous avons toujours besoin de celui-ci
‫car le guide de style airbnb en dépend.
‫Voilà donc tous les paquets, j'espère que
‫je les ai écrits correctement.
‫Et maintenant, nous devons les enregistrer en tant que
‫dépendances de développement, alors enregistrez dev et
‫maintenant appuyez sur retour, et croisez les doigts pour que tout fonctionne ici.
‫Donc, il semble que ce soit le cas.
‫Jetons un coup d'œil à notre
‫package dot json et, en effet, nous avons ici tous ces packages.
‫Super.
‫Maintenant, la prochaine étape est que nous avons
‫besoin de fichiers de configuration pour les plus jolis et les es lint, n'est-ce pas ?
‫Et nous avons déjà créé celui pour plus joli
‫avant et c'est déjà dans notre projet ici.
‫Il en va de même pour celui-ci, et
‫tout ce que j'ai fait ici, c'est de dire que je veux toujours la guillemet simple.
‫D'accord?
‫Et l'autre est le fichier de configuration pour es lint, et encore
‫une fois il est déjà dans les fichiers de démarrage
‫parce que nous n'avons pas vraiment besoin de perdre
‫du temps simplement pour écrire ce
‫terrible fichier de configuration, n'est-ce pas ?
‫Le fichier est
‫donc déjà écrit, parcourons-le très rapidement.
‫Donc, ici, nous
‫avons déclaré que nous voulions
‫utiliser le guide de style
‫airbnb, et aussi plus joli, ainsi que le plugin node, d'accord ?
‫Maintenant, esl int concerne les règles de codage et
‫il existe de nombreuses règles que es
‫lint essaie de nous appliquer.
‫Mais nous pouvons réellement changer
‫ceux que nous voulons utiliser, un par un.
‫Et nous pouvons soit les désactiver
‫complètement, soit simplement afficher un avertissement au lieu d'afficher une erreur.
‫Par exemple, une règle est qu'eslint ne veut pas
‫que nous utilisions les journaux de points de console dans notre code,
‫et donc à chaque fois, par défaut, il nous donnera une
‫erreur lorsque nous utiliserons le journal
‫de points de console.
‫Mais au lieu de m'afficher
‫une erreur, je le configure pour qu'il ne m'affiche qu'un
‫avertissement, c'est pourquoi nous avons averti.
‫Je pourrais aussi le
‫désactiver complètement en écrivant, comme je
‫l'ai fait avec beaucoup de ces autres règles.
‫Ainsi, par exemple, ici dans ce suivant
‫qui dit que chaque fonction
‫doit toujours retourner quelque chose, d'accord ?
‫Et parfois, nous avons simplement une fonction qui
‫n'en a pas, et j'ai donc dû désactiver complètement cette règle.
‫Ou enfin, nous avons aussi, par
‫exemple, cette règle ici, qui dit qu'il ne doit
‫jamais y avoir de variable que nous déclarons mais que nous n'utilisons pas.
‫Cela attrape en fait beaucoup de bogues,
‫et je le laisse donc comme erreur ici, mais
‫j'ai également créé quelques exceptions.
‫Donc, ces quatre exceptions ici qui sont les
‫variables typiques que nous
‫avons dans express,
‫donc dans nos gestionnaires dans express, mais que nous n'utilisons pas toujours.
‫Droit?
‫Et donc je ne veux pas que ceux-ci soient marqués comme
‫des erreurs chaque fois que j'ai,
‫par exemple, une variable req dans une fonction, mais je ne l'utilise pas.
‫D'accord?
‫Vous pouvez donc jeter un œil à ces autres règles
‫ici et décider laquelle vous
‫aimez et laquelle vous n'aimez pas.
‫Ce sont donc les règles qui ont du sens pour moi,
‫mais bien sûr, cela pourrait être différent pour vous.
‫Allons rapidement sur le site Web d'eslint pour jeter
‫un œil à toutes les choses
‫que vous pouvez configurer.
‫Donc es lint, alors vous avez ici de la documentation et des instructions sur la façon
‫dont vous pouvez le configurer, mais tout ce que je
‫veux vraiment vous montrer,
‫ce sont toutes ces différentes règles.
‫Donc vous les avez
‫tous ici et vous voyez, il y en a une
‫tonne, une tonne vraiment, que vous pouvez configurer, d'accord ?
‫Alors jetez un œil à ceci, mais
‫en fait, il est plus facile de configurer simplement ce es lint chaque fois que
‫vous obtenez une nouvelle erreur dans votre code.
‫D'accord?
‫Alors laissez-moi vous montrer cela,
‫afin que nous puissions maintenant le voir dans la pratique.
‫Allons donc à notre fichier de serveur ici, et créons
‫simplement du code ici qui
‫va à l'encontre de certaines règles es.
‫Ainsi, par exemple, définir une variable ici, comme celle-ci, puis
‫lui affecter autre chose.
‫Très bien, et nous savons donc que x est une constante et
‫qu'il ne doit donc pas être réaffecté.
‫Donc, si nous donnons ceci maintenant
‫assigné, nous devrions en fait voir une erreur.
‫Et bien nous ne l'avons pas fait, donc je vais aller de
‫l'avant et fermer la fenêtre, puis l'ouvrir à nouveau.
‫Alors faites-le aussi et
‫j'espère que cela fonctionnera d'ici là.
‫D'accord, et en fait, nous voyons nos erreurs ici
‫maintenant marquées en rouge.
‫Nous arrivons donc maintenant à cet onglet Problèmes.
‫Permettez-moi de remonter un peu, et
‫nous voyons donc ici toutes les erreurs que nous avons.
‫Ainsi, en commençant par
‫la première, on s'attendait à une ligne vide
‫après l'instruction requise, non suivie d'une autre condition.
‫Donc, en gros, ce
‫qu'il me dit, c'est qu'il veut que ces
‫exigences soient ici en haut, puis une ligne vide, puis comme ça.
‫Et ainsi, l'erreur disparaît.
‫D'accord?
‫Et donc ce genre d'application d'une norme de codage plus agréable.
‫Ensuite, nous avons x est assigné et une valeur jamais utilisée.
‫Et c'est ainsi qu'il n'y a
‫pas de variables inutilisées que j'ai mentionnées auparavant.
‫Alors, celui-ci ici.
‫D'accord?
‫Et donc c'est une erreur, mais je pourrais aussi la désactiver juste
‫pour vous montrer comment cela changerait ensuite.
‫Je l'ai donc sauvegardé, et maintenant cette erreur a disparu.
‫Donc vous voyez qu'il n'est plus marqué en rouge.
‫Mais en fait, je veux que ce soit
‫une erreur, alors j'écris erreur, je la sauve et notre erreur est de retour.
‫Vous voyez, c'est déclaré mais ce n'est jamais utilisé.
‫Et puis, ici x est constant.
‫Nous avons donc vraiment fait
‫une erreur ici, qui
‫était de réaffecter une constante, et ce n'est pas
‫autorisé, alors débarrassons-nous de cela et l'erreur disparaîtra.
‫Nous avons toujours celui-ci car la valeur n'a
‫jamais été utilisée.
‫Écrivons rapidement x plus deux et maintenant c'est parti.
‫Mais nous avons l'erreur suivante, essentiellement simplement
‫parce que nous avons juste
‫ce code assis ici qui n'est affecté à rien.
‫Donc, disons simplement que const y est égal à celui-ci,
‫mais bien sûr, y est attribué mais jamais utilisé, et nous entrons
‫donc dans cette boucle ici.
‫Mais, de toute façon, c'était juste pour vous le démontrer.
‫Et donc voyons maintenant le dernier avertissement.
‫Et c'est donc la console sans, non?
‫Alors rappelez-vous que j'ai déjà parlé de celui-ci avant et il
‫est vert parce que c'est un avertissement.
‫Encore une fois, je pourrais le désactiver, puis
‫mon problème disparaîtrait, donc le code aurait l'air
‫normal maintenant.
‫Mais en fait, je veux qu'eslint me prévienne de cela, car
‫ce n'est pas une bonne pratique d'avoir
‫trop de journaux de console plus tard dans la production.
‫Très bien, donc c'est de retour maintenant.
‫Et en fait, vs code m'avertit également qu'il y
‫a un avertissement vert ici dans
‫ce fichier.
‫Alors peut-être que vous l'avez déjà
‫remarqué, mais si nous mettons
‫une erreur ici, elle deviendra en fait rouge.
‫D'accord?
‫Alors maintenant, c'est rouge, et nous avons deux problèmes là-dedans.
‫Et c'est en fait très utile pour identifier
‫les problèmes dans tous ces fichiers.
‫Très bien, débarrassons-nous en.
‫Et donc en fait, c'est tout.
‫J'espère donc que cela a également
‫fonctionné pour vous si vous rencontrez une erreur,
‫essayez simplement d'installer les mêmes packages que moi.
‫Donc, tout cela ici, et n'oubliez pas que c'est
‫ainsi que vous le faites.
‫Ainsi, par exemple, si vous
‫voulez eslint cinq, dites simplement npm I eslint à cinq.
‫Par exemple, vous pouvez même utiliser cinq points 16 points 0
‫juste pour vous assurer que tout est identique.
‫Et dans ce cas, tout devrait fonctionner
‫comme ici pour moi.
‫Génial, c'était donc une autre étape
‫importante dans votre parcours pour devenir développeur.
‫Parce que, croyez-moi, il est vraiment
‫important d'avoir le code linting en place comme vous l'avez maintenant.
‫Encore une fois, pour votre
‫prochain projet, copiez ces dépendances dans votre fichier
‫packet dot json, puis installez-les toutes
‫en même temps.
‫Et cela vous facilitera alors grandement la vie.
‫C'est donc comme ça que
‫je procède toujours, et la même chose bien sûr, avec le
‫plus joli rc et ce fichier de configuration eslint.
‫Bref, assez parlé pour cette vidéo.
‫Nous sommes maintenant enfin prêts à passer
‫à la très importante section mongodb.