tsconfig.json bez ściągawki na drugim monitorze
Każdy projekt TypeScripta zaczyna się od tsconfig.json, a każdy developer kiedyś skopiował go z losowej odpowiedzi na Stack Overflow, żeby dwa dni później dostać błąd buildu. Opcji kompilatora jest około 150, a dokumentacja czyta się jak zeznanie podatkowe.
Ten kreator pozwala zacząć od presetu, który odpowiada oficjalnemu szablonowi Twojego stacka: Next.js, Vite (React), biblioteka npm do publikacji albo Node API. Każda opcja to Switch lub lista z podpowiedzią po polsku, która tłumaczy co naprawdę robi, a nie tylko jak się nazywa.
Panel podglądu po prawej pokazuje gotowy JSON, gotowy do skopiowania albo pobrania. Klikasz jeden przełącznik i w tej samej sekundzie widzisz, co zmieniło się w pliku. Bez zgadywania, bez "czy zapisałem?", bez drugiej karty z dokumentacją.
Jak używać
- Wybierz preset dla Twojego projektu. Next.js dla typowej aplikacji Next 14+, Vite (React) dla nowoczesnego Vite, biblioteka npm jeśli publikujesz paczkę, Node API dla zwykłego backendu. Własny jeśli chcesz zacząć od zera.
- Przejrzyj sekcję Podstawy: target, module, moduleResolution i strict. Te cztery odpowiadają za 80% tsconfig. Podpowiedź pod każdą mówi, kiedy co wybrać.
- Jeśli strict jest włączony, otwiera się sekcja Tryb ścisły z siedmioma dodatkami. Każdy łapie inną kategorię błędów. Podpowiedź mówi, jakie konkretnie.
- W Moduły i import włącz esModuleInterop (prawie zawsze), resolveJsonModule jeśli importujesz pliki `.json` i forceConsistentCasingInFileNames w zespołach pracujących na macOS i Linuksie.
- W Pliki wynikowe ustaw outDir (gdzie ląduje skompilowany JS) i włącz declaration jeśli wysyłasz pliki typów, sourceMap dla debugowania w przeglądarce, incremental dla szybszych rebuildów.
- W JSX wybierz react-jsx dla Reacta 17+, preserve kiedy bundler obsługuje JSX (Next, Vite). Zostaw `(brak)` dla backendu.
- W Aliasy ścieżek ustaw baseUrl (zwykle `.`) i dodaj aliasy w stylu `@/*` → `./src/*`. Dodaj alias dodaje wiersz, X go usuwa.
- Po prawej podgląd tsconfig.json odświeża się na żywo. Kopiuj wrzuca plik do schowka, Pobierz zapisuje go jako prawdziwy `tsconfig.json`.
Kiedy się przydaje
Sześć realnych sytuacji, w których kreator wygrywa z ręcznym pisaniem:
- Zaczynasz nowy projekt. Chcesz config, który po prostu działa, bez godziny w dokumentacji. Wybierasz preset, kopiujesz wynik, w 60 sekund jest gotowe.
- Migrujesz projekt do trybu ścisłego. Twoja baza kodu siedzi na `strict: false` i chcesz włączać reguły po jednej. Klikasz Switche, widzisz JSON, wklejasz do repo.
- Publikujesz pierwszy pakiet npm. Potrzebujesz `declaration: true`, `isolatedModules`, `outDir`, bez DOM w lib. Preset biblioteka npm robi to za Ciebie, bez sprawdzania czy o czymś nie zapomniałeś.
- Dodajesz aliasy ścieżek. Chcesz `@/components/Button` zamiast `../../../components/Button`. Kreator pokazuje, jak powinien wyglądać obiekt paths, bez przypominania sobie czy to tablica czy obiekt.
- Porównujesz presety. Nie wiesz, czy Twój stack powinien używać NodeNext czy Bundler w moduleResolution. Klikasz między presetami i widzisz różnicę w JSON.
- Onboardujesz juniora. Każda opcja ma podpowiedź, więc początkujący przeczyta co naprawdę robi noUncheckedIndexedAccess, zamiast wpatrywać się w dokumentację.