Generator .eslintrc

Co zawiera wygenerowana konfiguracja

Generator zawsze zaczyna od eslint:recommended i dodaje dokładnie to, co wynika z Twoich wyborów:

• env z browser i/lub node, plus es2022
• @typescript-eslint/parser i plugin:@typescript-eslint/recommended, gdy TypeScript jest włączony
• plugin:react/recommended, gdy React jest włączony
• no-console i no-unused-vars ustawione na warn

Wynik to zwykły obiekt JSON w klasycznym formacie .eslintrc.json, gotowy do wklejenia i rozbudowy o własne reguły.

Konfiguracja flat a starsza

ESLint 9 wycofał format .eslintrc.* na rzecz konfiguracji flat (eslint.config.js). Kluczowe różnice:

Nowe projekty powinny używać konfiguracji flat. Istniejące projekty mogą pozostać na starszej przez linię 10.x, ale migracja jest zalecana.

Ekosystem wtyczek

Typowe wtyczki projektu React/TS:

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

To sześć pakietów dla jednej umiarkowanie opiniotwórczej konfiguracji. Generator dodaje te, które wybierzesz, więc instalujesz tylko to, na co powołuje się konfiguracja.

Współistnienie z Prettier

Prettier zajmuje się formatowaniem; ESLint poprawnością i stylem wykraczającym poza formatowanie. Aby uniknąć konfliktów:

1. Zainstaluj eslint-config-prettier i dodaj go jako OSTATNI element w extends/config.
2. Wyłącza on każdą regułę ESLint kolidującą z wynikiem Prettier.
3. Uruchamiaj Prettier osobno (przy zapisie w edytorze, w haku pre-commit, w CI).

Nie używaj eslint-plugin-prettier w nowych projektach; spowalnia ESLint, uruchamiając Prettier wewnątrz ESLint. Rozdziel oba narzędzia.

Wskazówki do dostrajania reguł

• Zacznij luźno, dokręcaj stopniowo. Włączaj ostrzeżenia przed błędami.
• Nadpisuj dla testów. Pliki testowe często potrzebują rozluźnionego no-unused-expressions i dostępnych globalnych Jest.
• Nadpisuj dla skryptów. Skrypty buildowe mogą potrzebować globalnych Node bez dodawania env: node globalnie.
• Dokumentuj nadpisania. Każde nadpisanie reguły zasługuje na komentarz wyjaśniający dlaczego.

Konfiguracja zgodna z twoim edytorem

VS Code wymaga zainstalowanego i skonfigurowanego rozszerzenia ESLint. Dodaj to do ustawień obszaru roboczego, aby uzyskać auto-naprawę przy zapisie:

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