Generator konfiguracji ESLint

Generator konfiguracji ESLint w formacie flat config

Generator konfiguracji ESLint przygotowuje czytelny plik eslint.config.js dla współczesnego stosu JavaScript. Wybierasz język, framework, dostępne globalne obiekty i integrację z Prettier, a narzędzie składa importy oraz konfiguracje w poprawnej kolejności. Wynik jest tekstem do świadomego przeglądu — generator niczego nie instaluje i nie wykonuje kodu projektu.

Dlaczego flat config zastępuje .eslintrc

Flat config jest natywnym formatem ESLint 9. Zamiast ukrytego łańcucha extends eksportuje tablicę zwykłych obiektów JavaScript. Kolejność ma znaczenie: późniejsze wpisy mogą uzupełniać albo wyłączać wcześniejsze reguły. Dzięki temu w jednym pliku widać zakres plików, parser, pluginy, globalne zmienne oraz wyjątki. Konfiguracja jest łatwiejsza do debugowania, ale wymaga pakietów zgodnych z interfejsem flat.

Środowiska browser i Node.js

ESLint powinien znać tylko globalne obiekty rzeczywiście dostępne w uruchamianym kodzie. Zaznaczenie przeglądarki dodaje między innymi window i document, a Node.js udostępnia globalne nazwy środowiska serwerowego. Dla projektu full-stack można włączyć oba zestawy, jednak precyzyjniejsze repozytoria często stosują osobne obiekty konfiguracji dla katalogów klienta i serwera.

Generator wymaga co najmniej jednego środowiska, aby nie tworzyć pozornie kompletnego pliku bez kontekstu wykonania. To bezpieczny punkt startowy, nie zamiennik analizy architektury. Dla testów dodaj później globals właściwe dla używanego runnera. Reguły ignorowania artefaktów i zależności warto utrzymać także w generatorze .gitignore.

TypeScript, React i Vue bez zbędnych rozszerzeń

Zakres files powstaje z wybranych technologii. Czysty JavaScript nie otrzymuje przypadkiem rozszerzeń Vue ani TSX. React dodaje JSX, a w wariancie TypeScript także TSX. Konfiguracje pluginów React i React Hooks używają wariantów flat; ustawienie wersji React na detect pozwala pluginowi odczytać wersję z projektu.

Dla Vue ładowany jest rekomendowany zestaw flat. Jeżeli wybrano TypeScript, osobny wpis wskazuje parser TypeScript dla zawartości bloków skryptowych komponentów SFC. Rozbudowany projekt może nadal potrzebować ustawień projektu, resolvera importów, aliasów albo reguł typowanych wymagających tsconfig.json. Tych decyzji nie należy zgadywać automatycznie.

Prettier i odpowiedzialność za formatowanie

eslint-config-prettier nie uruchamia Prettier i nie poprawia kodu. Jego zadaniem jest wyłączenie reguł stylistycznych, które mogłyby konfliktować z formatterem. Dlatego wpis znajduje się na końcu tablicy. Samo formatowanie uruchamiaj osobnym poleceniem i osobno kontroluj wynik w CI. Pozwala to odróżnić błędy jakości kodu od różnic w odstępach lub łamaniu wierszy.

Spójne ustawienia wcięć, końców linii i kodowania możesz przekazać zespołowi przez generator .editorconfig. EditorConfig, Prettier i ESLint mają inne role: pierwszy opisuje podstawowe zachowanie edytora, drugi formatuje, a trzeci analizuje składnię i reguły programu.

Instalacja pakietów i kontrola wyniku

1. Wybierz JavaScript albo TypeScript oraz framework używany w repozytorium.
2. Zaznacz środowiska, w których kod naprawdę się wykonuje, i zdecyduj o integracji z Prettier.
3. Skopiuj wynik do pliku eslint.config.js w katalogu głównym projektu.
4. Zainstaluj dokładnie pakiety widoczne w importach jako zależności deweloperskie.
5. Uruchom npx eslint ., przejrzyj każdy błąd i dopiero potem dodawaj wyjątki.

W automatyzacji uruchamiaj lint na czystej instalacji zależności i zwracaj niezerowy kod przy błędach. Gotowy krok można osadzić w procesie zbudowanym przez generator GitHub Actions. Nie używaj automatycznego --fix na nieprzejrzanym kodzie produkcyjnym, ponieważ część napraw może zmienić zachowanie programu.

Bezpieczeństwo wygenerowanej konfiguracji

Opcje języka i frameworka są ograniczone do znanych wartości, a generator nie przyjmuje dowolnych importów ani fragmentów JavaScript. Dzięki temu zmodyfikowane żądanie Livewire nie może dopisać instrukcji do wyniku. Plik konfiguracyjny jest jednak kodem wykonywanym przez Node.js: przed użyciem sprawdź nazwy pakietów, blokadę wersji i źródło każdej zależności.

Aktualizacje pluginów mogą zmieniać dostępne presety. Po zmianie głównej wersji ESLint wykonaj lint lokalnie i w CI, a komunikaty migracyjne potraktuj jako część aktualizacji. Generator daje konserwatywną bazę; reguły domenowe, granice modułów i wyjątki dla plików generowanych powinny wynikać z repozytorium.

Najczęściej zadawane pytania