Wat is een linter? ESLint begrijpen en waarom het belangrijk is voor schone code

Wanneer meerdere ontwikkelaars aan dezelfde codebase werken, kunnen inconsistenties in stijl en verborgen fouten zich snel opstapelen.
Daar komen linters van pas: ze controleren je code automatisch op mogelijke problemen en dwingen een consistente stijl af binnen je project.

In dit artikel onderzoeken we wat een linter is, waarom je er een zou moeten gebruiken en waarom ESLint de aangewezen tool is geworden in het JavaScript- en TypeScript-ecosysteem.

Wat linters detecteren

Een linter analyseert je code en detecteert verschillende categorieën problemen voordat ze bugs of inconsistenties veroorzaken.

• Syntaxisfouten → Problemen die code ongeldig of onuitvoerbaar maken. Voorbeelden:

  • Ontbrekende ronde of vierkante haakjes → if (user.isLoggedIn {
  • Niet-afgesloten tekenreeksen → console.log("Hello)
  • Verkeerd geplaatste of ontbrekende return-instructies.

• Problemen met codekwaliteit → Patronen die de syntaxis niet breken, maar tot runtimefouten of verwarring kunnen leiden. Voorbeelden:

  • Ongebruikte variabelen → const result = computeValue(); declareren maar result nooit gebruiken.
  • Onbereikbare code → Instructies na een return plaatsen.
  • Overschaduwde variabelen → Een variabelenaam uit een bovenliggende scope opnieuw gebruiken.

• Inconsistenties in stijl → Verschillen in opmaak en stijl die code moeilijker leesbaar maken. Voorbeelden:

  • Ontbrekende puntkomma's of inconsistente inspringing.
  • "double quotes" in het ene bestand en 'single quotes' in een ander gebruiken.
  • Tabs en spaties mengen voor inspringing.

• Schendingen van best practices → Code die technisch werkt, maar tegen aanbevolen patronen ingaat. Voorbeelden:

  • Verouderde API's gebruiken (bijvoorbeeld ReactDOM.render() in React 18).
  • var gebruiken in plaats van let of const.
  • Asynchrone functies aanroepen zonder await.
  • == gebruiken in plaats van ===, wat subtiele bugs door typeconversie kan veroorzaken.

Linters zoals ESLint doen meer dan fouten opsporen: ze dwingen conventies af en voorkomen dat slechte gewoonten ooit in je repository terechtkomen.

Waarom een linter gebruiken?

1. Fouten vroeg opsporen

Linters detecteren problemen voordat je app zelfs maar draait.
ESLint kan je bijvoorbeeld waarschuwen voor een ongedefinieerde variabele of een ontbrekende await in een asynchrone functie, waardoor je later tijd bespaart bij het opsporen van fouten.

2. Consistentie waarborgen

Een linter dwingt een uniforme codeerstijl af binnen je team en voorkomt onnodige discussies over tabs versus spaties of de plaatsing van komma's.

3. Codekwaliteit verbeteren

Linters stimuleren schonere, beter onderhoudbare code door te waarschuwen voor complexe of riskante patronen (zoals diep geneste callbacks of ongebruikte imports).

4. Integreren in je workflow

Ze draaien automatisch in je IDE, tijdens commits (via pre-commithooks zoals Husky) of in CI/CD-pijplijnen en houden je codebase bij elke stap schoon.

Aandacht voor ESLint: de standaard voor JavaScript en TypeScript

ESLint is de populairste linter in het JavaScript-ecosysteem en wordt veel gebruikt voor React-, Node.js- en TypeScript-projecten.

🔧 Belangrijkste functies

• Uitgebreid configureerbaar → Pas elke regel aan je stijl aan.
• Pluginecosysteem → Breid uit met communityplugins (bijvoorbeeld React, Jest, beveiliging, toegankelijkheid).
• TypeScript-ondersteuning → Volledige integratie via @typescript-eslint.
• Automatisch herstelbare regels → Veel problemen kunnen automatisch worden opgelost met:
  Code kopiëren

  npx eslint . --fix
  

• Integraties → Werkt met VS Code, WebStorm, GitHub Actions en vrijwel elk CI-systeem.

ESLint configureren

Je kunt ESLint in je project instellen met:

npx eslint --init

Als je ESLint v8.23 of hoger gebruikt, maakt deze opdracht een Flat Config-bestand met de naam eslint.config.mjs (in plaats van het oudere .eslintrc.json-formaat). Dit moderne formaat gebruikt JavaScript-modules en biedt betere prestaties en duidelijkheid.

Hier is een eenvoudige voorbeeldconfiguratie die je zou kunnen gebruiken in een Next.js + TypeScript-project:

// eslint.config.mjs
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({ baseDirectory: import.meta.dirname })

export default [
  js.configs.recommended, // Core JavaScript best practices
  ...tseslint.configs.recommended, // TypeScript-specific linting
  ...compat.extends('next/core-web-vitals'), // Next.js and React recommendations
  prettier, // Avoid rule conflicts with Prettier
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      '@typescript-eslint/no-unused-vars': [
        'warn',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
      ],
      semi: ['error', 'always'],
    },
  },
]

Uitleg

Laten we bekijken wat er gebeurt:

js.configs.recommended

Laadt de aanbevolen kernregels van ESLint voor algemene JavaScript-problemen, zoals:

• Ongebruikte variabelen
• Onbereikbare code
• Ontbrekende return-instructies
• Syntaxisfouten

tseslint.configs.recommended

Voegt regels met TypeScript-kennis toe die bijvoorbeeld het volgende opsporen:

• Ongebruikte imports
• Onjuist gebruik van typen
• Variabelen die in .ts/.tsx-bestanden zijn gedeclareerd maar nooit worden gebruikt

compat.extends('next/core-web-vitals')

Past Next.js- en React-regels toe, waaronder:

• Best practices voor toegankelijkheid (a11y)
• Controles op het gebruik van React Hooks
• Waarschuwingen voor prestatieproblemen (zoals <img> gebruiken in plaats van <Image>)

prettier

Schakelt opmaakgerelateerde lintregels uit die anders conflicteren met Prettier.

rules

Aangepaste instellingen voor het project:

• 'no-console': ['warn'] → staat console.warn en console.error toe, maar waarschuwt voor andere console-aanroepen.
• '@typescript-eslint/no-unused-vars' → waarschuwt voor variabelen of parameters die wel zijn gedeclareerd maar niet worden gebruikt (negeert namen die beginnen met _).
• 'semi': ['error', 'always'] → dwingt het gebruik van puntkomma's af.

Deze configuratie biedt:

• Betrouwbare linting voor JavaScript + TypeScript
• Ingebouwde best practices voor Next.js
• Automatische compatibiliteit met Prettier
• Eenvoudige, duidelijke regels die je codebase consistent, leesbaar en vrij van bugs maken

Zodra dit bestand aanwezig is, kun je je project linten met:

npm run lint

of automatisch herstelbare problemen oplossen met:

npm run lint -- --fix

ESLint versus andere linters

Sinds TSlint officieel verouderd is verklaard ten gunste van ESLint, gebruiken tegenwoordig vrijwel alle moderne JavaScript- en TypeScript-projecten ESLint.

Best practices voor het gebruik van ESLint

• Combineer ESLint met Prettier voor automatische codeopmaak.
• Voeg ESLint-controles toe aan je Git-pre-commithooks met Husky of lint-staged.
• Voer het uit in je CI-pijplijn om codekwaliteit af te dwingen in pull requests.
• Je kunt aanbevolen pakketten gebruiken zoals eslint-config-airbnb of eslint-plugin-react

Conclusie

Linters zijn essentieel om codebases schoon, consistent en vrij van fouten te houden, vooral in samenwerkingsprojecten. Daarbij onderscheidt ESLint zich als de meest flexibele en krachtige tool voor JavaScript- en TypeScript-ontwikkelaars.

Of je alleen werkt of in een groot team, door ESLint aan je workflow toe te voegen, blijft je code op de lange termijn professioneel, leesbaar en onderhoudbaar.

Wil je ESLint in actie zien? Bekijk de officiële documentatie of voeg het aan je project toe met npx eslint --init.