JavaScript Kwaliteitspoorten: De Configuratie van Pre-commit Hooks Beheersen

In de constant evoluerende wereld van softwareontwikkeling is het handhaven van een hoge codekwaliteit essentieel. Schone, goed opgemaakte en bugvrije code verlaagt niet alleen de onderhoudskosten, maar bevordert ook de samenwerking en versnelt de ontwikkelingscycli. Een krachtige techniek om de codekwaliteit af te dwingen is de implementatie van kwaliteitspoorten (code quality gates) met behulp van pre-commit hooks. Dit artikel biedt een uitgebreide handleiding voor het configureren van pre-commit hooks voor JavaScript-projecten, zodat je de kwaliteitscontroles van code kunt automatiseren nog voordat de code je repository bereikt.

Wat zijn Pre-commit Hooks?

Git hooks zijn scripts die Git uitvoert voor of na gebeurtenissen zoals commit, push en receive. Pre-commit hooks worden specifiek uitgevoerd voordat een commit wordt voltooid. Ze bieden een cruciale kans om de wijzigingen die worden gecommit te inspecteren en commits te voorkomen die niet voldoen aan vooraf gedefinieerde kwaliteitsnormen. Zie ze als poortwachters die voorkomen dat code van lage kwaliteit je codebase binnendringt.

Waarom Pre-commit Hooks gebruiken voor JavaScript Codekwaliteit?

• Vroege Foutdetectie: Pre-commit hooks vangen problemen met de codekwaliteit vroeg in het ontwikkelingsproces op, waardoor wordt voorkomen dat ze zich verder verspreiden. Dit is veel efficiënter dan het ontdekken van problemen tijdens code reviews of, nog erger, in productie.
• Geautomatiseerde Code-opmaak: Zorg voor een consistente codeerstijl binnen je team en project. Geautomatiseerde opmaak voorkomt stilistische discussies en draagt bij aan een beter leesbare codebase.
• Minder Last voor Code Reviews: Door het automatisch afdwingen van codeerstandaarden verminderen pre-commit hooks de last voor code reviewers, waardoor zij zich kunnen concentreren op architecturale beslissingen en complexe logica.
• Verbeterde Onderhoudbaarheid van Code: Een consistente codebase van hoge kwaliteit is gemakkelijker te onderhouden en te evolueren in de loop van de tijd.
• Afgedwongen Consistentie: Ze zorgen ervoor dat alle code voldoet aan de standaarden van het project, ongeacht welke ontwikkelaar deze heeft geschreven. Dit is vooral belangrijk in verspreide teams die vanuit verschillende locaties werken – bijvoorbeeld Londen, Tokio en Buenos Aires – waar individuele codeerstijlen kunnen variëren.

Belangrijkste Tools voor JavaScript Codekwaliteit

Verschillende tools worden vaak gebruikt in combinatie met pre-commit hooks om de kwaliteitscontroles van JavaScript-code te automatiseren:

• ESLint: Een krachtige JavaScript linter die potentiële fouten identificeert, codeerstijlen afdwingt en helpt de leesbaarheid van code te verbeteren. Het ondersteunt een breed scala aan regels en is zeer configureerbaar.
• Prettier: Een 'opinionated' code formatter die code automatisch opmaakt om aan een consistente stijl te voldoen. Het ondersteunt JavaScript, TypeScript, JSX en vele andere talen.
• Husky: Een tool die het eenvoudig maakt om Git hooks te beheren. Het stelt je in staat om scripts te definiëren die worden uitgevoerd in verschillende stadia van de Git-workflow.
• lint-staged: Een tool die linters en formatters alleen op 'staged' bestanden uitvoert, wat het pre-commit proces aanzienlijk versnelt. Dit voorkomt onnodige controles op ongewijzigde bestanden.

Pre-commit Hooks Configureren: Een Stapsgewijze Handleiding

Hier is een gedetailleerde handleiding over hoe je pre-commit hooks kunt instellen voor je JavaScript-project met behulp van Husky en lint-staged:

Stap 1: Installeer Afhankelijkheden (Dependencies)

Installeer eerst de benodigde pakketten als 'development dependencies' met npm of yarn:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Of, met yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Stap 2: Initialiseer Husky

Husky vereenvoudigt het proces van het beheren van Git hooks. Initialiseer het met het volgende commando:

            npx husky install
            

              
                Copy
              
            
          

Dit creëert een `.husky` map in je project, waarin je Git hooks worden opgeslagen.

Stap 3: Configureer de Pre-commit Hook

Voeg een pre-commit hook toe met Husky:

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

              
                Copy
              
            
          

Dit commando maakt een `pre-commit` bestand in de `.husky` map en voegt het commando `npx lint-staged` eraan toe. Dit vertelt Git om lint-staged uit te voeren vóór elke commit.

Stap 4: Configureer lint-staged

Met lint-staged kun je linters en formatters alleen op de 'staged' bestanden uitvoeren, wat het pre-commit proces aanzienlijk versnelt. Maak een `lint-staged.config.js` (of `lint-staged.config.mjs` voor ES-modules) bestand aan in de root van je project en configureer het als volgt:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Deze configuratie vertelt lint-staged om ESLint en Prettier uit te voeren op alle 'staged' JavaScript- en TypeScript-bestanden. De `--fix` vlag in ESLint corrigeert automatisch alle lintingfouten die automatisch kunnen worden opgelost, en de `--write` vlag in Prettier formatteert de bestanden en overschrijft ze met de opgemaakte code.

Als alternatief kun je de configuratie rechtstreeks in je `package.json` bestand definiëren:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Stap 5: Configureer ESLint

Als je dat nog niet hebt gedaan, configureer ESLint voor je project. Je kunt een ESLint-configuratiebestand aanmaken met het volgende commando:

            npx eslint --init
            

              
                Copy
              
            
          

Dit leidt je door het proces van het aanmaken van een ESLint-configuratiebestand (`.eslintrc.js`, `.eslintrc.json`, of `.eslintrc.yml`) op basis van de vereisten van je project. Je kunt kiezen uit een verscheidenheid aan vooraf gedefinieerde configuraties of je eigen aangepaste regels maken.

Voorbeeld `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

Deze configuratie breidt de aanbevolen ESLint-regels, de aanbevolen React-regels en de aanbevolen TypeScript-regels uit, en integreert met Prettier. Het schakelt ook de `react/prop-types`-regel uit en stelt de `no-unused-vars`-regel in op een waarschuwing.

Stap 6: Configureer Prettier

Configureer Prettier door een `.prettierrc.js` (of `.prettierrc.json`, `.prettierrc.yml`, of `.prettierrc.toml`) bestand aan te maken in de root van je project. Je kunt de opmaakopties van Prettier aanpassen aan de stijlrichtlijnen van je project.

Voorbeeld `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Deze configuratie stelt Prettier in om enkele aanhalingstekens te gebruiken, geen puntkomma's, 'trailing commas', een regelbreedte van 120 tekens en een tabbreedte van 2 spaties.

Als alternatief kun je de Prettier-configuratie definiëren binnen `package.json`:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Stap 7: Test Je Configuratie

Om je configuratie te testen, 'stage' je enkele wijzigingen en probeer je ze te committen. Bijvoorbeeld:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Als er linting- of opmaakproblemen zijn, zullen ESLint en Prettier deze automatisch corrigeren (indien mogelijk) of fouten rapporteren. Als er fouten worden gerapporteerd, wordt de commit afgebroken, zodat je de problemen kunt oplossen voordat je opnieuw commit.

Geavanceerde Configuratieopties

Andere Linters en Formatters Gebruiken

Je kunt eenvoudig andere linters en formatters integreren in je pre-commit hook configuratie. Je kunt bijvoorbeeld Stylelint gebruiken voor het linten van CSS- of SASS-bestanden:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Werk vervolgens je `lint-staged.config.js`-bestand bij om Stylelint op te nemen:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Tests Draaien voor een Commit

Je kunt ook je unit tests uitvoeren als onderdeel van de pre-commit hook. Dit helpt ervoor te zorgen dat je code correct werkt voordat deze wordt gecommit. Ervan uitgaande dat je Jest gebruikt:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Werk je `lint-staged.config.js`-bestand bij om het testcommando op te nemen:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

De `--findRelatedTests`-vlag vertelt Jest om alleen tests uit te voeren die gerelateerd zijn aan de gewijzigde bestanden, wat het proces aanzienlijk versnelt.

Pre-commit Hooks Overslaan

In sommige gevallen wil je misschien de pre-commit hooks tijdelijk overslaan. Je kunt dit doen door de `--no-verify`-vlag te gebruiken bij het `git commit`-commando:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

Het wordt echter over het algemeen aanbevolen om het overslaan van de hooks te vermijden, tenzij absoluut noodzakelijk, omdat ze een cruciale rol spelen bij het handhaven van de codekwaliteit.

Probleemoplossing voor Veelvoorkomende Problemen

• Hooks worden niet uitgevoerd: Zorg ervoor dat Husky correct is geïnstalleerd en geïnitialiseerd, en dat de `.husky`-map bestaat in de root van je project. Controleer ook of het `pre-commit`-bestand in de `.husky`-map uitvoerbaar is.
• Lintingfouten worden niet gecorrigeerd: Zorg ervoor dat de `--fix`-vlag wordt gebruikt met ESLint, en dat je ESLint-configuratie is ingesteld om bepaalde soorten fouten automatisch te corrigeren.
• Prettier formatteert bestanden niet: Zorg ervoor dat de `--write`-vlag wordt gebruikt met Prettier, en dat je Prettier-configuratie correct is ingesteld.
• Trage pre-commit hooks: Gebruik lint-staged om linters en formatters alleen op 'staged' bestanden uit te voeren. Overweeg ook om je ESLint- en Prettier-configuraties te optimaliseren om het aantal regels en instellingen dat wordt gecontroleerd te minimaliseren.
• Conflicterende configuraties: Zorg ervoor dat je ESLint- en Prettier-configuraties niet met elkaar in conflict zijn. Als dit het geval is, moet je mogelijk een of beide configuraties aanpassen om de conflicten op te lossen. Overweeg het gebruik van een gedeelde configuratie zoals `eslint-config-prettier` en `eslint-plugin-prettier` om conflicten te vermijden.

Best Practices voor Pre-commit Hooks

• Houd hooks snel: Trage hooks kunnen de productiviteit van ontwikkelaars aanzienlijk beïnvloeden. Gebruik lint-staged om alleen 'staged' bestanden te verwerken en optimaliseer je linter- en formatter-configuraties.
• Geef duidelijke foutmeldingen: Wanneer een hook mislukt, geef dan duidelijke en informatieve foutmeldingen om ontwikkelaars te begeleiden bij het oplossen van de problemen.
• Automatiseer zoveel mogelijk: Automatiseer code-opmaak en linting om handmatige inspanning te minimaliseren en consistentie te waarborgen.
• Informeer je team: Zorg ervoor dat alle teamleden het doel van de pre-commit hooks begrijpen en weten hoe ze effectief te gebruiken.
• Gebruik een consistente configuratie: Handhaaf een consistente configuratie voor ESLint, Prettier en andere tools binnen je project. Dit helpt ervoor te zorgen dat alle code op dezelfde manier wordt opgemaakt en gelint. Overweeg het gebruik van een gedeeld configuratiepakket dat eenvoudig kan worden geïnstalleerd en bijgewerkt over meerdere projecten.
• Test je hooks: Test je pre-commit hooks regelmatig om ervoor te zorgen dat ze correct werken en geen onverwachte problemen veroorzaken.

Globale Overwegingen

Wanneer je in wereldwijd verspreide teams werkt, overweeg dan het volgende:

• Consistente toolversies: Zorg ervoor dat alle teamleden dezelfde versies van ESLint, Prettier, Husky en lint-staged gebruiken. Dit kan worden bereikt door de versies te specificeren in je `package.json`-bestand en een package manager zoals npm of yarn te gebruiken om de afhankelijkheden te installeren.
• Cross-platform compatibiliteit: Test je pre-commit hooks op verschillende besturingssystemen (Windows, macOS, Linux) om ervoor te zorgen dat ze op alle platforms correct werken. Gebruik waar mogelijk cross-platform tools en commando's.
• Tijdzoneverschillen: Houd rekening met tijdzoneverschillen bij de communicatie met teamleden over problemen met pre-commit hooks. Geef duidelijke instructies en voorbeelden om hen te helpen de problemen snel op te lossen.
• Taalondersteuning: Als je project met meerdere talen werkt, zorg er dan voor dat je pre-commit hooks alle talen ondersteunen die in het project worden gebruikt. Mogelijk moet je extra linters en formatters voor elke taal installeren.

Conclusie

Het implementeren van pre-commit hooks is een effectieve manier om de codekwaliteit af te dwingen, de teamsamenwerking te verbeteren en de onderhoudskosten in JavaScript-projecten te verlagen. Door tools zoals ESLint, Prettier, Husky en lint-staged te integreren, kun je de opmaak, linting en het testen van code automatiseren, waardoor je ervoor zorgt dat alleen code van hoge kwaliteit wordt gecommit naar je repository. Door de stappen in deze handleiding te volgen, kun je een robuuste kwaliteitspoort opzetten die je helpt schonere, beter onderhoudbare en betrouwbaardere JavaScript-applicaties te bouwen. Omarm deze praktijk en til vandaag nog de ontwikkelworkflow van je team naar een hoger niveau.