Formatowanie kodu przy pomocy narzędzia Prettier

Początkujący programiści w trakcie nauki skupiają się przede wszystkim na tym, jak działa (lub nie działa) tworzony przez nich program. Osoby te pracują lub uczą się w pojedynkę, więc aspekty programowania związane z utrzymaniem kodu, jego czytelnością i obniżaniem progu wejścia dla innych nie są naturalnie priorytetem. To zrozumiałe, jednak w pewnym momencie nie do końca wystarczające - szczególnie w kontekście próby wejścia na wyższy poziom swojego fachu. W dzisiejszym artykule chciałbym ci więc przedstawić sposób na tworzenie bardziej czytelnego kodu, a zrealizujemy to poprzez zintegrowanie narzędzia Prettier z edytorem Visual Studio Code.

Czym jest Prettier? Prettier to narzędzie do formatowania kodu, które stawia nacisk na uniwersalne reguły formatowania poprawiające czytelność. Jest to obecnie jedno z podstawowych narzędzi jakie znajdziesz w wielu projektach komercyjnych, a jego instalacja - w przypadku korzystania z popularnych edytorów takich jak VS Code czy Web Storm - powinna zająć ci nie więcej jak kilka minut.

Instalacja w VS Code

Zainstalowanie Prettiera możemy zrealizować na dwa sposoby. Pierwszy to dodanie tego narzędzia poprzez manager paczek (np. npm) i skonfigurowanie go na poziomie projektu (o tym na końcu), a drugi, zdecydowanie łatwiejszy, to zainstalowanie Prettiera jako plugin do VS Code. I właśnie na tym drugim skupimy się w tym artykule.

W popularnym edytorze kodu Prettiera zainstalujemy korzystając z menu rozszerzeń, które domyślnie znajdziesz po lewej stronie interfejsu użytkownika. Po wpisaniu w wyszukiwarkę nazwy rozszerzenia i otrzymaniu wyników, na pierwszym miejscu powinien się znaleźć oczekiwany przez nas wynik - nie pozostaje nic innego, niż tylko zainstalować Prettiera do naszego edytora:

Po zainstalowaniu rozszerzenia warto przyzwyczaić się do formatowania kodu z wykorzystaniem skrótów klawiszowych - ścieżka krótsza to po prostu SHIFT+OPTION/ALT+F natomiast ścieżka dłuższa to CMD/CTRL + SHIFT + P do wywołania konsoli i znalezienia odpowiedniego polecenia:

Przy pierwszym użyciu tego polecenia VS Code zapyta czy chcesz wykorzystywać Prettiera jako domyślny formatter kodu, więc pozostaje ci po prostu potwierdzić decyzję i wykorzystać to narzędzie w akcji.

Konfiguracja w projekcie

Nie ma co ukrywać - do formatu oferowanego przez Prettiera należy się po prostu przyzwyczaić, ponieważ z dużym prawdopodobieństwem jego domyślna konfiguracja będzie się różnić od twoich nawyków formatowania kodu.

Na tym etapie masz do wyboru dwie ścieżki - albo zaakceptujesz różnice i spróbujesz zaufać nowemu formatowi, albo na poziomie projektu utworzysz nowy plik o nazwie .prettierrc / prettier.json i wykorzystasz go do ułożenia nowego narzędzia wg starych przyzwyczajeń:

Prettier korzysta z kilku konwencji związanych z plikami konfiguracyjnymi, więc przestrzegając odpowiedniego nazewnictwa ten jeden plik powinien wystarczyć ci do zmiany działania nowego pluginu.

Ja sam plik konfiguracyjny stosuję najczęściej aby nadpisać domyślne ustawienia ukryte pod opcjami printWidth, singleQuote oraz semi - czy nazwy parametrów mogą sugerować, co w Prettierze nie do końca mi odpowiada?

Nawet jeśli nie wiesz, co oznaczają powyższe opcje, to bez obaw. Wszystkie wariacje konfiguracji opisane są szczegółowo na stronie dokumentacji Prettiera - tutaj - więc parametry takie jak długość linii, stosowanie średników, czy tworzenie stringów poprzez apostrof lub cudzysłów możesz ustawić dokładnie tak jak lubisz. Pamiętaj jednak, że im dłuższy plik konfiguracyjny w twoim projekcie, tym bardziej oddalasz się od standardu jaki oferuje Prettier, a tym samym oddalasz się od przyjętych w branży konwencji opartych o przedstawione dzisiaj narzędzie.

Dalsze kroki

Prettier to obecnie jedno z najpopularniejszych narzędzi w ekosystemie JavaScript. Co prawda nie wpływa ono na samo działanie tworzonego przez nas programu, jednak zdecydowanie poprawia czytelność i ułatwia wspólne rozwijanie projektów programistycznych. Warto być świadomym jego istnienia na przykład wtedy, kiedy w grupie programistów uczestniczymy w nieustających debatach na temat najlepszego sposobu na formatowanie kodu - w takich przypadkach Prettier zadziała jak neutralna trzecia strona, która podejmie decyzję za cały zespół.

Jeśli zainteresował cię temat dzisiejszego artykułu, to kolejne kroki powinieneś skierować w stronę bardziej zaawansowanych technik konfiguracji narzędzi takich jak Prettier, na przykład poprzez film na naszym kanale - kliknij i zobacz tutaj.