Hier is een voorbeeld van een GitHub Actions workflow die codekwaliteit afdwingt voor een JavaScript-project met ESLint en Prettier, volgens de Airbnb style guide: ```yaml name: Codekwaliteitscontrole on: push: branches: - main pull_request: branches: - main jobs: lint: name: Lint en formateer controle runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '16' # Pas aan naar je gewenste Node-versie - name: Installeer dependencies run: npm install - name: Installeer ESLint en Prettier run: | npm install --save-dev eslint prettier eslint-config-airbnb-base eslint-plugin-import - name: Controleer code met ESLint run: | npx eslint src/**/*.js --max-warnings=0 - name: Controleer codeformaat met Prettier run: | npx prettier --check "src/**/*.js" - name: Optioneel: automatisch formatteren (alleen bij geslaagde checks) # Kan worden toegevoegd of omgezet naar automatisch formatteren ``` **Aanpassingen en tips:** - Zorg dat je een `.eslintrc.json` hebt met de Airbnb-configuratie, bijvoorbeeld: ```json { "extends": ["airbnb-base"], "rules": { // voeg hier je aangepaste regels toe } } ``` - Voeg Prettier configuratie toe via `.prettierrc` indien gewenst. - Pas de paden (`src/**/*.js`) aan naar jouw projectstructuur. - Je kunt ook linten en formatteren automatiseren door scripts toe te voegen in `package.json`. Met deze workflow wordt bij elke push of pull request gecontroleerd of de code voldoet aan de afgesproken codekwaliteit standaarden.

Zeker, hier is een complete GitHub Actions workflow-configuratie die ESLint en Prettier integreert met de Airbnb style guide: ```yaml name: Code Quality Check on: push: branches: [ main, develop ] pull_request: branches: [ main, develop ] jobs: code-quality: name: ESLint & Prettier Check runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' - name: Install dependencies run: npm ci - name: Run ESLint run: npx eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0 - name: Check Prettier formatting run: npx prettier --check . ``` ## Vereiste package.json configuratie: Eerst moet je deze dev dependencies installeren: ```bash npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser ``` ## .eslintrc.json configuratie: ```json { "extends": ["airbnb", "prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } ``` ## .prettierrc configuratie: ```json { "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" } ``` ## Aanvullende opties: Voor TypeScript ondersteuning, voeg deze stappen toe aan de workflow: ```yaml - name: Run TypeScript compiler check run: npx tsc --noEmit ``` Voor automatische fixes bij pull requests kun je deze job toevoegen: ```yaml auto-fix: name: Auto Fix Formatting runs-on: ubuntu-latest if: github.event_name == 'pull_request' steps: - name: Checkout code uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' - name: Install dependencies run: npm ci - name: Apply Prettier fixes run: npx prettier --write . - name: Commit fixes uses: stefanzweifel/git-auto-commit-action@v4 with: commit_message: 'style: auto-format with Prettier' ``` Deze workflow zal automatisch draaien bij pushes naar main/develop branches en pull requests, en zorgt ervoor dat alle code voldoet aan de Airbnb style guide.