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.

Czy szukasz wykonawcy Prettier ?

Sprawdź case studies

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”.

Integracja z edytorami kodu

Prettier to narzędzie, które można łatwo zintegrować z popularnymi edytorami kodu, co pozwala na automatyczne formatowanie plików podczas ich zapisywania. Dzięki temu programiści nie muszą ręcznie dbać o spójność stylu kodu, a cały proces staje się bardziej płynny i wygodny. Najczęściej używane edytory, takie jak Visual Studio Code, WebStorm czy Sublime Text, oferują oficjalne rozszerzenia dla Prettiera. Po ich zainstalowaniu można skonfigurować narzędzie tak, aby działało automatycznie lub wywoływać je ręcznie za pomocą skrótów klawiaturowych.

Integracja z edytorem pozwala również na dostosowanie ustawień formatowania zgodnie z wymaganiami projektu. Można określić na przykład maksymalną długość linii, styl cudzysłowów czy sposób formatowania obiektów i funkcji. Dzięki temu zespół programistów może pracować w jednolitym stylu, co ułatwia współpracę i utrzymanie kodu.

Prettier w CI/CD

Automatyzacja procesu formatowania kodu jest niezwykle ważna w zespołach pracujących nad dużymi projektami. Dzięki integracji Prettiera z systemami Continuous Integration (CI) i Continuous Deployment (CD) można zapewnić, że kod w repozytorium zawsze spełnia określone standardy formatowania.

W typowym procesie CI/CD Prettier może być uruchamiany jako część pipeline'u przed wdrożeniem zmian do głównej gałęzi projektu. Pozwala to na wykrywanie i korygowanie błędów formatowania jeszcze przed ich zaakceptowaniem w pull requestach. W połączeniu z narzędziami takimi jak ESLint i Git Hooks można wymusić stosowanie jednolitych reguł kodowania na każdym etapie pracy.

Automatyczne sprawdzanie i formatowanie kodu w CI/CD eliminuje niepotrzebne dyskusje o stylu kodowania w zespołach programistycznych i pomaga utrzymać spójność w całym projekcie. Jest to szczególnie przydatne w większych organizacjach, gdzie różni programiści mogą mieć odmienne preferencje dotyczące formatowania kodu.

SPRAWDŹ SWOJĄ WIEDZE Z TEMATU prettier

Pytanie

 1/5

Czym jest Prettier?

Framework do tworzenia aplikacji webowych

Narzędzie do automatycznego testowania kodu

Narzędzie do formatowania kodu

Edytor kodu źródłowego

Sprawdź odpowiedź

Jak zainstalować Prettier jako zależność deweloperską?

Sklonować repozytorium z GitHuba

Wpisać polecenie: npm install --save-dev prettier lub yarn add --dev prettier

Pobrać i rozpakować archiwum ZIP

Wpisać polecenie: pip install --dev prettier

Sprawdź odpowiedź

Jak utworzyć plik konfiguracyjny Prettier?

Utworzyć plik o nazwie .prettierrc.js w głównym katalogu projektu

Utworzyć plik o nazwie prettier.config w głównym katalogu projektu

Utworzyć plik o nazwie .prettierrc w głównym katalogu projektu

Utworzyć plik o nazwie prettier.json w głównym katalogu projektu

Sprawdź odpowiedź

Jak uruchomić Prettier z wiersza poleceń?

prettier format "src//*.js"

prettier run "src//.js"

prettier --write "src/**/.js"

prettier execute "src/**/*.js"

Sprawdź odpowiedź

Czy Prettier wspiera integrację z edytorami kodu źródłowego?

Nie, Prettier działa wyłącznie z wiersza poleceń

Tak, Prettier wspiera integrację z popularnymi edytorami kodu źródłowego

Prettier wspiera integrację tylko z Visual Studio Code

Prettier wspiera integrację tylko z Sublime Text

Sprawdź odpowiedź

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.