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.
Ostatnie oferty pracy
Brak ofert pracy
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
Zastosowanie wzorca VO (Value Object) w projektach
26 kwi 2024
Wzorzec VO, czyli Value Object, to istotny element każdego projektu programistycznego. Często nie doceniany, a cichym bohaterem zwiększających efektywność kodu, jest sposobem na skuteczne zarządzanie danymi w aplikacjach. W tej serii artykułów pokażemy praktyczne zastosowania tego wzorca projektowego, które pomogą Ci w codziennej pracy dewelopera.
Content Security Policy (CSP) - Skuteczne techniki zabezpieczania strony internetowej
26 kwi 2024
Content Security Policy (CSP) to potężna technika bezpieczeństwa sieci, która służy do ograniczania zawartości możliwej do załadowania przez Twoją stronę. Dzięki niej, możemy skutecznie chronić naszą witrynę przed atakami takimi jak Cross-Site Scripting (XSS). W tym artykule zgłębimy najważniejsze aspekty konfiguracji CSP oraz przedstawimy przykłady jej zastosowań w praktyce.
Co to jest Xcode i jak go używać?
26 kwi 2024
Xcode to rozbudowane środowisko programistyczne firmy Apple, stworzone z myślą o tworzeniu aplikacji na urządzenia z systemem iOS czy macOS. Nasuwa się pytanie: jak skorzystać z tego narzędzia? W poniższym artykule przedstawimy najważniejsze funkcje Xcode oraz kroki prowadzące do pierwszego, własnego projektu.
Jak skutecznie wykorzystać marketing mobilny w strategii marki?
25 kwi 2024
W dobie cyfryzacji, marketing mobilny staje się niezbędnym narzędziem w promocji i rozwoju biznesu. W tym artykule poznamy skuteczne strategie.
MSTest: Co to jest i jakie są jego główne cechy?
25 kwi 2024
MSTest, wszechstronne narzędzie do testowania jednostkowego stworzone przez Microsoft, zyskuje na popularności wśród programistów .NET. Czy to ze względu na jego natywną integrację z Visual Studio, czy też za sprawą rozbudowanych funkcji? Pora rozejrzeć się po pokładzie MSTest, zgłębiając kluczowe aspekty jego architektury i funkcji.
Wzorzec Singletona: efektywne zarządzanie zasobami
25 kwi 2024
Singleton to wzorzec projektowy, który pomaga zarządzać zasobami w efektywny sposób. Daje on możliwość utworzenia tylko jednej instancji klasy, gwarantując jednorazowy dostęp do zasobu, zwiększając wydajność oraz poprawiając kontrolę nad procesami.
Pattern Matching w praktyce: zrozumienie i wykorzystanie w codziennym kodowaniu
24 kwi 2024
Pattern Matching to kluczowy aspekt wielu języków programowania, którym często nie poświęcamy dostatecznej uwagi. W tym artykule zgłębimy jego podstawy i zasady funkcjonowania. Pokażemy przykłady wykorzystania, które pomogą Wam efektywniej kodować na co dzień.
Zobacz wszystkie artykuły