Jedna z rzeczy która potrafi zająć czas podczas programowania to kijowe formatowanie. Każdy ma swój ulubiony styl, niektórzy wolą spacje nad tabulacją, natomiast inni wolą podwójny cudzysłów od pojedynczego. Ale pracując razem w projekcie warto wystosować wspólny styl i używać narzędzi, które będą tego pilnowały. Ja polecam narzędzie o nazwie Prettier

Co to jest Prettier?

Prettier jest narzędziem, które usprawnia proces tworzenia oprogramowania poprzez wprowadzenie jednolitego formatowania kodu. Usuwa on oryginalne formatowanie plików i wprowadza tam zdefiniowane przez nas reguły.

Znalazłem to narzędzie jakieś pół roku temu i wprowadziło ono pewien porządek w kodzie nad którym pracowaliśmy z kolegą. Zniknęły problemy z formatowaniem, które wynikały z pominięcia jakiegoś pliku, drobnych różnic w konfiguracji czy czasami innych preferencji.

Dzięki wykorzystaniu Prettiera trochę też zaoszczędziliśmy na czasie. Nie było potrzeby skupiać się na formatowaniu podczas pisania kodu - teraz wystarcza jedna komenda. Dodatkowo podczas przeglądania PR nie ma potrzeby zwracania uwagi na styl - Prettiera da się prosto podpiąć pod CI, żeby samo sprawdziło czy kod spełnia wymogi formatowania a jeśli nie to poinformowało nas o tym.

Korzystanie z niego jest banalnie proste tak samo jak instalacja. Możemy go zainstalować globalnie lub tylko lokalnie dla projektu co według mnie jest lepszym rozwiązaniem.

yarn add prettier

Opcje formatowania

Żeby móc formatować tekst warto wiedzieć jakie mamy opcje. A mamy ich całkiem sporo:

/**
 * @prettier
 */

Wszystkie inne pliki zostaną pomięte.

Jak z niego korzystać

Z Prettiera korzysta się przy pomocy CLI i nie jest to na szczęście skomplikowane. Najprostszym sposobem jest użycie opcji formatowania o których wspomniałem wyżej bezpośrednio w poleceniu np.:

prettier --print-width 100 --use-tabs --single-quote --write "*.js"

Na samym końcu ważne jest przełącznik --write, który powoduje nadpisanie formatowania w pliku na ten zdefiniowany przez nas. Oczywiście jeśli użyjemy dużo przełączników to polecenie będzie bardzo długie. Wtedy możemy wykorzystać plik .prettierrc w którym umieścimy naszą konfigurację

{
	"printWidth": 100,
	"useTabs": true,
	"singleQuote": true
}

Wtedy wystarczy tylko krótkie polecenie

prettier --write "*.js"

Oprócz samego nadpisywania plików warte wykorzystania jest również przełącznik --debug-check. Sprawdza on wtedy wszystkie pliki i jeśli jakiś jest sformatowany niezgodnie z naszymi zasadami to wyświetli błąd. Sprawdza się to idealnie by sprawdzić czy nasz PR jest poprawnie sformatowany zanim wciągniemy go do głównego brancha.