ESLintrc-generator

Vad den genererade konfigurationen innehåller

Generatorn utgår alltid från eslint:recommended och lägger till exakt det dina val innebär:

• env med browser och/eller node, plus es2022
• @typescript-eslint/parser och plugin:@typescript-eslint/recommended när TypeScript är på
• plugin:react/recommended när React är på
• no-console och no-unused-vars satta till warn

Resultatet är ett enkelt JSON-objekt i klassisk .eslintrc.json-form, redo att klistra in och utöka med egna regler.

Flat-konfiguration kontra äldre

ESLint 9 fasade ut formatet .eslintrc.* till förmån för flat-konfigurationen (eslint.config.js). Viktiga skillnader:

Nya projekt bör använda flat-konfigurationen. Befintliga projekt kan stanna på äldre genom 10.x-linjen, men migrering rekommenderas.

Plugin-ekosystemet

Typiska plugins för ett React/TS-projekt:

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

Det är sex paket för en måttligt åsiktsstark uppsättning. Generatorn lägger till de du väljer, så du installerar bara det konfigurationen refererar till.

Samexistens med Prettier

Prettier hanterar formatering; ESLint hanterar korrekthet och stil bortom formatering. För att undvika konflikter:

1. Installera eslint-config-prettier och lägg till den som det SISTA objektet i din extends/konfiguration.
2. Den stänger av varje ESLint-regel som står i konflikt med Prettiers utdata.
3. Kör Prettier separat (vid spara i editorn, i pre-commit-hook, i CI).

Använd inte eslint-plugin-prettier i nya projekt; det saktar ner ESLint genom att köra Prettier inuti ESLint. Håll de två verktygen åtskilda.

Tips för regeljustering

• Börja löst, dra åt hårdare. Aktivera varningar före fel.
• Åsidosätt för tester. Testfiler behöver ofta no-unused-expressions uppmjukad och Jest-globaler tillgängliga.
• Åsidosätt för skript. Byggskript kan behöva Node-globaler utan att lägga till env: node globalt.
• Dokumentera åsidosättningar. Varje regelåsidosättning förtjänar en kommentar som förklarar varför.

Konfiguration som matchar din editor

VS Code behöver ESLint-tillägget installerat och konfigurerat. Lägg till dessa i dina workspace-inställningar för autofix vid spara:

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