Het opzetten van Git-workflows die tools integreren voor het volgen van codekwaliteitsmetingen in je webapplicatieproject vereist een gestructureerde aanpak. Hier zijn richtlijnen en voorbeelden om dit effectief te doen: 1. Kies geschikte metrics - Code Coverage: Meet welk percentage van je code getest wordt. Belangrijk voor het identificeren van ongeteste code. - Complexiteit: Meet de mate van complexiteit van functies of modules (bijvoorbeeld cyclomatische complexiteit). Dit helpt om moeilijk te begrijpen of te onderhouden code te identificeren. - Linting en Code Stilering: Controleer of code aan stijlregels voldoet. - Dupliceerbaarheid: Identificeer duplicatie in code. 2. Selecteer tools voor het meten en integreren - Code Coverage: Bijvoorbeeld Istanbul (nyc), Coveralls, Codecov. - Complexiteit: EsLint met complexiteitsregels, SonarQube. - Andere kwaliteitscontroles: ESLint, Prettier. 3. Automatiseren tijdens pull requests - Continuous Integration (CI): Stel een CI-pijplijn in (bijvoorbeeld met GitHub Actions, GitLab CI, Jenkins). - Voeg stappen toe voor het uitvoeren van tests en codekwaliteitsmetingen. - Bijvoorbeeld, bij elke pull request: - Code wordt getest. - Coverage wordt gemeten en gerapporteerd. - Complexiteit wordt gecontroleerd. - Configureer de CI om rapportages te genereren en te uploaden naar een dashboard. 4. Voorbeeld van CI-configuratie (GitHub Actions) ```yaml name: CI Workflow on: pull_request: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: '14' - name: Install dependencies run: npm install - name: Run tests with coverage run: npm test -- --coverage - name: Upload coverage to Codecov uses: codecov/codecov-action@v2 with: token: ${{ secrets.CODECOV_TOKEN }} - name: Run ESLint with complexity checks run: npx eslint src --max-complexity 10 --format json -o eslint-report.json - name: Upload ESLint report uses: actions/upload-artifact@v2 with: name: eslint-report path: eslint-report.json ``` 5. Visualisatie en rapportage - Gebruik dashboards zoals SonarQube, Codecov, Coveralls of integraties in GitHub/GitLab. - Configureer automatische rapporten die na elke build/pull request zichtbaar zijn. - Maak gebruik van badges in je README voor bijvoorbeeld coverage percentage en kwaliteitsstatus. 6. Best practices - Stel drempelwaarden in (bijvoorbeeld minimale coverage of maximale complexiteit). - Laat het team betrokken zijn bij het bepalen van kwaliteitsnormen. - Zorg voor regelmatige review van rapportages en bespreek verbeterpunten. - Documenteer de workflow en verwachtingen in je projectdocumentatie. Door deze aanpak te volgen, krijg je een gestructureerde en automatische manier om codekwaliteit te volgen en te verbeteren binnen je Git-workflow voor je webapplicatie.

Hier is een uitgebreide uitleg over het opzetten van Git-workflows met codekwaliteitsmetingen voor je webapplicatie: ## Git Workflow Setup met Kwaliteitsmetingen ### 1. Basis Git Workflow Structuur ```yaml # .github/workflows/quality-checks.yml name: Code Quality Checks on: pull_request: branches: [ main, develop ] push: branches: [ main, develop ] jobs: quality-metrics: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' ``` ### 2. Selectie van Geschikte Metrics **Essentiële metrics:** - **Code Coverage**: Percentage uitgevoerde code tijdens tests - **Cyclomatische Complexiteit**: Aantal lineair onafhankelijke paden in code - **Onderhoudbaarheidsindex**: Score voor leesbaarheid en onderhoud - **Duplicated Code**: Percentage gedupliceerde code - **Security Vulnerabilities**: Bekende beveiligingsproblemen **Aanbevolen thresholds:** ```yaml # quality-gates.yml metrics: code-coverage: minimum: 80% target: 90% complexity: maximum: 15 per functie maintainability: minimum: 60 ``` ### 3. Tools voor Automatische Metingen **Test Coverage:** ```yaml - name: Run tests with coverage run: | npm test -- --coverage npx nyc report --reporter=lcov - name: Upload coverage to Codecov uses: codecov/codecov-action@v3 ``` **Code Quality Analysis:** ```yaml - name: SonarQube Analysis uses: SonarSource/sonarqube-scan-action@v4 with: projectBaseDir: ./ - name: Code Complexity run: | npx complexity-report --format json src/ > complexity-report.json ``` ### 4. Pull Request Integratie ```yaml - name: PR Quality Gate uses: actions/github-script@v6 with: script: | const coverage = require('./coverage/coverage-summary.json'); if (coverage.total.lines.pct < 80) { core.setFailed('Code coverage onder 80%'); } ``` ### 5. Tools en Integraties **Aanbevolen toolstack:** - **SonarQube/SonarCloud**: Uitgebreide kwaliteitsanalyse - **Codecov**: Coverage tracking en rapportage - **ESLint/Prettier**: Code style en kwaliteit - **Lighthouse CI**: Web performance metrics - **Snyk**: Security vulnerability scanning **Voorbeeld configuratie:** ```javascript // sonar-project.properties sonar.projectKey=my-webapp sonar.sources=src sonar.tests=test sonar.javascript.lcov.reportPaths=coverage/lcov.info sonar.coverage.exclusions=**/*.test.js,**/node_modules/** ``` ### 6. Visualisatie en Rapportage **Dashboard Tools:** - **SonarQube Dashboard**: Real-time kwaliteitsmetingen - **Grafana**: Custom dashboards voor team metrics - **GitHub Actions Annotations**: Directe feedback in PR's **PR Comment Voorbeeld:** ```yaml - name: PR Quality Report uses: actions/github-script@v6 with: script: | github.rest.issues.createComment({ issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, body: `## 📊 Kwaliteitsrapport ✅ **Code Coverage**: 85% (+2%) ⚠️ **Complexiteit**: 12 functies boven threshold ✅ **Security**: Geen critical issues 📈 **Onderhoudbaarheid**: 72/100` }) ``` ### 7. Best Practices **Team Workflow:** 1. **Pre-commit Hooks**: Automatische formatting en linting 2. **Quality Gates**: Blokkeer PR's bij kwaliteitsdaling 3. **Trend Analysis**: Monitor metrics over tijd 4. **Team Reviews**: Bespreek metrics tijdens sprint reviews **Configuratie voorbeeld pre-commit:** ```json { "husky": { "hooks": { "pre-commit": "lint-staged", "pre-push": "npm run test:coverage" } }, "lint-staged": { "*.{js,ts}": ["eslint --fix", "prettier --write"] } } ``` ### 8. Monitoring en Verbetering **Trend Tracking:** - Maandelijkse quality reports - Team performance dashboards - Technical debt tracking - Automated quality trend alerts **Voorbeeld quality dashboard:** ```yaml # metrics-dashboard.yml weekly_metrics: - coverage_trend - new_bugs - code_smells - security_hotspots - team_velocity ``` Deze aanpak zorgt voor continue kwaliteitsbewaking en helpt je team proactief kwaliteitsissues te identificeren en op te lossen voordat ze in productie terechtkomen.