One place for hosting & domains

      Comment formater du code avec Prettier dans Visual Studio Code


      Introduction

      Le formatage cohérent du code est un défi, mais les outils de développement modernes permettent de maintenir automatiquement la cohérence dans la base de code de votre équipe.

      Dans cet article, vous allez mettre en place Prettier pour formater automatiquement votre code dans Visual Studio Code, également connu sous le nom de VS Code.

      À des fins de démonstration, voici l’exemple de code que vous allez formater :

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      Si vous êtes familiarisé avec le formatage de code, vous remarquerez peut-être quelques erreurs :

      • Un mélange de guillemets simples et doubles.
      • La première propriété de l’objet person doit être sur sa propre ligne.
      • L’énoncé de la console à l’intérieur de la fonction doit être en retrait.
      • Vous pouvez aimer ou non la parenthèse optionnelle qui entoure le paramètre de la fonction flèche.

      Conditions préalables

      Pour suivre ce tutoriel, vous devez télécharger et installer Visual Studio Code.

      Pour travailler avec Prettier dans Visual Studio Code, vous devez installer l’extension. Pour ce faire, recherchez Prettier - Code Formatter dans le panneau d’extension de VS Code. Si vous l’installez pour la première fois, vous verrez un bouton install au lieu du bouton uninstall indiqué ici :

      Extension Prettier readme

      Étape 1 – Utilisation de la commande Format Document

      L’extension Prettier étant installée, vous pouvez maintenant l’utiliser pour formater votre code. Pour commencer, explorons la commande Format Document. Cette commande rendra votre code plus cohérent avec un espacement formaté, un retour à la ligne et des guillemets.

      Pour ouvrir la palette de commandes, vous pouvez utiliser COMMANDE + SHIFT + P sur macOS ou CTRL + SHIFT + P sur Windows.

      Dans la palette de commandes, recherchez “et choisissez ensuite Format Document.

      Palette de commande ouverte avec les résultats pour le format

      Vous pouvez ensuite être invité à choisir le format à utiliser. Pour ce faire, cliquez sur le bouton Configure :

      Demande de sélection d'un formateur par défaut

      Choisissez ensuite Prettier – Code Formatter.

      Choisir Prettier

      Remarque : Si vous ne voyez pas d’invite pour sélectionner un format par défaut, vous pouvez le modifier manuellement dans vos Settings. Mettre Editor: Default Formatter à ebsenp.prettier-vscode.

      Votre code est maintenant formaté avec un espacement, un retour à la ligne et des guillemets cohérents :

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      Cela fonctionne également sur les fichiers CSS. Vous pouvez transformer quelque chose avec une indentation incohérente, des accolades, de nouvelles lignes et des points-virgules en un code bien formaté.  Par exemple :

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      Sera reformaté comme :

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      Maintenant que nous avons exploré cette commande, voyons comment elle peut être mise en œuvre pour s’exécuter automatiquement.

      Étape 2 – Formater le code sur Save

      Jusqu’à présent, vous avez dû exécuter manuellement une commande pour formater votre code. Pour automatiser ce processus, vous pouvez choisir un paramètre dans VS Code pour que vos fichiers soient automatiquement formatés lors de l’enregistrement. Cela garantit également que le code ne soit pas vérifié par un contrôle de version non formaté.

      Pour modifier ce paramètre, appuyez sur COMMAND + , sur macOS (ou CTRL + , sur Windows) pour ouvrir le menu Settings. Une fois le menu ouvert, recherchez Editor: Format On Save et assurez-vous que cette option soit cochée :

      Editor: Format On Save coché

      Une fois ce réglage effectué, vous pouvez écrire votre code comme d’habitude et il sera automatiquement formaté lorsque vous enregistrerez le fichier.

      Étape 3 – Changer les paramètres de configuration de Prettier

      Prettier fait beaucoup de choses pour vous par défaut, mais vous pouvez également personnaliser les paramètres.

      Ouvrez le menu Settings. Ensuite, recherchez Prettier. Vous obtiendrez ainsi tous les paramètres que vous pouvez modifier :

      Paramètres de configuration pour Prettier

      Voici quelques uns des réglages les plus courants :

      • Single Quote – Choisissez entre des citations simples et doubles.
      • Semi – Choisissez d’inclure ou non des points-virgules à la fin des lignes.
      • Tab Width l’onglet – Indiquez le nombre d’espaces que vous souhaitez insérer dans un onglet.

      L’inconvénient de l’utilisation du menu de paramètres intégré dans le code VS est qu’il n’assure pas la cohérence entre les développeurs de votre équipe.

      Étape 4 – Créer un fichier de configuration Prettier

      Si vous modifiez les paramètres de votre code VS, quelqu’un d’autre pourrait avoir une configuration entièrement différente sur sa machine. Vous pouvez établir un formatage cohérent au sein de votre équipe en créant un fichier de configuration pour votre projet.

      Créez un nouveau fichier appelé .prettierrc.extension avec l’une des extensions suivantes :

      Voici un exemple de fichier de configuration simple utilisant JSON :

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      Pour plus de détails sur les fichiers de configuration, consultez les Prettier Docs. Après avoir créé l’un d’entre eux et l’avoir intégré à votre projet, vous pouvez vous assurer que chaque membre de l’équipe suit les mêmes règles de formatage.

      Conclusion

      Avoir un code cohérent est une bonne pratique. C’est particulièrement bénéfique lorsque l’on travaille sur un projet avec des collaborateurs multiples. Se mettre d’accord sur un ensemble de configurations aide à la lisibilité et à la compréhension du code. Il est possible de consacrer plus de temps à la résolution de problèmes techniques difficiles au lieu de se battre sur des problèmes résolus comme l’indentation du code.

      Prettier assure la cohérence du formatage de votre code et automatise le processus.



      Source link

      Comment mettre en œuvre le défilement fluide dans React


      Introduction

      On parle de défilement fluide lorsque, au lieu de cliquer sur un bouton et d’être instantanément dirigé vers une autre partie de la même page, l’utilisateur y est dirigé par une animation de défilement. C’est l’une de ces subtiles fonctionnalités de l’interface utilisateur sur un site qui fait une différence esthétique.

      Dans cet article, vous allez utiliser le paquet react-scroll sur npm pour mettre en place un défilement fluide.

      Conditions préalables

      Vous aurez besoin des éléments suivants pour compléter ce tutoriel :

      Ce tutoriel a été vérifié avec Node v13.14.0, npm v6.14.5, react v16.13.1, et react-scroll v.1.7.16.

      Vous allez créer une application simple dans ce tutoriel, mais si vous souhaitez avoir un aperçu rapide du fonctionnement de react-scroll, n’hésitez pas à vous référer à ces étapes condensées :

      Installez react-scroll:

      npm i -S react-scroll
      

      Importez le paquet react-scroll :

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Ajoutez le composant de lien. Le composant <Link /> pointera vers une certaine zone de votre application :

      <Link to="section1">
      

      Plongeons plus profondément et construisons une petite application React avec un défilement fluide.

      Étape 1 – Installer et exécuter une application React

      Pour plus de commodité, ce tutoriel utilisera un projet de démarrage React (en utilisant Create React App 2.0) qui comporte une barre de navigation (ou navbar) dans la partie supérieure, ainsi que cinq sections de contenu différentes.

      Les liens dans la barre de navigation ne sont pour l’instant que des balises d’ancrage, mais vous les mettrez bientôt à jour pour permettre un défilement fluide.

      Vous pouvez trouver le projet sous React with smooth scrolling. Veuillez noter que ce lien est pour la branche start. La branche master comprend toutes les modifications terminées.

      Capture d'écran de GitHub Repo

      Pour cloner le projet, vous pouvez utiliser la commande suivante :

      git clone https://github.com/do-community/React-With-Smooth-Scrolling.git
      

      Si vous vous intéressez au répertoire src/components vous trouverez un répertoire Navbar.js qui contient le fichier <Navbar> avec les nav-items correspondant à cinq <Section>s différentes.

      src/Components/Navbar.js

      import React, { Component } from "react";
      import logo from "../logo.svg";
      
      export default class Navbar extends Component {
        render() {
          return (
            <nav className="nav" id="navbar">
              <div className="nav-content">
                <img
                  src={logo}
                  className="nav-logo"
                  alt="Logo."
                  onClick={this.scrollToTop}
                />
                <ul className="nav-items">
                  <li className="nav-item">Section 1</li>
                  <li className="nav-item">Section 2</li>
                  <li className="nav-item">Section 3</li>
                  <li className="nav-item">Section 4</li>
                  <li className="nav-item">Section 5</li>
                </ul>
              </div>
            </nav>
          );
        }
      }
      

      Ensuite, si vous ouvrez les App.js dans le répertoire src, vous verrez où se trouve le <Navbar> avec les cinq <Section>s”

      src/Components/App.js

      import React, { Component } from "react";
      import logo from "./logo.svg";
      import "./App.css";
      import Navbar from "./Components/Navbar";
      import Section from "./Components/Section";
      import dummyText from "./DummyText";
      class App extends Component {
        render() {
          return (
            <div className="App">
              <Navbar />
              <Section
                title="Section 1"
                subtitle={dummyText}
                dark={true}
                id="section1"
              />
              <Section
                title="Section 2"
                subtitle={dummyText}
                dark={false}
                id="section2"
              />
              <Section
                title="Section 3"
                subtitle={dummyText}
                dark={true}
                id="section3"
              />
              <Section
                title="Section 4"
                subtitle={dummyText}
                dark={false}
                id="section4"
              />
              <Section
                title="Section 5"
                subtitle={dummyText}
                dark={true}
                id="section5"
              />
            </div>
          );
        }
      }
      
      export default App;
      

      Chaque <Section> prend en compte un titre et sous-titre.

      Comme ce projet utilise du texte factice dans les différentes sections, pour réduire la répétition du code, ce texte a été ajouté à un fichier DummyText.js importé et transmis dans chaque composant <Section>.

      Pour exécuter l’application, vous pouvez utiliser les commandes suivantes.

      • cd React-With-Smooth-Scrolling
      • npm install
      • npm start

      Cela lancera l’application en mode développement et la rafraîchira automatiquement lorsque vous enregistrerez vos fichiers. Vous pouvez le consulter dans le navigateur à l’adresse suivante localhost:3000.

      Capture d'écran de l'application dans le navigateur

      Il est maintenant temps d’installer react-scroll et ajouter cette fonctionnalité. Vous pouvez trouver des informations pour le paquet sur npm.

      react-scroll package on npm

      Pour installer le paquet, exécutez la commande suivante :

      Ensuite, ouvrez le fichier Navbar.js et ajoutez une importation pour deux importations nommées, Link et animateScroll.

      src/Components/Navbar.js

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Vous remarquerez que j’ai créé un alias animatedScroll à faire défiler pour faciliter l’utilisation.

      Une fois toutes vos importations définies, vous pouvez maintenant mettre à jour vos articles de navigation pour utiliser le composant <Link>. Ce composant prend plusieurs propriétés. Vous pouvez tout lire sur elles sur la page de documentation.

      Pour l’instant, il convient d’accorder une attention particulière à activeClass, to, spy, smooth, offset et duration.

      • activeClass – La classe appliquée lorsque l’élément est atteint.
      • a – La cible jusqu’où défiler.
      • spy – Pour que Link soit sélectionné lorsque scroll est à la position de sa cible.
      • smooth – Pour animer le défilement.
      • offset – Pour faire défiler des px supplémentaires (comme du padding).
      • duration – L’heure de l’animation de défilement Il peut s’agir d’un numéro ou d’une fonction.

      La propriété to est la partie la plus importante car elle indique à la composante quel élément faire défiler. Dans ce cas, il s’agira de chacune de vos <Section>s.

      Avec la propriété offset, vous pouvez définir une quantité supplémentaire de défilement à effectuer pour atteindre chaque <Section>.

      Voici un exemple des propriétés que vous utiliserez pour chaque composant <Link>. La seule différence entre elles sera la propriété to, car elles pointent chacune vers une <Section> :

      <Link
          activeClass="active"
          to="section1"
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
      >
      

      Vous devrez mettre à jour chacun des nav-items en conséquence. Avec ces ajouts, vous devriez pouvoir retourner à votre navigateur (votre application devrait déjà avoir redémarré automatiquement) et voir un défilement fluide en action.

      Étape 3 – Styler des liens actifs

      La propriété activeClass vous permet de définir une classe à appliquer au composant <Link> lorsque son to est actif. Un <Link> est considéré comme actif si son élément to est visible près du haut de la page. Cela peut être déclenché en cliquant sur le <Link> lui-même ou en faisant défiler l’écran jusqu’à la <Section> manuellement.

      Pour le prouver, j’ai ouvert le Chrome DevTools et j’ai inspecté le cinquième <Link> comme indiqué ci-dessous. Quand j’ai cliqué sur ce <Link> ou fait défiler manuellement au bas de la page, j’ai remarqué que la classe active est, en fait, appliquée.

      Vue du navigateur de l'app React

      Pour en profiter, vous pouvez créer une classe active et ajouter un soulignement au lien. Vous pouvez ajouter ce morceau de CSS dans le fichier App.css dans le répertoire src :

      src/App.css

      .nav-item > .active {
          border-bottom: 1px solid #333;
      }
      

      Maintenant, si vous retournez à votre navigateur et faites défiler un peu, vous devriez voir que le <Link> approprié est souligné.

      Mise à jour de la vue du navigateur de l'application React

      Étape 4 – Ajouter des fonctions supplémentaires

      Pour une dernière partie du contenu, ce paquet fournit également quelques fonctions qui peuvent être appelées directement comme scrollToTop, scrollToBottometc. ainsi que divers événements que vous pouvez gérer.

      En référence à ces fonctions, le logo de l’application dans une barre de navigation amène généralement l’utilisateur à la page d’accueil ou au haut de la page en cours.

      Pour illustrer simplement la façon d’appeler une de ces fonctions fournies, j’ai ajouté un gestionnaire de clics à la nav-logo, afin de faire défiler l’utilisateur vers le haut de la page, comme ça :

      src/Components/Navbar.js

      scrollToTop = () => {
          scroll.scrollToTop();
      };
      

      De retour dans le navigateur, vous devriez pouvoir faire défiler la page vers le bas, cliquer sur le logo dans la barre de navigation et être ramené au haut de la page.

      Conclusion

      Le défilement fluide est l’une des caractéristiques qui peut ajouter beaucoup de valeur esthétique à votre application. Le paquetreact-scroll vous permet de tirer parti de cette fonctionnalité sans frais généraux importants.

      Dans ce tutoriel, vous avez ajouté un défilement fluide à une application et expérimenté différents paramètres. Si vous êtes curieux, passez un peu de temps à explorer les autres fonctions et événements que ce paquet vous propose.



      Source link

      Comment utiliser .map() pour Iterate via Array Items dans JavaScript


      Introduction

      De la forloop classique à la méthode forEach(), diverses techniques et méthodes sont utilisées pour itérer à travers des ensembles de données en JavaScript. L’une des méthodes les plus populaires est la méthode .map(). .map() crée un tableau à partir de l’appel d’une fonction spécifique sur chaque élément du tableau parent. .map() est une méthode non mutante qui crée un nouveau tableau par opposition aux méthodes mutantes, qui ne font que modifier le tableau appelant.

      Cette méthode peut avoir de nombreux usages lorsqu’on travaille avec des tableaux. Dans ce tutoriel, nous examinerons quatre utilisations importantes de .map() en JavaScript : appel d’une fonction d’éléments de tableau, conversion de chaînes de caractères en tableaux, rendu de listes dans des bibliothèques JavaScript et reformatage d’objets de tableau.

      Conditions préalables

      Ce tutoriel ne nécessite aucun codage, mais si vous souhaitez suivre les exemples, vous pouvez soit utiliser le Node.js REPL, soit recourir à des outils de développement de navigateur.

      Étape 1 – Appeler une fonction sur chaque élément d’un tableauélément

      .map() accepte une fonction de rappel comme l’un de ses arguments, et un paramètre important de cette fonction est la valeur actuelle de l’élément traité par la fonction.  Il s’agit d’un paramètre obligatoire. Avec ce paramètre, vous pouvez modifier chaque élément d’un tableau et créer une nouvelle fonction.

      Voici un exemple :

      const sweetArray = [2, 3, 4, 5, 35]
      const sweeterArray = sweetArray.map(sweetItem => {
          return sweetItem * 2
      })
      
      console.log(sweeterArray)
      

      Cette sortie est enregistrée sur la console :

      Output

      [ 4, 6, 8, 10, 70 ]

      Il est possible de la simplifier encore un peu pour la rendre plus claire :

      // create a function to use
      const makeSweeter = sweetItem => sweetItem * 2;
      
      // we have an array
      const sweetArray = [2, 3, 4, 5, 35];
      
      // call the function we made. more readable
      const sweeterArray = sweetArray.map(makeSweeter);
      
      console.log(sweeterArray);
      

      La même sortie est enregistrée sur la console :

      Output

      [ 4, 6, 8, 10, 70 ]

      Avoir un code comme sweetArray.map(makeSweeter) rend votre code un peu plus lisible.

      Étape 2 – Convertir une chaîne de caractères en un tableau

      .map() est connu pour faire partie du prototype de tableau. Dans cette étape, vous l’utiliserez pour convertir une chaîne de caractères en un tableau.  Vous ne développez pas ici la méthode afin qu’elle fonctionne pour des chaînes de caractères. Au contraire, vous utiliserez la méthode spéciale .call()

      Tout ce qui est en JavaScript est un objet, et les méthodes sont des fonctions attachées à ces objets. .call() vous permet d’utiliser le contexte d’un objet sur un autre. Par conséquent, vous copieriez le contexte de .map() dans un tableau sur une chaîne.de caractères.

      .call() peut être des arguments transmis du contexte à utiliser et des paramètres pour les arguments de la fonction d’origine.

      Voici un exemple :

      const name = "Sammy"
      const map = Array.prototype.map
      
      const newName = map.call(name, eachLetter => {
          return `${eachLetter}a`
      })
      
      console.log(newName)
      

      Cette sortie est enregistrée sur la console :

      Output

      • [ "Sa", "aa", "ma", "ma", "ya" ]

      Ici, vous avez utilisé le contexte de .map() sur une chaîne de caractères et passé un argument de la fonction que .map() attend.

      Elle fonctionne comme la méthode .split() d’une chaîne, à la différence près que chaque caractère de la chaîne peut être modifié avant d’être renvoyé dans un tableau.

      Étape 3 – Rendu des listes dans la bibliothèque JavaScript

      Les bibliothèques JavaScript comme React utilisent .map() pour rendre les éléments en une liste. Cela nécessite toutefois une syntaxe JSX, car la méthode .map() est enveloppée dans la syntaxe JSX.

      Voici un exemple d’une composante React :

      import React from "react";
      import ReactDOM from "react-dom";
      
      const names = ["whale", "squid", "turtle", "coral", "starfish"];
      
      const NamesList = () => (
        <div>
          <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
      );
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<NamesList />, rootElement);
      

      Il s’agit d’un élément apatride dans React qui rend une div avec une liste.  Les différents éléments de la liste sont rendus à l’aide de .map() pour itérer sur le tableau de noms initialement créé. Ce composant est rendu à l’aide de ReactDOM sur l’élément DOM avec Id of root.

      Étape 4 – Reformater les objets de tableau

      .map() peut être utilisé pour itérer à travers des objets dans un tableau et, de manière similaire aux tableaux traditionnels, modifier le contenu de chaque objet individuel et renvoyer un nouveau tableau.  Cette modification est effectuée en fonction de ce qui est renvoyé dans la fonction de rappel.

      Voici un exemple :

      const myUsers = [
          { name: 'shark', likes: 'ocean' },
          { name: 'turtle', likes: 'pond' },
          { name: 'otter', likes: 'fish biscuits' }
      ]
      
      const usersByLikes = myUsers.map(item => {
          const container = {};
      
          container[item.name] = item.likes;
          container.age = item.name.length * 10;
      
          return container;
      })
      
      console.log(usersByLikes);
      

      Cette sortie est enregistrée sur la console :

      Output

      [ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

      Ici, vous avez modifié chaque objet du tableau en utilisant la notation par parenthèses et points. Ce cas d’utilisation peut être utilisé pour traiter ou condenser les données reçues avant qu’elles ne soient sauvegardées ou analysées sur une application frontale.

      Conclusion

      Dans ce tutoriel, nous avons examiné quatre utilisations de la méthode .map() en JavaScript. En combinaison avec d’autres méthodes, la fonctionnalité de .map() peut être étendue. Pour plus d’informations, consultez notre article Comment utiliser les méthodes de tableau en JavaScript : Méthodes d’itération.



      Source link