Outils Javascript en action

C'est impressionnant de voir où Javascript est aujourd'hui et à quel point il a évolué depuis le début de l'année.ES2015, les jours de var et $(.submitBtn) sont loin derrière nous. Alors que javascript continue
évoluant, les outils (formatter, linter, bundler) qui l'entourent ne cessent de s'améliorer, nous allons voir dans cet article comment ESLint (linter), Plus jolie (formateur) et Husky (Git hooks) peuvent améliorer l'expérience du développeur et avoir un impact important sur votre application. Pour les besoins de cet article, nous allons utiliser un hook de React mais gardez à l'esprit que ces outils peuvent être utilisés avec n'importe quelle application Javascript/Node. Nous commencerons par générer une carte React projet en utilisant vite en suivant les étapes suivantes :

npm create vite@latest
Nom du projet : js-tools
Sélectionner un framework : react
Sélectionner une variante : react
cd js-tools
npm install

ESLint pour la qualité du code

ESLint est un outil qui vous aide à trouver et à résoudre les problèmes de votre JavaScript code. Pour l'ajouter à notre
app, nous suivrons les étapes suivantes :

cd js-tools
npm init @eslint/config
# nous devrons répondre à ces questions pour initialiser la configuration
Comment souhaitez-vous utiliser ESLint ? Pour vérifier la syntaxe et trouver des problèmes
Quel type de modules votre projet utilise-t-il ? JavaScript modules (import/export)
Quel cadre de travail votre projet utilise-t-il ? React
Votre projet utilise-t-il TypeScript ? Non
Où s'exécute votre code ? Navigateur
Dans quel format voulez-vous que votre fichier de configuration soit ? Javascript
Voulez-vous les installer maintenant ? Oui
Quel gestionnaire de paquets voulez-vous utiliser ? npm
# nous allons installer des plugins supplémentaires
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Cela créera un .eslintrc.cjs contenant notre ESLint à la racine de notre application, nous allons
mettre à jour le fichier de configuration avec les plugins installés et ajouter une section règle:

const error = 2 ;

module.exports = {
  env : {
    browser : true,
    es2021 : true,
  },
  extends : [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
  ],
  parserOptions : {
    ecmaFeatures : {
      jsx : true,
    },
    ecmaVersion : 'latest',
    sourceType : 'module',
  },
  plugins : ['react'],
  rules : {
    'no-unused-vars' : error,
  },
  settings : {
    react : {
      version : 'detect',
    },
  },
  ignorePatterns : ['node_modules', '.eslintrc.cjs', 'dist'],
} ;

Nous utilisons les paramètres recommandés pour chaque plugin et avons effectué les modifications suivantes no-unused-vars envoie une erreur, une étape supplémentaire consiste à ajouter un champ charpie à la commande de notre package.json comme suit :

{
  ...,
    "scripts" : {
        "dev" : "vite",
        "build" : "vite build",
        "preview" : "vite preview",
        "lint" : "eslint --ext js,jsx ."
    },
  ...
}

Maintenant que notre Configuration d'ESLint est prêt, nous allons mettre à jour notre application pour effectuer quelques tests et voir
comment ça marche. La première chose à faire est de mettre à jour le App.jsx à l'intérieur du fichier src ce composant contient une image, un lecteur vidéo de base et un bouton qui permet de basculer le lecteur vidéo
les états de lecture/pause lorsqu'on clique dessus :

import { useEffect, useRef, useState } from 'react' ;

export default function () {
  const videoRef = useRef(null) ;
  const [isPlaying, setIsPlaying] = useState(false) ;
  const heading = 'Hello ESLint + Prettier + Husky' ;

  useEffect(() => {
    if (!isPlaying) {
      videoRef.current.play() ;
    } else {
      videoRef.current.pause() ;
    }
  }, []) ;

  const togglePlay = () => setIsPlaying(!isPlaying) ;

  return (
    <div>
      <button type="button" onclick="{togglePlay}">
        {isPlaying ? 'Pause' : 'Play'}
      </button>

      <div>
        <video
          loop
 playsinline
 ref="{videoRef}"          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        />
      </div>

      <div>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      </div>
    </div>
  );
}

import { useEffect, useRef, useState } from 'react' ;

export default function () {
const videoRef = useRef(null) ;
const [isPlaying, setIsPlaying] = useState(false) ;
const heading = 'Hello ESLint + Prettier + Husky' ;

useEffect(() => {
if (!isPlaying) {
videoRef.current.play() ;
} else {
videoRef.current.pause() ;
}
}, []) ;

const togglePlay = () => setIsPlaying(!isPlaying) ;

return (

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
  </div>
</div>
);
}

Essayons de voir ce qu'il en est de l'exécution du charpie La commande de l'UE fera le point sur notre App.jsx code :

Nous avons 4 erreurs, grandes ou pas si grandes devrais-je dire, nous venons d'attraper plusieurs types d'erreurs, certaines sont liées à React, d'autres à a11y, et une est due à la règle que nous avons ajoutée pour interdire les variables inutilisées. Ce qui est génial avec ESLint, c'est qu'il détecte les erreurs pour vous et nous donne une indication sur la solution et toutes les règles sont très bien documentées. Ainsi, pour corriger notre code, nous devrons :

- Donner un nom à notre composant

- Utilisez la variable `heading` ou supprimez-la si elle est inutile.

- Ajout d'une balise `track` pour les légendes dans le lecteur vidéo

- Ajouter un attribut `alt` avec un texte significatif à l'élément image

Après avoir appliqué ces corrections en exécutant la commande `lint`, nous ne recevons aucune erreur, notre code corrigé est le suivant :

  import { useEffect, useRef, useState } from 'react' ;

export default function App() {
const videoRef = useRef(null) ;
const [isPlaying, setIsPlaying] = useState(false) ;
const heading = 'Hello ESLint + Prettier + Husky' ;

useEffect(() => {
if (!isPlaying) {
videoRef.current.play() ;
} else {
videoRef.current.pause() ;
}
}, [isPlaying]) ;

const togglePlay = () => setIsPlaying(!isPlaying) ;

return (

{heading}

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    >
      <track kind="captions" src="flower-en.vtt" srclang="en" />
    </video>
  </div>

  <div>
    <img
      alt="Tranche de pamplemousse sur une pile d&#039;autres tranches"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Il est un peu ennuyeux de devoir utiliser la fonction charpie avant chaque commit et on peut oublier de le faire, la mise en place d'un hook git peut être utile pour automatiser cette tâche et résoudre ce problème et c'est ce dont nous allons parler dans la rubrique Husky section.

Formatage du code amélioré

Plus jolie est un formateur de code qui prend en charge de nombreux langages et s'intègre à de nombreux éditeurs de code. Ajoutons prettier à notre application :

npm install --save-dev --save-exact prettier

Nous devons créer deux fichiers à la racine de notre application : un fichier .prettierignore pour ignorer les fichiers ou les dossiers que nous ne voulons pas formater :

node_modules/
dist/
public/

Et un .prettierrc.json qui contiendra notre jolie configuration :

{
"arrowParens" : "toujours",
"bracketSameLine" : false,
"bracketSpacing" : true,
"endOfLine" : "lf",
"embeddedLanguageFormatting" : "auto",
"htmlWhitespaceSensitivity" : "css",
"insertPragma" : false,
"jsxSingleQuote" : false,
"printWidth" : 80,
"proseWrap" : "always",
"quoteProps" : "as-needed",
"requirePragma" : false,
"semi" : true,
"singleQuote" : true,
"tabWidth" : 2,
"trailingComma" : "all",
"useTabs" : true
}

La configuration de Prettier est personnalisable, vous pouvez jouer avec le terrain de jeu de Prettier pour trouver les paramètres qui vous conviennent le mieux. Une étape supplémentaire pour que Prettier fonctionne bien avec ESLint est d'installer un plugin ESLint supplémentaire :

npm i --save-dev eslint-config-prettier

Nous devrons également mettre à jour le fichier .eslintrc.cjs en ajoutant plus beau à la s'étend nous devons nous assurer de le placer dans le tableau dernier pour remplacer d'autres configurations :

const error = 2 ;

module.exports = {
...,
extends : [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
'prettier',
],
...

L'exécution de prettier est simple et directe, une façon de procéder est d'exécuter la commande npx prettier --write . qui formatera tout le code de votre application, une deuxième façon est de l'utiliser depuis votre éditeur, ce qui vous permettra de tirer le meilleur parti de Prettier, soit via un raccourci clavier, soit automatiquement à chaque fois que vous enregistrez un fichier. Lorsqu'une ligne est devenue si longue qu'elle ne tient plus à l'écran, il suffit d'appuyer sur une touche pour la voir s'enrouler comme par magie en plusieurs lignes ! Ou lorsque vous collez du code et que l'indentation se dérègle, laissez Prettier l'arranger pour vous sans quitter votre éditeur.

Mais tout de même, que se passe-t-il si l'un des développeurs utilise un éditeur qui ne prend pas en charge la fonction "prettier" et oublie d'utiliser la fonction plus beau il existe un moyen de résoudre ce problème et c'est le sujet de l'article. Husky ci-dessous.

Husky pour les crochets Git

Husky vous aide à mettre en place des hooks git pour lister vos messages de commit, exécuter des tests, lister le code, etc... lorsque vous faites un commit ou un push. Nous allons l'utiliser avec lint-staged pour automatiser le linting et le formatage du code avant de le livrer.

npx husky-init && npm install
npm i --save-dev lint-staged

Cela créera un .husky avec un dossier pré-commission fichier. L'étape suivante consiste à mettre à jour le fichier package.json pour configurer lint-staged et lui demander de formater tout fichier modifié dans le commit actuel :

{
...,
"scripts" : {
"dev" : "vite",
"build" : "vite build",
"preview" : "vite preview",
"lint" : "eslint --ext js,jsx .",
"prepare" : "husky install"
},
"lint-staged" : {
"**/*.+(js|jsx|json|css)" : "prettier --write --ignore-unknown"
},
...
}

La dernière étape consiste à mettre à jour le pré-commission pour configurer notre crochet afin d'exécuter le charpie sur toutes les applications et formater les fichiers modifiés avec la commande lint-staged commande :

!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm run lint
npx lint-staged
```

Nous allons créer un composant VideoPlayer.jsx et l'utiliser dans App.jsx :

``javascript
import { useEffect, useRef } from 'react' ;

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null) ;

useEffect(() => {
if (!isPlaying) {
videoRef.current.play() ;
} else {
videoRef.current.pause() ;
}
}, [isPlaying]) ;

return (

) ;
}

import { useState } from 'react' ;
import VideoPlayer from './VideoPlayer' ;

export default function App() {
const [isPlaying, setIsPlaying] = useState(false) ;
const heading = 'Hello ESLint + Prettier + Husky' ;

const togglePlay = () => setIsPlaying(!isPlaying) ;

return (
 
{heading}
 <div>
    <videoplayer
      isplaying="{isPlaying}"      tracksrc="flower-en.vtt"
      videosrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img
      alt="Tranche de pamplemousse sur une pile d&#039;autres tranches"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Maintenant que nous sommes satisfaits de notre code, validons nos modifications et voyons ce qu'il en est.

Cette fois encore, l'erreur est due à l'absence de validation des props et, comme vous pouvez le voir, notre commit n'a pas abouti. Corrigeons cela en installant d'abord PropTypes npm i prop-types et la mise à jour de la Lecteur vidéo de la composante :

import { useEffect, useRef } from 'react' ;
import PropTypes from 'prop-types' ;

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null) ;

useEffect(() => {
if (!isPlaying) {
videoRef.current.play() ;
} else {
videoRef.current.pause() ;
}
}, [isPlaying]) ;

return (

) ;
}

VideoPlayer.propTypes = {
isPlaying : PropTypes.bool.isRequired,
videoSrc : PropTypes.string.isRequired,
trackSrc : PropTypes.string.isRequired,
} ;

Après avoir corrigé ces erreurs, notre validation a été réussie après l'exécution des commandes de linting et de formatage du code. Comme vous pouvez le voir avec Husky, nous avons essentiellement automatisé le linting et le formatage avec ce crochet de pré-commission, ce qui évitera tout code indésirable dans notre base de code et résoudra les problèmes tels que les incompatibilités entre éditeurs et l'oubli d'exécuter ces commandes.

Résumé

ESLint, Plus jolie et Husky sont d'excellents outils qui nous aident à maintenir notre code. Combinés ensemble, ils nous offrent une excellente expérience de développement et facilitent la maintenance de notre code.

Nous avons parlé de linting et de formatage dans cet article, mais les outils disponibles et les possibilités sont beaucoup plus vastes. Vous pourriez configurer certains tests pour qu'ils s'exécutent sur un hook de pre-commit ou, si vous utilisez Typescript, ajouter une commande de vérification de type avec Husky pour ignorer tout code non typé dans votre application.

En savoir plus :

Avantages et inconvénients de Vue

Comment tuer un projet avec de mauvaises pratiques de codage

React : Conseils et astuces