Code Formatter (Prettier) — Formater kodu

Co robi ten formater kodu

To narzędzie uruchamia bezpośrednio w przeglądarce Prettiera – formater kodu o z góry ustalonym stylu, z którego korzysta duża część ekosystemu JavaScript. Prettier nie ogranicza się do poprawiania wcięć: parsuje kod źródłowy do drzewa składniowego, a następnie drukuje go od nowa według niewielkiego zestawu reguł. Dlatego wynik jest spójny niezależnie od tego, jak nieuporządkowane było wejście – długie listy argumentów są zawijane, obiekty dzielone są na wiele linii tylko wtedy, gdy przekraczają szerokość wydruku, cudzysłowy i średniki trzymają się jednej konwencji, a końcowe spacje znikają.

Możesz formatować JavaScript, JSX, TypeScript i TSX, trzy główne dialekty arkuszy stylów (CSS, SCSS i Less), HTML z osadzonymi stylami i skryptami, JSON, schematy i zapytania GraphQL, dokumenty Markdown oraz pliki konfiguracyjne YAML. Każdy język korzysta z własnej wtyczki Prettiera, a ładowana jest tylko ta, której potrzebujesz, więc strona pozostaje lekka, dopóki faktycznie czegoś nie sformatujesz.

Opcje w skrócie

Print width (szerokość wydruku) to długość linii, której Prettier stara się nie przekraczać; domyślnie wynosi 80, a w zespołach z szerokimi monitorami często stosuje się 100 lub 120. Tab width określa, ile spacji zajmuje jeden poziom wcięcia, a Indent with przełącza między spacjami a prawdziwymi znakami tabulacji. Semicolons decyduje, czy instrukcje w JavaScripcie i TypeScripcie kończą się średnikiem; gdy opcja jest wyłączona, Prettier dodaje go tylko tam, gdzie jest to konieczne, by uniknąć niejednoznaczności. Single quotes preferuje ' zamiast " w łańcuchach znaków, o ile nie wymaga to dodatkowego escapowania. Opcje te odpowiadają jeden do jednego ustawieniom w pliku .prettierrc, dzięki czemu możesz odwzorować konfigurację swojego projektu.

Prywatnie i praktycznie

Wszystko dzieje się lokalnie: formater nigdy nie wysyła Twojego kodu, nie zapisuje go ani nie przekazuje do żadnego API. Dzięki temu można go bezpiecznie używać z kodem objętym tajemnicą firmy, plikami konfiguracyjnymi zawierającymi wewnętrzne nazwy hostów czy fragmentami skopiowanymi podczas incydentu na produkcji. Gdy parser napotka błąd składni, komunikat pokazuje wiersz i kolumnę, a kursor przeskakuje w to miejsce danych wejściowych – to szybki sposób na znalezienie brakującego nawiasu w dużym pliku JSON lub YAML. Na co dzień trzymaj Prettiera w edytorze i w CI; z tej strony korzystaj, gdy pracujesz na komputerze bez swoich narzędzi, przeglądasz fragment kodu z czatu lub porządkujesz kod przed wklejeniem go do dokumentacji.