Verbessern Sie Ihren Entwicklungsworkflow mit Husky, Commitlint, Prettier und Lint-Staged

Das Einrichten eines automatisierten Workflows kann die Codequalität und -konsistenz in Ihren Projekten erheblich verbessern. In diesem Leitfaden gehen wir Schritt für Schritt durch die Einrichtung von Husky, Commitlint, Prettier und Lint-Staged, um sicherzustellen, dass Ihre Codebasis konsistent formatiert ist, Commit-Nachrichtenkonventionen befolgt und nach jeder Zusammenführung über aktuelle Abhängigkeiten verfügt.

Husky einrichten

Husky hilft Ihnen bei der mühelosen Verwaltung von Git-Hooks und ermöglicht die Ausführung automatisierter Aufgaben wie Code-Qualitätsprüfungen vor jedem Commit.

Installation

Installieren Sie Husky als Entwicklungsabhängigkeit mit npm (wir werden npm in diesem Artikel verwenden):

npm install --save-dev husky

Initialisierung

Um ein .husky-Verzeichnis zu erstellen, in dem Git-Hooks gespeichert werden, führen Sie Folgendes aus:

npx husky init

Fügen Sie als Nächstes das folgende Skript in Ihre package.json ein, um Husky bei der Installation von Abhängigkeiten einzurichten:

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

Commitlint konfigurieren

Commitlint stellt sicher, dass alle Commit-Nachrichten einem konsistenten Format folgen und einen sauberen Commit-Verlauf aufrechterhalten.

Installation

Installieren Sie Commitlint zusammen mit einer herkömmlichen Konfiguration:

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

Aufstellen

1. Erstellen Sie einen Commit-Msg-Hook in .husky: Erstellen Sie nun eine neue Datei im .husky-Verzeichnis mit dem Namen commit-msg und fügen Sie diese Zeile hinzu:

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

1. Fügen Sie im Stammverzeichnis Ihres Projekts eine commitlint.config.js-Datei mit folgendem Inhalt hinzu:

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',
      ],
    ],
  },
};

Hinzufügen von Lint-Staged und Prettier

Mit Lint-Staged können Sie Skripte für bereitgestellte Dateien ausführen, und Prettier erzwingt einen konsistenten Stil in Ihrer Codebasis.

Installation

Installieren Sie beide als Entwicklungsabhängigkeiten:

npm install --save-dev lint-staged prettier

Hübschere Konfiguration

Erstellen Sie eine .prettierrc.json-Datei in Ihrem Projektstammverzeichnis mit Ihrer bevorzugten Konfiguration. Hier ist ein Beispiel:

{
  "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"
}

Lint-gestufte Konfiguration

Fügen Sie die folgende Konfiguration zu Ihrer package.json unter lint-staged hinzu:

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

Fügen Sie einen Pre-Commit-Hook hinzu, um Lint-Staged auszuführen:

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

Hinzufügen eines Post-Merge-Hooks für Abhängigkeiten

Ein Post-Merge-Hook stellt sicher, dass Ihre Abhängigkeiten nach jeder Zusammenführung aktualisiert werden, indem Sie npm install oder einen beliebigen Paketmanager ausführen.

Erstellen Sie einen Post-Merge-Hook:

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

Abschluss

Mit diesem Setup behält Ihr Projekt ein standardisiertes Commit-Nachrichtenformat bei, formatiert den Code automatisch und hält Abhängigkeiten nach der Zusammenführung auf dem neuesten Stand. Dieser robuste Workflow optimiert die Zusammenarbeit und verbessert die Codequalität, sodass Sie sich auf die Entwicklung großartiger Funktionen konzentrieren können.

Das obige ist der detaillierte Inhalt vonVerbessern Sie Ihren Entwicklungsworkflow mit Husky, Commitlint, Prettier und Lint-Staged. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!