developer.overheid.nl

Ontwikkelaarsportaal van de Nederlandse overheid

Ga naar hoofdinhoud

Formatting & Linting

Bij het ontwikkelen van front-end code is het belangrijk om consistente code-stijl en kwaliteit te waarborgen. Het feit dat front-end code nagenoeg altijd in JavaScript is geschreven geeft hier nog meer reden toe. JavaScript geeft je namelijk heel veel vrijheid om problemen op verschillende manieren op te lossen. Linting geeft je juist een mogelijkheid om hierin wat striktere afspraken te maken.

TL;DR - Formatting is een goed idee, gebruik bijvoorbeeld Biome

Om te voorkomen dat er discussie binnen je team ontstaat over bepaalde stijlkeuzes is het slim om je code te linten en te formatten. Dit voorkomt inconsistenties en bugs in de codebase en maakt hem beter leesbaar. Een snelle en moderne tool die dit voor je doet is Biome.

Voordelen van formatting en linting zijn:

  • ✔️ Consistentie in de codebase: je code ziet er overal hetzelfde uit, ongeacht wie het geschreven heeft.

  • ✔️ Fouten vroegtijdig opsporen: linters vangen veelgemaakte fouten op. Denk aan: ongebruikte variabelen, ontbrekende return statements, verkeerde vergelijkingen (== versus ===).

  • ✔️ Betere code kwaliteit: linters dwingen je om best practices te volgen. Ze waarschuwen voor potentieel problematische patronen.

  • ✔️ Makkelijkere onboarding nieuwe teamleden: nieuwe developers leren meteen de juiste patronen en stijl.

Wat is formatting?​

Formatting verwijst naar de stijl van je code: hoe deze eruitziet qua inspringing, spaties, regels en leestekens. Een formatter zorgt ervoor dat alle code in een project er uniform uitziet, ongeacht wie de code heeft geschreven.

Typische formatting-regels​

  • Gebruik van spaties of tabs voor inspringing en hoeveel (2, 4, etc.)
  • Maximale regellengte (hoeveel karakters)
  • Gebruik van enkele of dubbele aanhalingstekens ('' vs "")
  • Komma's aan het einde van objecten of arrays (trailing commas)

Wat is linting?​

Linting controleert de logica en kwaliteit van je code. Een linter analyseert je code op fouten, onlogische patronen, onveilige constructies en slechte praktijken. Waar formatting zich richt op stijl, richt linting zich op correctheid en consistentie.

Typische linting-controles​

  • Ongebruikte variabelen of imports
  • Vergelijkingen met == in plaats van ===
  • Niet-gedefinieerde variabelen
  • Console-statements in productiecode

Populaire Tools​

Prettier​

Prettier is een "opinionated formatter" - het legt één vaste stijl op, zodat je geen eindeloze discussies voert over spaties en puntkomma’s. Het ondersteunt veel programmeertalen en kan worden geïntegreerd in verschillende editors en build-tools.

ESLint​

ESLint is een veelgebruikte linter voor JavaScript en TypeScript. Het biedt uitgebreide mogelijkheden om je code te analyseren en te controleren op fouten en inconsistenties. Je kunt ESLint uitbreiden met plug-ins voor frameworks zoals React, Vue of Next.js.

Stylelint​

Stylelint is een linter voor CSS en aanverwante talen zoals SCSS en Less. Het helpt bij het handhaven van consistente stijlen en het voorkomen van fouten in je stylesheets. Voorbeelden van regels die Stylelint kan afdwingen zijn het gebruik van onnodige units, zoals 0px, de volgorde van properties en het vermijden van dubbele definities.

Biome​

Biome is de moderne opvolger van de traditionele ESLint + Prettier combinatie. Het is geschreven in Rust, waardoor het razendsnel is, en het combineert formatting, linting en code-analyse in één tool. Biome ondersteunt JavaScript, TypeScript, JSON, CSS, HTML, Markdown en meer. Biome is zeer configureerbaar, je kan kiezen voor de gekozen default instellingen of deze aanpassen naar je eigen regels. Configuratiebestanden kunnen per map worden overgeschreven en overerven.

Integratie in je workflow​

Deze tools kunnen worden geïntegreerd in je ontwikkelworkflow op verschillende manieren:

  • Editor-integratie: De meeste moderne code-editors zoals VSCode en Webstorm ondersteunen plugins voor Prettier, ESLint, Stylelint en andere tools. Hierdoor worden fouten en formatteerproblemen direct tijdens het typen gemarkeerd.
  • Pre-commit hooks: Tools zoals Husky kunnen worden gebruikt om linting en formatting uit te voeren voordat code wordt gecommit naar een versiebeheersysteem zoals Git. Dit zorgt ervoor dat alleen goedgekeurde code wordt toegevoegd aan de codebase.
  • Continuous Integration (CI): Linting en formatting kunnen worden opgenomen in je CI/CD-pijplijn om ervoor te zorgen dat alle code die wordt samengevoegd aan de kwaliteitsnormen voldoet.

Voorbeelden​

Prettier​

Installatie (met npm):

npm install --save-dev --save-exact prettier

Voorbeeld configuratiebestand (.prettierrc.json)

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Voeg ook een .prettierignore toe om bestanden of mappen uit te sluiten van formatting.

Commando: (Let op: dit commando kan alle bestanden wijzigen)

npx prettier . --write

Meer documentatie: Prettier Docs

ESLint​

Installatie en configuratie (met npm):

npm init @eslint/config@latest

Voorbeeld configuratiebestand (eslint.config.js)

import { defineConfig } from "eslint/config";
import js from "@eslint/js";

export default defineConfig([
  { files: ["**/*.js"], plugins: { js }, extends: ["js/recommended"] },
  {
    rules: {
      "no-unused-vars": "warn",
      "no-undef": "warn",
    },
  },
]);

Commando: (Let op: --fix verbetert bestanden waar mogelijk)

npx eslint . --fix

Meer documentatie: ESLint Docs

Biome​

Installatie (met npm):

npm i -D -E @biomejs/biome

Voorbeeld configuratiebestand (biome.json), makkelijk te genereren met:

npx @biomejs/biome init
{
  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
  "formatter": {
    "enabled": false
  },
  "linter": {
    "enabled": false
  },
  "assist": {
    "enabled": false
  },
  "overrides": [
    {
      "includes": ["**/*.astro"],
      "linter": {
        "rules": {
          "style": {
            "useConst": "off",
            "useImportType": "off"
          },
          "correctness": {
            "noUnusedVariables": "off",
            "noUnusedImports": "off"
          }
        }
      }
    }
  ]
}

Commando:

npx biome check --write

Linting en formatting kunnen ook apart worden uitgevoerd met biome lint en biome format.

Meer documentatie: Biome Docs.

Integratie in de workflow​

Automatisch bij opslaan​

De meeste IDE’s, zoals VS Code, kunnen automatisch Prettier en ESLint of Biome draaien bij het opslaan van bestanden.

Pre-commit hooks​

Met Husky en lint-staged of Lefthook kun je pre-commit hooks instellen om formatting en linting uit te voeren voordat code wordt gecommit.

Voorbeeld met Biome in een Shell script

#!/bin/sh
set -eu

npx @biomejs/biome check --staged --files-ignore-unknown=true --no-errors-on-unmatched

Continuous Integration (CI)​

Je kunt linting en formatting opnemen in je CI/CD-pijplijn met tools zoals GitHub Actions, GitLab CI of Jenkins om ervoor te zorgen dat alle code die wordt samengevoegd aan de kwaliteitsnormen voldoet.

De Prettier GitHub Action werkt met de autofix.ci-app. Zie de Prettier CI-documentatie. Voor Biome is een first party GitHub Action beschikbaar, zie de Biome CI-documentatie.

Conclusie​

Wanneer elke ontwikkelaar werkt volgens dezelfde richtlijnen, verdwijnt veel van de frictie die normaal gesproken tijdens samenwerking of code reviews ontstaat. Teams hoeven minder tijd te besteden aan het bespreken van stijlverschillen en kunnen zich richten op inhoudelijke verbeteringen en architecturale beslissingen. Het resultaat is een stabielere codebase en een meer voorspelbare ontwikkelervaring. Door deze tools te integreren in je workflow, kun je de kwaliteit en consistentie van je code aanzienlijk verbeteren.

Biome: een eenvoudige setup en een tool met snelle performance​

Een tool zoals Biome die zowel formatting als linting combineert, kan de setup en het onderhoud van deze tools vereenvoudigen, waardoor teams sneller aan de slag kunnen met het handhaven van codekwaliteit.

Tip

Ga je linting en formatting tools gebruiken in een bestaand project? Waarschijnlijk zullen veel bestanden aangepast worden door de tools. Het is aan te raden om deze wijzigingen in een aparte commit te plaatsen, en deze te mergen op een moment dat er weinig actieve ontwikkeling plaatsvindt. Zo voorkom je dat er veel merge-conflicten ontstaan met andere lopende werkzaamheden.