Softonic

ESLintrc-generator

Steg 1 / 2
Nästa

Den här generatorn bygger en färdig .eslintrc.json-konfiguration utifrån fyra val: webbläsar- eller Node-miljö, TypeScript-stöd och React-stöd. Den kopplar ihop eslint:recommended, matchande TypeScript- eller React-plugins och ett par vettiga regelåsidosättningar, så att du kan klistra in resultatet i ditt projekt.

Så genererar du en ESLint-konfiguration

  1. 1

    Välj miljön

    Välj om koden körs i webbläsaren, i Node.js eller i båda. Generatorn sätter motsvarande `env`-poster, plus `es2022`.

  2. 2

    Aktivera TypeScript

    Bocka i TypeScript så lägger generatorn till `@typescript-eslint/parser` och den rekommenderade TypeScript-pluginen.

  3. 3

    Aktivera React

    Bocka i React så lägger generatorn till `eslint-plugin-react` med dess rekommenderade förinställning.

  4. 4

    Generera

    Klicka på knappen så byggs konfigurationen som prydligt formaterad JSON.

  5. 5

    Kopiera in i ditt projekt

    Klistra in resultatet i `.eslintrc.json` och installera de plugins konfigurationen refererar till.

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:

Aspekt Äldre (.eslintrc) Flat (eslint.config.js)
Format JSON, YAML eller CommonJS ESM- eller CommonJS-JavaScript-modul
Ärver extends: ["plugin:react/recommended"] Spridd i array: ...reactPlugin.configs.recommended
Åsidosättningar overrides-array med glob-mönster Flera objekt i den exporterade arrayen
Globala variabler env: { browser: true } languageOptions.globals med explicita importer
Ignorering .eslintignore-fil ignores-fält i konfigurationsarrayen

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"]
}

Vanliga frågor

För nya projekt, flat-konfigurationen (eslint.config.js). Den här generatorn skapar det klassiska .eslintrc.json-formatet, som ESLint läser direkt i legacy-läge; jämförelsetabellen ovan visar vad som ändras om du migrerar senare.

Ja, om du använder TypeScript. @typescript-eslint/parser och @typescript-eslint/eslint-plugin möjliggör TypeScript-medveten linting. För typmedvetna regler (inte bara syntax), konfigurera även tolken med project: './tsconfig.json'.

Vanligtvis saknade dev-beroenden i CI. Se till att @typescript-eslint/*, plugins och ESLint-versionen matchar mellan lokalt och CI. Använd npm ci (inte npm install) i CI för att respektera lockfilen.

Nej. Dina val används bara för att generera konfigurationen; de sparas inte och delas inte med tredje part.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Verktyget finns på andra språk