Prettier – co to jest i dlaczego warto go używać?
Prettier to narzędzie do automatycznego formatowania kodu, które zdobyło ogromną popularność wśród programistów na całym świecie. Jego głównym zadaniem jest nadanie kodowi spójnego wyglądu, niezależnie od tego, kto go pisał. To nie tylko oszczędność czasu, ale przede wszystkim porządek i estetyka, która poprawia czytelność kodu.
Łukasz
Czym jest Prettier i jak działa?
Nazywany jest „opinionated code formatter„, ponieważ nie pozwala na dowolną konfigurację stylu kodu. Zamiast tego narzuca własne zasady formatowania, co eliminuje wieczne dyskusje w zespołach na temat tego, czy klamerka powinna być w tej czy innej linii. Działa według prostego schematu: analizuje kod źródłowy, tworzy jego abstrakcyjne drzewo składniowe (AST), a następnie generuje z niego nowy kod zgodnie z wbudowanymi regułami.
Prettier wspiera wiele języków programowania, co czyni go wszechstronnym narzędziem. Obsługuje m.in. JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML i wiele innych. To oznacza, że możesz używać go w różnych projektach, niezależnie od stosowanych technologii.
Główną jego zaletą jest też jego prostota. Narzędzie wymaga minimalnej konfiguracji i świetnie nadaje się do użytku zaraz po instalacji. Mimo to oferuje kilka opcji dostosowania, które można określić w pliku konfiguracyjnym projektu.
Dlaczego warto korzystać z Prettiera?
Największą zaletą stosowania Prettiera jest spójność kodu. Gdy cały zespół programistów korzysta z tego samego narzędzia do formatowania, kod wygląda tak samo niezależnie od tego, kto go napisał. To ułatwia przeglądy kodu, zmniejsza ryzyko błędów i pozwala szybciej odnaleźć się w plikach.
Korzystanie z Prettiera znacznąco podnosi produktywność. Zamiast tracić czas na poprawianie wcięć, spacji i klamerek, programista może skupić się na pisaniu logiki aplikacji. Prettier sam zadba o to, żeby kod był odpowiednio sformatowany.
Narzędzie poprawia też czytelność kodu. Dzięki automatycznemu zawijaniu długich linii, prawidłowemu rozmieszczaniu przecinków czy uporządkowanemu układowi bloków kodu, pliki stają się znacznie łatwiejsze do zrozumienia. To ogromna zaleta zwłaszcza przy pracy nad dużymi projektami lub kodzie legacy.
Dodatkowo Prettier pozwala uniknąć wielu niepotrzebnych dyskusji. Nie trzeba już debatować nad tym, czy używać pojedynczych czy podwójnych cudzysłowów, bo Prettier sam zdecyduje za programistę i konsekwentnie zastosuje wybraną konwencję w całym kodzie.
Instalacja i konfiguracja Prettiera
Aby korzystać z Prettiera, wystarczy zainstalować rozszerzenie „Prettier – Code formatter” w Visual Studio Code. Warto upewnić się, że wybiera się oficjalne rozszerzenie od zespołu Prettier. Po instalacji narzędzie można skonfigurować jako domyślny formater w ustawieniach edytora.
Prettiera można używać zarówno ręcznie, jak i automatycznie. Formatowanie ręczne polega na uruchomieniu komendy „Format Document” z palety poleceń (Ctrl+Shift+P). Aby automatyzować ten proces, wystarczy włączyć opcję „Format on Save”. Od tego momentu każdy zapis pliku automatycznie uruchomi Prettiera.
Jeśli pracujesz nad wieloma projektami, możesz skonfigurować Prettiera globalnie lub indywidualnie dla każdej przestrzeni roboczej. To pozwala na elastyczne dopasowanie ustawień do potrzeb konkretnego projektu.
W pliku konfiguracyjnym można określić m.in. maksymalną długość linii (printWidth), preferencję dotyczącą cudzysłowów (singleQuote) czy obecność przecinka na końcu list (trailingComma). Te ustawienia pozwalają zachować spójność przy jednoczesnej możliwości drobnych modyfikacji.
Integracja Prettiera z edytorami i narzędziami developerskimi
Najczęściej Prettiera uciej Prettiera używa się w Visual Studio Code, ale obsługuje on również inne popularne edytory, takie jak Atom, Sublime Text czy WebStorm. W każdym z nich działa podobnie i daje możliwość automatycznego formatowania kodu.
Co ważne, Prettier ne, Prettier świetnie współpracuje z narzędziami CI/CD. Można go uruchamiać jako część procesu budowania aplikacji lub w ramach tzw. pre-commit hook, co zapewnia, że żaden niepoprawnie sformatowany kod nie trafi do repozytorium.
Integracja z Git może być banalna. Wystarczy dodać Prettiera do konfiguracji narzędzia Husky lub lint-staged i już przy każdym commicie kod zostanie automatycznie sprawdzony i sformatowany.
Dla zespołów to ogromna wartość dodana. Dzięki Prettierowi standard formatowania staje się częścią procesu deweloperskiego, co skutecznie zapobiega chaosowi i niepotrzebnym zmianom stylistycznym w historii gita.
Najczęstsze pytania dotyczące Prettiera (FAQ)
Nie do końca. Choć oba narzędzia mogą dotyczyć stylu kodu, to Prettier zajmuje się wyłącznie jego wyglądem, natomiast ESLint służy do wykrywania potencjalnych błędów i problemów logicznych. W praktyce wiele zespołów korzysta z obu narzędzi równocześnie.
W takim przypadku warto przejrzeć plik konfiguracyjny i dostosować ustawienia. Można też lokalnie wyłączyć Prettiera dla wybranego fragmentu kodu, np. przez dodanie komentarza // prettier-ignore.
Tak, to jedna z jego zalet. Formatowanie dotyczy nie tylko kodu JS czy CSS, ale też plików tekstowych używanych w dokumentacji, co pozwala zachować estetyczny wygląd całego repozytorium.
Jak najbardziej. Nawet przy jednoosobowym zespole pozwala zachować porządek i szybko przywrócić czytelność kodu po wielu modyfikacjach.
Podsumowanie – czy warto używać Prettiera?
Uproszczenie procesu formatowania, oszczędność czasu, lepsza czytelność i zgodność w zespole to tylko kilka z wielu korzyści.
To narzędzie, które działa praktycznie od razu po instalacji, a jego integracja z edytorami i systemami CI czyni go nieodłącznym elementem współczesnego workflow deweloperskiego.
Bez względu na to, czy tworzysz rozbudowaną aplikację, czy prostą stronę HTML, Prettier zadba o to, aby Twój kod zawsze wyglądał profesjonalnie.
