Prettier to automatyczny formater kodu obsługujący m.in. JavaScript, TypeScript, CSS, HTML i JSON. Przepisuje kod według własnych, niewielu konfigurowalnych zasad, więc cały zespół otrzymuje identyczny wygląd plików bez dyskusji o wcięciach i cudzysłowach.
Jak działa Prettier?
Narzędzie parsuje kod do drzewa składniowego i generuje go ponownie według ustalonych reguł: szerokość linii, wcięcia, średniki czy rodzaj cudzysłowów. Nie zmienia działania programu, tylko jego wygląd.
Dlaczego warto z niego korzystać?
Usuwa spory o styl z przeglądów kodu, bo wygląd zapewnia narzędzie, a nie recenzent. Zmniejsza też liczbę zbędnych różnic w historii Gita, co ułatwia czytanie zmian. Formatowanie włącza się zwykle przy zapisie pliku w edytorze lub przed commitem.
Prettier a ESLint
Prettier formatuje, ESLint wykrywa błędy logiczne i niedobre praktyki. Oba działają obok siebie, a gotowe konfiguracje wyłączają reguły ESLint, które kolidowałyby z formatowaniem.
Wdrożenie w projekcie
Zainstaluj pakiet w projekcie, dodaj plik konfiguracyjny z kilkoma ustawieniami (szerokość linii, cudzysłowy) i skrypt do formatowania. Zautomatyzuj uruchamianie przy zapisie w edytorze oraz w hooku przed commitem, a w CI dodaj sprawdzenie formatu. Pliki generowane i katalogi zależności wyłącz plikiem .prettierignore.
Powiązane pojęcia
Wszystkie hasła z kategorii Programowanie i wzorce projektowe