Natuurlijk! Hier is een stapsgewijze uitleg om Git hooks in te stellen voor jouw JavaScript-webapplicatie, inclusief voorbeelden voor pre-commit, commit-msg en post-commit hooks, en integratie met linters en testframeworks. --- **1. Git hooks beheren met Husky** Het is aan te raden om [Husky](https://typicode.github.io/husky/#/) te gebruiken, een populaire tool voor het beheren van Git hooks in JavaScript-projecten. **Installatie:** ```bash npm install husky --save-dev npx husky install ``` Voeg dit toe aan je `package.json` om Husky automatisch te activeren na installatie: ```json "scripts": { "prepare": "husky install" } ``` **2. Hooks aanmaken** Na installatie kun je hooks toevoegen met: ```bash npx husky add .husky/pre-commit "npm test" npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"' npx husky add .husky/post-commit "echo 'Post-commit hook uitgevoerd'" ``` --- **3. Pre-commit hook: code kwaliteit en tests** Voor de pre-commit hook kun je bijvoorbeeld ESLint en je testframework (bijv. Jest) draaien, zodat je code wordt gecontroleerd voordat je commit. **Voorbeeld `.husky/pre-commit` script:** ```bash #!/bin/sh . "$(dirname "$0")/_/husky.sh" # Linten met ESLint npx eslint src/**/*.js # Tests draaien npm test ``` **Tip:** Voeg in je package.json scripts toe: ```json "scripts": { "lint": "eslint src/**/*.js", "test": "jest" } ``` En wijzig de pre-commit hook naar: ```bash #!/bin/sh . "$(dirname "$0")/_/husky.sh" npm run lint && npm test ``` --- **4. Commit-msg hook: validatie van commit berichten** Gebruik bijvoorbeeld [commitlint](https://commitlint.js.org/) om consistente commit-berichten te garanderen. **Installatie:** ```bash npm install @commitlint/{config-conventional,cli} --save-dev ``` **Configuratie:** Maak een `commitlint.config.js`: ```js module.exports = { extends: ['@commitlint/config-conventional'] }; ``` **Hook toevoegen:** ```bash npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"' ``` **Tip:** Voeg een `.commitlintrc.js` toe: ```js module.exports = { extends: ['@commitlint/config-conventional'] }; ``` --- **5. Post-commit hook: acties na commit** Bijvoorbeeld, je kunt automatische deployment of notificaties doen. **Voorbeeld `.husky/post-commit`:** ```bash #!/bin/sh . "$(dirname "$0")/_/husky.sh" echo "Commit voltooid op $(date)" # Bijvoorbeeld, automatisch je build of deployment uitvoeren ``` --- **Samenvatting:** - Installeer Husky. - Voeg hooks toe voor pre-commit (lint en testen), commit-msg (validatie), en post-commit (bijv. notificaties). - Configureer ESLint en Jest in je package.json scripts. - Gebruik commitlint voor consistente berichten. --- **Kort overzicht van voorbeeldscripts:** **pre-commit:** ```bash npm run lint && npm test ``` **commit-msg:** ```bash npx --no -- commitlint --edit "$1" ``` **post-commit:** ```bash echo "Commit voltooid op $(date)" ``` --- Met deze setup zorg je dat je codekwaliteit automatisch wordt gecontroleerd en dat je commit-berichten gestandaardiseerd zijn. Mocht je meer hulp nodig hebben bij specifieke configuraties, vraag gerust!

Zeker, ik help je met het configureren van Git hooks voor je JavaScript webapplicatie. Hier is een complete handleiding: ## 1. Git hooks directory aanmaken Git hooks bevinden zich in `.git/hooks/` in je repository. Maak eerst de hooks aan: ```bash # Navigeer naar je project directory cd jouw-project # Maak de hook bestanden aan (ze moeten uitvoerbaar zijn) touch .git/hooks/pre-commit touch .git/hooks/commit-msg touch .git/hooks/post-commit chmod +x .git/hooks/* ``` ## 2. Pre-commit hook (codekwaliteit en tests) **Bestand: `.git/hooks/pre-commit`** ```bash #!/bin/bash echo "🚀 Pre-commit checks worden uitgevoerd..." # ESLint controleren echo "📋 ESLint controleren..." npx eslint src/ --max-warnings=0 if [ $? -ne 0 ]; then echo "❌ ESLint checks gefaald. Commit afgebroken." exit 1 fi # TypeScript type checking (als je TS gebruikt) # echo "🔍 TypeScript type checking..." # npx tsc --noEmit # Unit tests uitvoeren echo "🧪 Unit tests uitvoeren..." npm test -- --passWithNoTests if [ $? -ne 0 ]; then echo "❌ Tests gefaald. Commit afgebroken." exit 1 fi # Code formatting controleren met Prettier echo "🎨 Code formatting controleren..." npx prettier --check src/ if [ $? -ne 0 ]; then echo "❌ Prettier formatting issues gevonden. Commit afgebroken." exit 1 fi echo "✅ Alle pre-commit checks geslaagd!" exit 0 ``` ## 3. Commit-msg hook (commit message formatting) **Bestand: `.git/hooks/commit-msg`** ```bash #!/bin/bash COMMIT_MSG_FILE=$1 COMMIT_MSG=$(cat "$COMMIT_MSG_FILE") # Commit message pattern (conventionele commits) PATTERN="^(feat|fix|docs|style|refactor|test|chore|perf|build|ci|revert)(\([a-z-]+\))?: .{1,50}" if ! echo "$COMMIT_MSG" | grep -Eq "$PATTERN"; then echo "❌ Ongeldige commit message format." echo "✅ Gebruik: type(scope): beschrijving" echo "✅ Types: feat, fix, docs, style, refactor, test, chore, perf, build, ci, revert" echo "✅ Voorbeeld: feat(auth): add login functionality" exit 1 fi # Maximale lengte controle if [ ${#COMMIT_MSG} -gt 100 ]; then echo "❌ Commit message is te lang (max 100 karakters)" exit 1 fi echo "✅ Commit message voldoet aan de conventies" exit 0 ``` ## 4. Post-commit hook (notificaties) **Bestand: `.git/hooks/post-commit`** ```bash #!/bin/bash echo "🎉 Commit succesvol voltooid!" echo "📊 Huidige branch: $(git branch --show-current)" echo "🔍 Laatste commit: $(git log -1 --oneline)" # Optioneel: Notificatie sturen (macOS) # osascript -e 'display notification "Commit voltooid" with title "Git"' # Optioneel: Build status checken # npm run build ``` ## 5. Vereiste dependencies installeren Zorg dat deze packages in je `package.json` staan: ```json { "devDependencies": { "eslint": "^8.0.0", "prettier": "^3.0.0", "jest": "^29.0.0", "husky": "^8.0.0" }, "scripts": { "lint": "eslint src/", "lint:fix": "eslint src/ --fix", "test": "jest", "format": "prettier --write src/" } } ``` ## 6. Husky installeren (aanbevolen) Voor betrouwbaardere hooks, installeer Husky: ```bash npm install husky --save-dev npx husky init ``` Voeg scripts toe aan `.husky/pre-commit`: ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npm run lint npm test ``` ## 7. ESLint configuratie **Bestand: `.eslintrc.js`** ```javascript module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, rules: { 'no-unused-vars': 'error', 'no-console': 'warn', }, }; ``` ## 8. Alternatieve setup met package.json scripts Voeg deze scripts toe aan je `package.json`: ```json { "scripts": { "prepare": "husky install", "precommit": "npm run lint && npm test", "lint": "eslint src/ --max-warnings=0", "test": "jest --passWithNoTests", "format": "prettier --write src/" } } ``` ## 9. Hook bestanden uitvoerbaar maken ```bash chmod +x .git/hooks/pre-commit chmod +x .git/hooks/commit-msg chmod +x .git/hooks/post-commit ``` ## 10. Test je hooks ```bash # Test de pre-commit hook git add . git commit -m "test: testing hooks" # Test met opzettelijk foute commit message git commit -m "bad message" ``` ## Troubleshooting tips: 1. **Hooks werken niet**: Zorg dat ze uitvoerbaar zijn (`chmod +x`) 2. **Permissie errors**: Gebruik `#!/usr/bin/env bash` in plaats van `#!/bin/bash` 3. **Windows gebruikers**: Overweeg Husky voor cross-platform compatibiliteit 4. **Snelheid**: Voeg `--no-verify` flag toe om hooks over te slaan (alleen voor noodgevallen) Deze setup zorgt voor automatische codekwaliteitscontroles en tests bij elke commit, wat je ontwikkelproces consistenter en betrouwbaarder maakt!