Scripts complémentaires pour le développement

Dans le développement d'applications JavaScript et ReactJS, il est essentiel d'utiliser des scripts complémentaires pour améliorer la qualité du code et faciliter le processus de développement. Ces scripts complémentaires fournissent des fonctionnalités telles que la vérification des types, le linting du code et la configuration de l'outil de formatage. Dans cette section, nous allons explorer trois scripts complémentaires couramment utilisés : PropTypes, ESLint et Prettier, en expliquant leur utilité et en fournissant des exemples concrets.

PropTypes : Vérification des types

PropTypes est une bibliothèque React qui permet de vérifier les types des propriétés (props) passées à un composant. Elle offre une validation statique qui permet de détecter les erreurs de type dès la phase de développement. Cela aide à éviter les erreurs liées à des types de données incorrects et facilite la compréhension de l'interface d'un composant par d'autres développeurs.

Voici un exemple d'utilisation de PropTypes dans un composant React :

import React from 'react'
import PropTypes from 'prop-types'
 
const MyComponent = ({ name, age, email }) => {
    return (
        <div>
            <h1>{name}</h1>
            <p>{`Age: ${age}`}</p>
            <p>{`Email: ${email}`}</p>
        </div>
    )
}
 
MyComponent.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    email: PropTypes.string.isRequired,
}
 
export default MyComponent

Dans cet exemple, nous utilisons PropTypes pour définir les types des propriétés name, age et email attendues par le composant MyComponent. Nous spécifions également que ces propriétés sont requises (isRequired). Ainsi, si un développeur passe des données de type incorrect ou oublie de passer une propriété requise, une erreur sera affichée dans la console du navigateur.

ESLint : Linting du code

ESLint est un outil de linting très populaire utilisé pour analyser le code JavaScript et détecter les erreurs, les problèmes de style et les pratiques non recommandées. Il permet de maintenir un code cohérent, sans erreurs et conforme aux meilleures pratiques de développement.

Voici un exemple de configuration ESLint pour un projet React :

1. Installez ESLint en tant que dépendance de développement :

   npm install eslint --save-dev

2. Créez un fichier de configuration .eslintrc.js à la racine de votre projet :

   module.exports = {
       root: true,
       ignorePatterns: ['build', 'node_modules'],
       env: {
           browser: true,
           es2021: true,
           node: true,
           jest: true,
       },
       extends: ['eslint:recommended', 'plugin:react/recommended'],
       parserOptions: {
           ecmaFeatures: {
               jsx: true,
               experimentalObjectRestSpread: true,
           },
           ecmaVersion: 'latest',
           sourceType: 'module',
       },
       plugins: ['react'],
       rules: {
           'react/jsx-uses-react': 'off',
           'react/jsx-uses-vars': 'error',
           'react/react-in-jsx-scope': 'off',
           'react/prop-types': 'off',
           'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
           'no-unused-expressions': 0,
           'arrow-body-style': 'off',
           'prefer-arrow-callback': 'off',
           'no-unused-vars': 'off',
           'react/no-unescaped-entities': 0,
       },
       settings: {
           react: {
               version: 'detect',
           },
       },
   }

   Cette configuration recommandée utilise eslint:recommended comme base et spécifie des règles pour la gestion des points-virgules (semi), l'indentation (indent) et les quotes (quotes). Vous pouvez ajouter, modifier ou supprimer des règles selon les besoins de votre projet.

3. Ajoutez les scripts suivants dans votre fichier package.json :

   "scripts": {
     "eslint": "eslint ./src/**/*.{js,jsx,ts,tsx} --fix"
   }

   Cette configuration permet d'exécuter ESLint sur tous les fichiers JavaScript, JSX, TypeScript et TSX du dossier src/ de votre projet en utilisant la commande npm run eslint. L'option --fix permet également de corriger automatiquement les erreurs de linting lorsque cela est possible.

Prettier : Formatage du code

Prettier est un outil de formatage de code qui permet d'automatiser la mise en forme cohérente et esthétique du code source. Il peut être utilisé conjointement avec ESLint pour assurer un style de code uniforme au sein de l'équipe de développement.

Voici un exemple de configuration Prettier pour un projet React :

1. Installez Prettier en tant que dépendance de développement :

   npm install prettier --save-dev

2. Créez un fichier de configuration .prettierrc à la racine de votre projet :

   {
       "semi": true,
       "singleQuote": true,
       "tabWidth": 2,
       "printWidth": 80
   }

   Cette configuration définit des options telles que l'utilisation des points-virgules (semi), l'utilisation de guillemets simples (singleQuote), la largeur de tabulation (tabWidth) et la largeur maximale de ligne (printWidth). Vous pouvez personnaliser ces options selon vos préférences.

3. Ajoutez les scripts suivants dans votre fichier package.json :

   "scripts": {
     "format": "prettier --write . --config ./.prettierrc"
   }

   Cette configuration permet d'exécuter Prettier sur tous les fichiers du projet en utilisant la commande npm run format. Elle formate automatiquement le code en utilisant les règles définies dans le fichier de configuration .prettierrc.

Conclusion

Dans ce cours, nous avons exploré trois scripts complémentaires couramment utilisés dans le développement JavaScript et ReactJS : PropTypes, ESLint et Prettier. PropTypes permet de vérifier les types des propriétés des composants React, ESLint offre des fonctionnalités de linting pour détecter les erreurs et les problèmes de style, et Prettier facilite le formatage cohérent du code source.

Il est recommandé d'intégrer ces scripts complémentaires dans votre processus de développement pour bénéficier de leurs avantages et pour maintenir un code de haute qualité. Voici les scripts complémentaires à ajouter dans votre fichier package.json :

"scripts": {
  "eslint": "eslint ./src/**/*.{js,jsx,ts,tsx} --fix",
  "format": "prettier --write . --config ./.prettierrc"
}

Avec ces scripts, vous pouvez exécuter ESLint pour linting du code et corriger automatiquement les erreurs en utilisant la commande npm run eslint. De plus, vous pouvez formater votre code avec Prettier en utilisant la commande npm run format. Ces scripts vous permettent de maintenir un code propre, cohérent et sans erreurs, ce qui facilite la collaboration au sein de l'équipe de développement et garantit la qualité du code produit.

Husky

Introduction

Lors du développement de projets JavaScript et ReactJS à grande échelle, il est crucial de maintenir des normes de code élevées pour garantir la qualité et la cohérence du code. L'intégration d'outils tels qu'ESLint et Prettier peut grandement faciliter cette tâche. Dans cet article, nous allons explorer l'utilisation avancée de Husky et Pre-commit pour automatiser la configuration d'ESLint et Prettier lors des commits.

Prérequis

Avant de commencer, assurez-vous d'avoir un projet Node.js initialisé avec npm ou yarn installé sur votre machine.

Installation et configuration automatique

1. Pour faciliter l'installation et la configuration de Husky et Pre-commit, nous pouvons utiliser l'outil husky-init fourni par Typicode. Exécutez la commande suivante dans votre terminal pour installer husky-init et initialiser Husky :

npx husky-init && npm install

Cette commande créera automatiquement les fichiers de configuration nécessaires et installera les dépendances requises.

2. Une fois l'installation terminée, vous pouvez personnaliser les fichiers de configuration selon vos besoins spécifiques. Par exemple, vous pouvez modifier le fichier .husky/pre-commit pour exécuter les commandes souhaitées avant chaque commit.

3. Vous pouvez également personnaliser les scripts dans votre fichier package.json pour utiliser ESLint et Prettier selon vos préférences :

"scripts": {
    "pre-commit": "eslint ./src/**/*.{js,jsx} --fix && prettier --write . --config ./.prettierrc"
}

Dans cet exemple, nous utilisons la commande lint pour exécuter ESLint et Prettier et vérifier la qualité du code et le respect des règles de formatage.

Utilisation avancée

Husky et Pre-commit offrent des possibilités avancées pour adapter les hooks Git à vos besoins spécifiques. Voici quelques exemples d'utilisation avancée :

Exécution sélective des hooks

Vous pouvez spécifier quels hooks doivent être exécutés pour chaque commande Git. Par exemple, pour exécuter un hook uniquement lors de l'exécution de git commit et pas lors de git push, vous pouvez modifier le fichier .husky/pre-commit comme suit :

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
 
npm run pre-commit

Dans cet exemple, nous exécutons le script pre-commit uniquement lors de l'exécution de git commit.

Personnalisation des messages d'erreur

Vous pouvez personnaliser les messages d'erreur affichés lorsque les hooks échouent. Par exemple, pour afficher un message d'erreur personnalisé lorsque le script lint échoue, vous pouvez le modifier comme suit :

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
 
if ! npm run pre-commit; then
  echo "❌ Échec de la validation du code. Veuillez corriger les erreurs avant de commiter."
  exit 1
fi

Dans cet exemple, nous affichons un message d'erreur personnalisé et interrompons le processus de commit en cas d'échec du script pre-commit.

Exécution conditionnelle des hooks

Vous pouvez ajouter des conditions pour déterminer si un hook doit être exécuté. Par exemple, pour exécuter le hook pre-commit uniquement lorsque certains fichiers ont été modifiés, vous pouvez modifier le fichier .husky/pre-commit comme suit :

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
 
if git diff --cached --name-only -- '*.js' '*.jsx' | grep -q 'src/'; then
  npm run pre-commit
fi

Dans cet exemple, nous exécutons le script pre-commit uniquement si des fichiers JavaScript ou JSX dans le dossier src/ ont été modifiés.

Conclusion

Husky et Pre-commit offrent une solution puissante pour automatiser l'utilisation d'ESLint et Prettier lors des commits, facilitant ainsi le maintien de normes de code élevées et la cohérence du code au sein de votre projet JavaScript ou ReactJS. Grâce à leur flexibilité et à leurs fonctionnalités avancées, vous pouvez personnaliser les hooks Git pour répondre à vos besoins spécifiques. N'hésitez pas à explorer davantage la documentation officielle de Husky et Pre-commit pour découvrir d'autres fonctionnalités et options avancées.