ESLintrc-generator

Wat de gegenereerde configuratie bevat

De generator start altijd vanuit eslint:recommended en voegt precies toe wat uw keuzes inhouden:

• env met browser en/of node, plus es2022
• @typescript-eslint/parser en plugin:@typescript-eslint/recommended wanneer TypeScript aan staat
• plugin:react/recommended wanneer React aan staat
• no-console en no-unused-vars ingesteld op warn

De uitvoer is een eenvoudig JSON-object in de klassieke .eslintrc.json-vorm, klaar om te plakken en uit te breiden met uw eigen regels.

Flat-config versus legacy

ESLint 9 heeft het .eslintrc.*-formaat afgeschaft ten gunste van de vlakke configuratie (eslint.config.js). Belangrijke verschillen:

Nieuwe projecten zouden de vlakke configuratie moeten gebruiken. Bestaande projecten kunnen tot en met de 10.x-lijn op legacy blijven, maar migratie wordt aanbevolen.

Plugin-ecosysteem

Typische plugins voor een React/TS-project:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Dat zijn zes pakketten voor een gematigd uitgesproken configuratie. De generator voegt de plugins toe die u selecteert, dus u installeert alleen waar de configuratie naar verwijst.

Samenleven met Prettier

Prettier verzorgt de opmaak; ESLint zorgt voor correctheid en stijl buiten de opmaak om. Om conflicten te voorkomen:

1. Installeer eslint-config-prettier en voeg deze toe als het laatste item in uw extends/config.
2. Het schakelt alle ESLint-regels uit die in conflict zijn met de uitvoer van Prettier.
3. Voer Prettier apart uit (bij het opslaan in de editor, tijdens de pre-commit-fase of in het CI-proces).

Gebruik eslint-plugin-prettier niet in nieuwe projecten, omdat dit ESLint vertraagt doordat Prettier binnen ESLint wordt uitgevoerd. Gebruik beide tools apart.

Tips voor het afstellen van regels

• Begin los, draai geleidelijk strakker aan. Schakel waarschuwingen in vóór fouten.
• Override voor tests. Testbestanden hebben vaak een versoepelde no-unused-expressions en beschikbare Jest-globals nodig.
• Override voor scripts. Buildscripts hebben mogelijk Node-globals nodig zonder env: node globaal toe te voegen.
• Documenteer overrides. Elke regel-override verdient een commentaar dat uitlegt waarom.

Configuratie die past bij uw editor

VS Code vereist de ESLint-extensie geïnstalleerd en geconfigureerd. Voeg deze toe aan uw werkruimte-instellingen voor automatische correcties bij het opslaan van bestanden.

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}