Ajouter Husky + Lint-staged à React (dactylographié)

Je suppose que vous avez déjà au moins les connaissances de base de ReactJs et Git .

Remarque : cet article est écrit en août 2021. Cette syntaxe pourrait ne pas fonctionner plus tard en raison d'un changement de version.

Premier pas

Laissez configurer le projet React avec Typescript à l' aide de la commande create-react-app

npx create-react-app automate-prettier-eslint-with-husky --template typescript

Nous pouvons maintenant ajouter git à notre projet. Ici, j'utilise GitHub pour ce projet.

Créez un référentiel vide dans Github, puis vous serez affiché comme ceci.

Ensuite, vous pouvez ajouter git et envoyer le premier commit au référentiel en utilisant la commande ci-dessous,

git remote add origin https://github.com/cheulong/automate-prettier-eslint-with-husky.git
git branch -M main
git push -u origin main

Troisième étape

Ajouter des dépendances

yarn add -D husky lint-staged prettier

• lint-staged — pour exécuter la commande avant de valider .
• prettier — pour formater le code.

Créer .prettierignorepour ajouter le dossier ignoré

Ajouter la commande Eslint et Prettier au script

• eslint src pour vérifier le code d'avertissement et d'erreur.
• prettier --write pour formater le code.
• prettier --check . pour vérifier le format du code.

Dernière étape

Enfin, nous activons le git hook

npx husky install

npx husky add .husky/pre-commit "yarn lint-staged"

Remarque : Vous pouvez également modifier le fichier de pré-commit

Maintenant, testons

git add .
git commit -m"add husky lint-staged"

      

    
      

Félicitations, vous avez réussi à ajouter husky et lint-staged à votre projet ReactJs.

Le référentiel de cet article https://github.com/cheulong/automate-prettier-eslint-with-husky