Natuurlijk! Hier is een stapsgewijze gids om een GitHub Actions workflow op te zetten voor automatische codekwaliteitscontroles en statische codeanalyse voor jouw JavaScript-project "MijnWebApp". ### 1. Basisconfiguratie van de workflow Maak een nieuwe directory `.github/workflows` aan in je repository, en voeg een bestand toe, bijvoorbeeld `ci.yml`. ```yaml name: CI - Codekwaliteitscontroles on: push: branches: - main pull_request: branches: - main jobs: lint: name: Lint en Statische Analyse runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Installeer Node.js uses: actions/setup-node@v3 with: node-version: '16' # of een andere versie die je gebruikt - name: Installeer dependencies run: npm install - name: Voer ESLint uit run: npx eslint . --max-warnings=0 - name: Voer verdere statische analyse uit (bijvoorbeeld SonarQube, indien gewenst) # Voeg hier optioneel extra analyse toe ``` ### 2. Codeanalyse tools integreren Voor JavaScript wordt vaak ESLint gebruikt voor statische analyse en codekwaliteit. **Stap 1: ESLint toevoegen aan je project** ```bash npm install eslint --save-dev npx eslint --init ``` Configureer ESLint volgens je wensen. Bijvoorbeeld, een `.eslintrc.json` bestand: ```json { "env": { "browser": true, "es2021": true }, "extends": "eslint:recommended", "rules": { // Voeg je aangepaste regels toe } } ``` **Stap 2: Automatiseren in GitHub Actions** De bovenstaande workflow voert `npx eslint . --max-warnings=0` uit, wat betekent dat elke waarschuwing of fout de build doet falen. ### 3. Extra kwaliteitscontroles Overweeg ook: - **Prettier** voor code formattering - **Jest** voor unittests Voorvoorbeeld: ```yaml - name: Run unit tests run: npm test ``` ### 4. Automatisering en best practices - Voeg een `lint` script toe aan je `package.json`: ```json "scripts": { "lint": "eslint .", "test": "jest" } ``` - Zorg dat je `package.json` dependencies bevat voor ESLint en Jest. ### 5. Samenvatting De workflow automatiseert nu: - Bij elke push of pull request naar `main` - Het linten van je code via ESLint - Het uitvoeren van unit tests Eventueel kun je nog verdere tools toevoegen zoals **SonarQube**, **CodeClimate**, of **Coveralls** voor diepere analyses en rapportages. --- Mocht je specifieke wensen hebben voor bijvoorbeeld rapportages of integraties, laat het gerust weten!

Zeker, ik help je graag met het opzetten van een geautomatiseerde codekwaliteitsworkflow voor je JavaScript project. Hier is een stapsgewijze handleiding: ## 1. GitHub Workflow Configuratie Maak een bestand aan in je repository: `.github/workflows/code-quality.yml` ```yaml name: Code Quality Checks on: push: branches: [ main, develop ] pull_request: branches: [ main, develop ] jobs: code-quality: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' cache: 'npm' - name: Install dependencies run: npm ci - name: Run ESLint run: npx eslint src/ --max-warnings=0 - name: Run Prettier check run: npx prettier --check src/ - name: Run Jest tests run: npm test -- --coverage - name: Upload coverage reports uses: codecov/codecov-action@v3 with: file: ./coverage/lcov.info ``` ## 2. Vereiste Tools Installeren Voeg deze dev dependencies toe aan je `package.json`: ```bash npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier jest ``` ## 3. Configuratiebestanden **ESLint configuratie (.eslintrc.js):** ```javascript module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', 'prettier' ], parserOptions: { ecmaVersion: 12, sourceType: 'module', }, rules: { 'no-unused-vars': 'error', 'no-console': 'warn', }, }; ``` **Prettier configuratie (.prettierrc):** ```json { "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2 } ``` ## 4. Aanvullende Tools (Optioneel) Voor uitgebreidere analyse kun je overwegen: ```yaml - name: Run SonarQube analysis uses: SonarSource/sonarcloud-github-action@master env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} - name: Run Lighthouse CI uses: treosh/lighthouse-ci-action@v10 with: uploadArtifacts: true temporaryPublicStorage: true ``` ## 5. Pull Request Integratie Voeg deze stap toe om statuschecks te forceren: ```yaml - name: Require status checks if: github.event_name == 'pull_request' run: | # Hier kun je specifieke voorwaarden toevoegen echo "Alle kwaliteitschecks moeten slagen voordat merging mogelijk is" ``` ## 6. Secrets Configuratie Voor externe tools zoals SonarQube, voeg secrets toe in GitHub: - Ga naar Repository Settings → Secrets and variables → Actions - Voeg benodigde tokens toe (SONAR_TOKEN, etc.) ## 7. Aanbevolen Scripts voor package.json ```json { "scripts": { "lint": "eslint src/", "lint:fix": "eslint src/ --fix", "format": "prettier --write src/", "test": "jest", "test:coverage": "jest --coverage" } } ``` ## Belangrijke Tips: 1. **Start eenvoudig** - Begin met ESLint en Prettier, voeg later complexere tools toe 2. **Fail fast** - Zet `--max-warnings=0` om ervoor te zorgen dat warnings ook falen 3. **Cache dependencies** - Gebruik caching voor snellere workflows 4. **Lokaal testen** - Voer `npm run lint` en `npm test` lokaal uit voordat je commit Deze setup zorgt ervoor dat bij elke commit en pull request automatisch kwaliteitscontroles worden uitgevoerd, wat je handmatige code reviews aanzienlijk zal verbeteren en versnellen.