Améliorez votre flux de travail de développement avec Husky, Commitlint, Prettier et Lint-Staged

La mise en place d'un flux de travail automatisé peut grandement améliorer la qualité et la cohérence du code dans vos projets. Dans ce guide, nous expliquerons la configuration de Husky, Commitlint, Prettier et Lint-Staged pour garantir que votre base de code est formatée de manière cohérente, respecte les conventions de message de validation et possède des dépendances à jour après chaque fusion.

Configuration de Husky

Husky vous aide à gérer les hooks Git sans effort, permettant d'exécuter des tâches automatisées telles que les contrôles de qualité du code avant chaque validation.

Installation

Installez Husky en tant que dépendance de développement à l'aide de npm (nous utiliserons npm dans cet article) :

npm install --save-dev husky

Initialisation

Pour créer un répertoire .husky où les hooks Git seront stockés, exécutez :

npx husky init

Ensuite, ajoutez le script suivant dans votre package.json pour configurer Husky lors de l'installation des dépendances :

"scripts": {
  "prepare": "husky install"
}

Configuration de Commitlint

Commitlint garantit que tous les messages de validation suivent un format cohérent, en conservant un historique de validation propre.

Installation

Installez Commitlint avec une configuration conventionnelle :

npm install --save-dev @commitlint/config-conventional @commitlint/cli

Installation

1. Créez un hook commit-msg dans .husky : Créez maintenant un nouveau fichier dans le répertoire .husky nommé commit-msg et ajoutez cette ligne :

npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"\""

1. Ajoutez un fichier commitlint.config.js à la racine de votre projet avec le contenu suivant :

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    //   TODO Add Scope Enum Here
    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'chore',
        'style',
        'refactor',
        'ci',
        'test',
        'revert',
        'perf',
        'vercel',
      ],
    ],
  },
};

Ajout de peluches et de plus jolis

Lint-Staged vous permet d'exécuter des scripts sur des fichiers préparés, et Prettier applique un style cohérent dans votre base de code.

Installation

Installez les deux en tant que dépendances de développement :

npm install --save-dev lint-staged prettier

Une configuration plus jolie

Créez un fichier .prettierrc.json à la racine de votre projet avec votre configuration préférée. Voici un exemple :

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 120,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5", 
  "semi": true, 
  "singleQuote": true,
  "bracketSpacing": true, 
  "arrowParens": "always",
  "jsxSingleQuote": false, 
  "bracketSameLine": false,
  "endOfLine": "lf"
}

Configuration par étapes

Ajoutez la configuration suivante à votre package.json sous lint-staged :

"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --max-warnings=0",
      "prettier --write"
    ],
    "**/*.{html,json,css,scss,md,mdx}": [
      "prettier -w"
    ]
  }

Ajoutez un hook de pré-commit pour exécuter Lint-Staged :

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

Ajout d'un hook post-fusion pour les dépendances

Un hook post-fusion garantit que vos dépendances sont mises à jour après chaque fusion en exécutant npm install ou n'importe quel gestionnaire de packages.

Créez un hook post-fusion :

npx husky add .husky/post-merge "npm install"

Conclusion

Avec cette configuration, votre projet conservera un format de message de validation standardisé, formatera automatiquement le code et maintiendra les dépendances à jour après la fusion. Ce flux de travail robuste rationalisera la collaboration et améliorera la qualité du code, vous aidant ainsi à vous concentrer sur la création de fonctionnalités exceptionnelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!