Prettier

Czytelność kodu ma ogromne znaczenie dla każdego projektu, a w szczególności takiego którego piszemy w zespole. Dobrze sformatowany kod to taki, który trzyma się odpowiednich reguł i jest stosowany przez wszystkie osoby w projekcie, dlatego też powstały formatery kodu. Takie narzędzie formatuje kod za nas i trzyma się reguł, które jesteśmy w stanie sami określić wraz z zespołem. Ciężko jest sobie wyobrazić pisanie aplikacji bez formatera kodu, dlatego w tym artykule przedstawię najpopularniejszy formater kodu jakim jest Prettier.

Prettier nie tylko dla javascriptu

Aktualnie prettier wspiera nie tylko javascript, a także: JSX, Angular, Vue, Flow, TypeScript, CSS, LESS, SCSS, HTML, Ember, JSON, GraphQL, Markdown, YAML.

Prettier vs. ESLint

ESLint jest narzędziem służącym do analizy statycznej kodu, który znajduje błędy w kodzie lub złe praktyki i niektóre z tym błędów jest w stanie samemu naprawić, natomiast Prettier służy do formatowania kodu. Krótko mówiąc prettiera używamy do uproszczenia formatowania kodu, a ESLint do wyłapywania błędów. Dlatego warto korzystać z obu narzędzi. Warto również wspomnieć, że ESLint współpracuje tylko z Javascriptem.

Reguły Prettiera

Korzystając z Prettiera jesteśmy w stanie sami określić odpowiednie dla naszego projektu reguły, aby to zrobić należy w pliku .prettierrc skonfigurować Prettiera dodając nowe reguły np.: 

{
  "printWidth": 80, // określa długość linii
  "tabWidth": 2, // określa liczbę spacji na poziomie wcięcia
  "singleQuote": true // używa pojedynczych cudzysłowów
  "semi": true // dodaje średnik na końcu linii
  "useTabs": true // wcięcia linii są stosowane za pomocą tabulatorami zamiast spacji
}

Instalacja Prettiera

Aby dodać Prettiera do naszego projektu należy za pomocą managera pakietu wykonać następujące polecenia:

yarn add --dev --exact prettier

Lub jeśli korzystamy z edytora Visual studio code, wystarczy że dodamy nowe rozszerzenie o nazwie “Prettier - Code formatter”.

Podsumowanie

Dzięki rozwojowi takich narzędzi jak Prettier nie musimy już ręcznie formatować kodu, dzięki czemu zaoszczędzimy trochę czasu i możemy się bardziej skupić na kodowaniu. Warto również zapoznać się z narzędziem jakim jest husky, który pozwala nam na integrację z Git hookami, co umożliwia nam na zautomatyzowanie Prettiera oraz ESLinta.