Prettier
minuta czytania
Prettier to narzędzie do automatycznego formatowania kodu, które w ostatnim czasie zyskało dużą popularność w środowisku programistów. Pozwala na ujednolicenie stylów pisania kodu, a tym samym przyczynia się do lepszej czytelności i łatwiejszej utrzymywalności projektów.
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.
Nasza oferta
Web development
Dowiedz się więcejMobile development
Dowiedz się więcejE-commerce
Dowiedz się więcejProjektowanie UX/UI
Dowiedz się więcejOutsourcing
Dowiedz się więcejPowiązane artykuły
Wzorzec projektowy Bridge: Definicja, zasady działania i praktyczne zastosowanie
26 mar 2024
Bridge to jeden z kluczowych wzorców projektowych, który usprawnia proces tworzenia programów. W naszym artykule przyjrzymy się, jakie są podstawowe zasady działania tego patternu, jego definicji i jak jest stosowany w praktyce, aby lepiej zrozumieć jego istotę i przewagi.
Testcontainers: Co to jest i jakie są jego główne zalety w testowaniu oprogramowania?
25 mar 2024
Testcontainers rewolucjonizują testowanie oprogramowania, zapewniając narzędzia do elastycznego i efektywnego tworzenia testów. Jest to biblioteka, która umożliwia uruchamianie różnych testów za pomocą kontenerów Docker. Testcontainers służy m.in. do tworzenia izolowanych środowisk testowych, oferując wiele kluczowych korzyści. W tym artykule przyjrzymy się definicji, kluczowych korzyściach i praktycznym zastosowaniom Testcontainers.
Adaptive Web Design: Zalety i korzyści zastosowania
22 mar 2024
Adaptive Web Design, związany nierozerwalnie z epoką urządzeń mobilnych, stał się filarem sukcesu nowoczesnej strony internetowej. Jego podstawą jest tworzenie stron zorientowanych na użytkownika, które dostosowują się do różnorodnych urządzeń. W świecie, gdzie odwiedzający korzystają z rozmaitych platform, rola Adaptive Web Design rośnie lawinowo, przyspieszając, i jest kluczem do osiągnięcia wyróżniającej się i skutecznej obecności online
Czym jest targetowanie behawioralne w marketingu?
22 mar 2024
Targetowanie behawioralne to silne narzędzie w arsenale strategii marketingowych, które pozwala firmom na zrozumienie i skuteczne zaspokojenie potrzeb swoich klientów. Wspiera decyzje zakupowe, analizując zachowania użytkownika, i dostarcza spersonalizowane treści, czyniąc klienta bardziej zaangażowanym.
Parse w praktyce: Efektywne wykorzystanie tej technologii w procesie budowy aplikacji webowych
22 mar 2024
Czy kiedykolwiek zastanawiałeś się, jak skutecznie wykorzystać technologię Parse w procesie budowy aplikacji webowych? W niniejszym artykule postaramy się przedstawić praktyczne zastosowania Parse - backend-as-a-service (BaaS), który oferuje elastyczne i skalowalne rozwiązania dla deweloperów.
React Native Skia: Klucz do zrozumienia jego charakterystyki i funkcji
21 mar 2024
React Native Skia to wszechstronna otwartoźródłowa biblioteka, która umożliwia tworzenie bogatych, animowanych interfejsów użytkownika. Skia stanowi fundament, pomagając developerom w projektowaniu aplikacji o dużej wydajności. Idźmy dalej, aby zrozumieć kluczowe charakterystyki i funkcje tej innowacyjnej biblioteki.
Fluent Design - Wprowadzenie do systemu, zasad i możliwości
21 mar 2024
Fluent Design, nazywany 'językiem designu dla cyfrowych interfejsów' od Microsoft, przewodzi nowe trendy w świecie UI. Jego niewidzialne, ale odczuwalne zasady, takie jak światło, głębia czy materiał, znacząco różnią się od tradycyjnych. Przełóżmy zasłonę tajemniczości i dowiedzmy się, jak Fluent Design może zmienić to, jak postrzegamy interfejsy użytkownika.
Zobacz wszystkie artykuły