Linting en code formatting
In ons design system gebruiken we tools voor linting en code formatting om consistente en leesbare code te garanderen. Dit helpt bij samenwerken om:
- kwaliteitsproblemen vroeg te signaleren;
- code reviews te versnellen (geen discussie over spaties en tabs);
- verschillen tussen persoonlijke voorkeuren van ontwikkelaars en IDE-instellingen te minimaliseren.
De tools vullen elkaar aan:
- Linting bewaakt kwaliteit. Deze tools controleren code op mogelijke fouten, anti‑patterns en overtredingen van afgesproken regels. Bijvoorbeeld: ongebruikte variabelen, incorrecte afhankelijkheden.
- Formatting is voor consistentie. Code wordt automatisch opgemaakt, zonder de code inhoudelijk te beoordelen. Bijvoorbeeld: voorspelbare inspringing, quotes en regellengte.
Gebruikte tooling
Hier sommen we op welke tooling we gebruiken en hoe het wordt gebruikt.
ESLint
ESLint wordt gebruikt voor het linten van JavaScript/TypeScript code. Het detecteert fouten en ongewenste patronen. Het kan framework-specifieke (bijvoorbeeld React) regels toepassen.
- Geconfigureerd in
eslint.config.mjs(voorbeeld) - Uitvoeren met
pnpm lint:js
Stylelint
Stylelint wordt gebruikt voor het linten van CSS en Sass (SCSS).
- Geconfigureerd in
.stylelintrc.json(voorbeeld) - Uitvoeren met
pnpm lint:css
Prettier
Prettier wordt gebruikt voor het formatteren van code. Het wordt niet alleen toegepast op JavaScript en TypeScript, maar ook YAML en Markdown.
- Geconfigureerd in
prettier.config.mjs(voorbeeld) - Uitvoeren met
pnpm lint:prettier
markdownlint
markdownlint wordt gebruikt om Markdown-bestanden te controleren, bijvoorbeeld op headings, witruimte of het ontbreken van alt-teksten op plaatjes.
- Geconfigureerd in
.markdownlint.json(voorbeeld) - Uitvoeren met
pnpm lint:md
npm-package-json-lint
Met npm-package-json-lint wordt de package.json gecontroleerd, bijvoorbeeld op het bestaan van een author.
Voor NL Design System wordt onder andere bijgehouden dat de licentie op EUPL staat.
- Geconfigureerd in
npmpackagejsonlint.config.cjs(voorbeeld) - Uitvoeren met
pnpm lint:package-json
Automatisering
Automatisering met husky en lint-staged {#lint-staged}
We gebruiken husky in combinatie met lint‑staged om deze checks uit te voeren vóórdat code wordt gecommit.
- Husky beheert Git hooks, waarmee je een commando kunt uitvoeren vóór committen
- lint‑staged is dat commando en voert linting en code formatting alleen uit op gewijzigde bestanden
Het voordeel hiervan is dat je niet hoeft te herinneren om de check uit te voeren, je snelle feedback krijgt (in plaats van pas in CI), en dat er geen checks op ongewijzigde code worden gedaan.
Daar waar mogelijk, wordt gebruik gemaakt van functionaliteit om automatisch problemen op te lossen.
:::info[Goed om te weten]
Om veiligheidsredenen worden dependencies in de NL Design System repositories geïnstalleerd met --ignore-scripts, waardoor Husky niet compleet wordt geïnstalleerd.
Dit is snel opgelost: voer éénmalig pnpm prepare uit.
:::
IDE-instellingen
Voor een optimale developerervaring:
- Schakel format on save in en configureer het om Prettier uit te voeren
- Gebruik dezelfde Node.js‑versie als het project
- Zorg dat de lokale Prettier config wordt gebruikt
Voorbeeld en referentie
Een volledig voorbeeld van de configuratie en best practices wordt onderhouden in de example repository.
Deze repo dient als referentie‑implementatie, startpunt voor nieuwe projecten en bron voor updates aan lint‑ en formatregels. Gebruik deze altijd als leidraad bij wijzigingen of nieuwe setups.