‫-: Donc, cette section et le projet de formulaire de
‫nœud sont maintenant pratiquement terminés,
‫mais dans cette vidéo, je voulais
‫très rapidement passer en revue la configuration
‫de mon code VS et également configurer avec vous l'extension Prettier.
‫Et ce sont donc les extensions que j'ai installées dans mon
‫code VS et toutes ne seront pas pertinentes pour
‫ce cours, mais
‫chaque fois qu'il y aura une extension
‫pertinente, je la mentionnerai au moment où elle sera utile.
‫Par exemple ceci. env ici sera utile pour mettre
‫en évidence les variables environnementales dans un fichier . n fichier.
‫Examinons donc rapidement certains d'entre eux.
‫Par exemple ESLint est utile pour trouver des bogues dans notre code et
‫en fait nous allons configurer ESLint avec node un peu
‫plus tard dans une autre section.
‫Nous avons un aperçu de l'image qui est
‫une très belle petite extension pour prévisualiser les images.
‫Et peut-être avez-vous remarqué que lorsque nous faisions cela, par exemple, l'échantillon
‫ici, vous
‫voyez qu'ici sur le côté gauche, il affiche
‫toutes les images que nous incluons dans un site Web.
‫Donc dans cet exemple c'est celui-ci.
‫Très bien, juste quelque chose de petit que j'ai trouvé très utile.
‫Qu'avons-nous d'autre ici ?
‫Nous avons Prettier et c'est donc celui
‫que je veux configurer avec vous dans cette vidéo,
‫mais pour l'instant, passons en revue un
‫autre ici.
‫Donc Pug est un langage que nous allons utiliser plus
‫tard pour créer
‫des modèles et il est donc utile d'avoir
‫cette extension embellir pour celui-là également.
‫Ensuite, j'ai aussi TabNine, qui fait parfois de
‫jolis compléteurs automatiques magiques.
‫Ensuite, j'ai aussi TODO Highlight,
‫qui est très utile pour
‫faire ce genre de
‫magie ici.
‫Par exemple quand
‫j'ai TODO, ça va le surligner dans cette
‫couleur verte ou si j'écris BUG
‫comme ça ça va devenir
‫rouge ou FIXME et
‫j'ai toutes sortes de ces mots clés ici que
‫je dois trouver les différentes
‫couleurs pour les rendre visibles dans mon code.
‫Et il apparaît même ici dans cette
‫barre de défilement.
‫Si je les avais
‫dans différentes lignes, vous verriez que les
‫trois couleurs sont maintenant ici de
‫ce côté et c'est incroyablement utile.
‫D'accord.
‫Et puis bien sûr
‫mon thème de
‫code VS, qui est Oceanic
‫Next, donc je reçois cette question tout
‫le temps et donc au lieu de
‫bien la poser, voici la réponse à cela.
‫D'accord.
‫Mais
‫maintenant, où est-il ?
‫Donc plus jolie, c'est
‫une très belle extension qui peut
‫formater automatiquement le code, que
‫ce soit JavaScript
‫ou CSS ou
‫même HTML.
‫Avec cette extension, nous n'avons plus à
‫nous soucier du formatage.
‫Et il est en fait
‫très opiniâtre, il suit donc un ensemble
‫de règles très strictes avec seulement une petite configuration possible.
‫Mais dans ce cas de formatage de code,
‫il est en fait très agréable que quelqu'un d'autre
‫prenne ces décisions à votre place.
‫C'est donc une chose de moins dont nous devons nous soucier.
‫D'accord, notre code se formatera automatiquement sans
‫que nous ayons à faire quoi que ce
‫soit ou à nous soucier d'un certain style.
‫D'accord?
‫Donc, si
‫vous voulez l'essayer, allez-y et installez-le maintenant ici.
‫Vous avez probablement un bouton d'installation.
‫Je l'ai, bien sûr, déjà installé.
‫Ensuite, ce que vous devez faire pour obtenir toute la
‫puissance de cette
‫extension est d'aller dans vos paramètres,
‫puis d'activer Formater lors de l'enregistrement.
‫Donc, recherchez
‫simplement le format, puis Formatez lors de l'enregistrement.
‫Ainsi, chaque fois que nous enregistrons
‫un fichier, il utilisera automatiquement Prettier pour formater notre code.
‫Nous avons donc installé Prettier.
‫Nous avons activé le formatage lors de l'enregistrement.
‫Et maintenant, nous pouvons configurer un peu Prettier.
‫Encore une
‫fois, comme je l'ai mentionné, c'est très opiniâtre.
‫Donc il n'y a pas beaucoup de choses que
‫nous pouvons changer mais certaines choses que nous pouvons réellement changer.
‫Maintenant, nous pourrions le faire
‫ici, directement dans le
‫code VS,
‫mais à la place, nous pouvons également définir un fichier de configuration.
‫D'accord?
‫Et je trouve que c'est en fait mieux à faire.
‫Ainsi, au lieu d'utiliser du code VS pour définir
‫les paramètres, nous pouvons utiliser une
‫configuration
‫Prettier, appelée Prettier RC.
‫Très bien, il a donc un point puis
‫un rc plus joli.
‫Ensuite, nous ouvrons les accolades,
‫puis nous pouvons définir ici certains paramètres.
‫Et je trouve que c'est mieux de le faire
‫comme ça car alors je peux
‫changer les configurations d'un projet à l'autre.
‫Et plus
‫important encore, cela permet à plusieurs développeurs
‫appartenant à la même équipe d'utiliser plus facilement la même configuration.
‫Bon, ça peut être très très utile dans les équipes.
‫Encore plus utile que lorsque vous travaillez seul.
‫Maintenant, le seul paramètre que je souhaite réellement modifier
‫ici s'appelle guillemet simple.
‫Donc, en fait, Prettier a déjà cette
‫complétion automatique intégrée et il sait donc que simple
‫signifiera guillemet simple.
‫Et la valeur par défaut est false, mais je veux la définir sur true.
‫Et donc ce que ça va faire, c'est que
‫toutes mes guillemets passeront des guillemets doubles aux guillemets simples, d'accord ?
‫J'ai donc fait une sauvegarde et
‫voici notre index. js.
‫Et maintenant, voyons s'il y a des guillemets doubles ici et je pense qu'ils ne
‫le sont pas
‫parce que j'ai utilisé assez régulièrement les guillemets simples de toute façon.
‫Mais mettons juste quelques guillemets quelque part ici et maintenant je vais le
‫sauvegarder et jeter un
‫œil à ce qui se passe.
‫Ouah.
‫Donc, tout d'abord, vous avez vu que beaucoup de choses ont
‫changé ici et que notre code a en quelque
‫sorte sauté ici, mais c'est là que j'avais les guillemets simples ici.
‫Vous voyez donc qu'ils redeviennent des guillemets doubles.
‫Maintenant, tout ce code sautillant était probablement
‫dû au fait qu'à un moment donné, j'avais plusieurs lignes.
‫Et Prettier ne le permet pas.
‫Donc, si j'ai quelque chose comme ça et
‫que je le sauve, Prettier n'autorisera qu'une seule ligne vide.
‫Et en fait, ce fut pour moi le changement le plus
‫difficile de tout le formatage que Prettier fait.
‫Et ce n'est pas configurable,
‫nous ne pouvons donc pas changer cela malheureusement.
‫Parce que parfois j'aime avoir plusieurs lignes, mais avec
‫Prettier ce n'est tout simplement pas possible.
‫Je peux faire quelque chose comme ça et
‫ensuite ça marchera mais c'est juste un travail de contournement.
‫Mais toujours avec ce problème, je préfère vraiment utiliser Prettier.
‫Encore une fois parce que cela enlève la pensée
‫du formatage.
‫Par exemple, quelque chose d'autre que j'ai fait ici était ceci.
‫Ainsi, chaque fois qu'un certain nombre de caractères dans
‫une ligne est
‫dépassé, il trouvera alors un bon moyen de diviser le
‫code en plusieurs lignes.
‫Et c'est ce qu'il a fait ici.
‫Voyons ce que nous avons d'autre ici.
‫Eh bien,
‫je pense que peut-être qu'à part ce changement, nous
‫venons d'apprendre que tout est resté le même.
‫D'accord et à partir de maintenant dans tout le reste des
‫codes
‫de ce cours, j'utiliserai toujours ce fichier de configuration PrettierRC
‫avec auto save sur true.
‫D'accord.
‫Une autre chose
‫que je n'ai pas mentionnée est qu'il met automatiquement les
‫points-virgules, donc si je continue et supprime
‫celui-ci, et celui-ci, et celui-ci.
‫Donnez-lui une sauvegarde.
‫Vous voyez qu'ils sont de retour.
‫D'accord?
‫Maintenant, si vous voulez
‫avoir un aperçu de tout ce que vous pouvez
‫configurer avec Prettier, c'est très simple si nous écrivons Prettier dans Google.
‫Ainsi, ils se positionnent comme des formateurs de code avisés.
‫Et comme je
‫vous l'ai déjà dit, nous avons ici les options que
‫nous pouvons réellement configurer.
‫Donc largeur d'impression.
‫La largeur de l'onglet.
‫Donc, si vous faites partie de ces personnes qui utilisent quatre
‫largeurs, ce que j'étais en fait jusqu'à récemment, il y a
‫un an par exemple.
‫Eh bien, vous pouvez configurer cela en utilisant la largeur de la tabulation,
‫puis vous avez par exemple les guillemets que nous venons de modifier.
‫Donc, une seule citation, nous la mettons à vrai et vous
‫avez toutes sortes de choses.
‫Vous pouvez le voir ici sur le côté droit, d'accord ?
‫Mais encore une fois, ce n'est pas beaucoup de configuration.
‫Donc, la plupart des choses que vous ne pouvez vraiment pas changer.
‫Une autre chose que nous pouvons expérimenter est la largeur de la tabulation.
‫Voyons donc celui-ci, je pense que la valeur par défaut est 80.
‫Mettons-le à quelque chose comme 120.
‫Et je
‫pensais que cela changerait ce morceau de code ici, donc revenir à
‫ce que nous avions auparavant, tout
‫sur une seule ligne.
‫Juste pour vous montrer.
‫Mais peut-être que notre ligne est en fait encore plus longue que cela.
‫Mettons donc quelque chose de vraiment ridicule ici comme 200 et
‫whoa !
‫Qu'est-ce qu'il se passe ici?
‫Ah ho ! Donc, vous voyez que cela est
‫maintenant changé en quelque chose d'encore plus étrange.
‫D'accord, je n'ai jamais fait juste une sorte d'expérience.
‫Remettez-le à 120 et que se
‫passe-t-il ici ?
‫Permettez-moi de régler rapidement cela.
‫Et ça recommence, d'accord.
‫Remettez-le à 80 comme nous
‫l'avions fait et maintenant cela ressemble à ceci.
‫Oh
‫oui!
‫Oh je suis désolé.
‫Ce n'est pas ce que je voulais faire.
‫Bien sûr, je ne voulais pas changer la largeur de
‫l'onglet lorsque ma valeur par défaut est deux.
‫Je voulais changer la largeur d'impression.
‫Donc, en gros, quelle peut être la largeur d'une ligne.
‫Oh c'était vraiment stupide.
‫Alors maintenant, c'est de retour à la normale car la valeur par défaut est deux.
‫Alors oui, maintenant vous pouvez voir qu'il est en
‫fait revenu sur une ligne ici parce qu'à ce stade, nous sommes à la
‫colonne 96.
‫Comme vous le voyez ici, la limite est de 120.
‫Et donc il n'a pas eu à envelopper cette ligne
‫de code dans la seconde.
‫D'accord?
‫Mais en fait, j'aime cette limite de 80
‫et je vais donc la
‫remettre ici et l'utiliser à l'avenir.
‫J'ai donc ajusté la valeur par défaut, alors laissez-moi m'en débarrasser.
‫Donnez-lui une sauvegarde.
‫Et donc nous sommes de retour à la façon dont c'était avant.
‫Donc, si vous pensez
‫que vous aimez ça, allez-y et utilisez-le comme je le fais.
‫Mais sinon, eh bien, ignorez en quelque sorte tout ce que j'ai
‫dit dans cette vidéo et
‫continuez à faire de la manière la plus normale.
‫Donc ce n'est pas un problème non plus.