Formatowanie kodu za pomocą narzędzi Beautify JS

Czytelny i dobrze sformatowany kod jest kluczem do efektywnej pracy programisty. Beautify JS to narzędzie, które pomaga w automatycznym formatowaniu i ulepszaniu czytelności kodu JavaScript. W tym artykule omówimy, jak korzystać z takich narzędzi jak Prettier i Beautify, aby zachować spójność w większych projektach oraz zwiększyć czytelność naszego kodu.

🟢 JavaScript – co to jest i jak zacząć naukę?

Dlaczego warto formatować kod?

Dobrze sformatowany kod ułatwia jego zrozumienie zarówno nam, jak i innym członkom zespołu. Beautifier to narzędzie, które automatycznie formatuje kod zgodnie z ustalonymi standardami, eliminując błędy wynikające z ręcznego formatowania.

Narzędzia do formatowania kodu JavaScript

Prettier

Prettier to popularny formatter JavaScript, który automatycznie formatuje kod zgodnie z określonymi regułami.

Zalety Prettier:

• Obsługa wielu języków: JavaScript, TypeScript, JSON, CSS, HTML i inne, co sprawia, że Prettier jest wszechstronnym narzędziem, które może formatować kod w różnych technologiach bez potrzeby używania wielu narzędzi.
• Integracja z edytorami kodu: Visual Studio Code, Atom, Sublime Text, dzięki czemu Prettier można łatwo zintegrować z popularnymi edytorami, co ułatwia codzienną pracę programistów.
• Minimalna konfiguracja: Domyślne ustawienia sprawdzają się w większości projektów, co redukuje czas poświęcony na konfigurację i pozwala szybciej rozpocząć pracę nad kodem.

🟢 Prettier – Oficjalna strona

Beautify JS

JS Beautify JS to kolejne narzędzie, które pomaga upiększyć Twój kod JavaScript. Jest częścią projektu js-beautify, który obsługuje również formatowanie HTML i CSS.

Cechy JS Beautify:

• Dostępność: Można go używać jako pakiet npm, w przeglądarce lub jako moduł Node.js, co zapewnia elastyczność i wygodę w zależności od środowiska, w którym pracujesz.
• Konfigurowalność: Oferuje wiele opcji dla upiększacza, co pozwala dostosować formatowanie do indywidualnych potrzeb projektów, a także umożliwia bardziej precyzyjną kontrolę nad wyglądem kodu.
• Wsparcie dla różnych formatów: Obsługuje JavaScript, HTML, CSS, JSON i inne, co sprawia, że jest wszechstronnym narzędziem do formatowania różnych typów plików w jednym miejscu.

🟢 JS Beautify na GitHubie

Jak korzystać z Beautify JS?

Instalacja

Aby zainstalować JS Beautify jako pakiet npm, użyj następującego polecenia:

npm install js-beautify -g

Użycie z linii poleceń

Możesz sformatować plik JavaScript za pomocą komendy:

js-beautify nazwa_pliku.js -o sformatowany_plik.js

Opcje formatowania

JS Beautify oferuje różne opcje upiększacza, takie jak:

• Wcięcia: Ustawienie liczby spacji lub tabulatorów.

• Maksymalna długość linii: Automatyczne łamanie linii przekraczających określoną długość.

• Styl cudzysłowów: Wybór między cudzysłowami pojedynczymi a podwójnymi.

Integracja z edytorami kodu

Visual Studio Code

W VS Code możesz zainstalować rozszerzenie Beautify lub Prettier – Code formatter, aby automatycznie upiększyć swój kod JavaScript podczas zapisywania pliku.

Atom

W Atomie dostępne jest rozszerzenie atom-beautify, które obsługuje formatowanie wielu języków, w tym JavaScript, HTML, CSS i JSON.

Sublime Text

Dla Sublime Text istnieje pakiet JsFormat, który pozwala na formatowanie kodu JavaScript bezpośrednio w edytorze.

Zachowanie spójności w większych projektach

W dużych zespołach ważne jest, aby wszyscy programiści stosowali te same standardy formatowania. Dzięki narzędziom takim jak JavaScript code beautifier można to łatwo osiągnąć.

Użycie plików konfiguracyjnych

Tworząc plik konfiguracyjny (np. .jsbeautifyrc lub .prettierrc), można zdefiniować wspólne ustawienia formatowania dla całego projektu.

Przykład pliku .prettierrc:

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

Integracja z systemami kontroli wersji

Dodanie pliku konfiguracyjnego do systemu kontroli wersji, takiego jak Git, zapewnia, że wszyscy członkowie zespołu będą korzystać z tych samych ustawień.

Formatowanie innych języków – Beautify JS

Beautify obsługuje nie tylko JavaScript, ale również inne języki:

• HTML Beautifier: Upiększa kod HTML, poprawiając jego czytelność.

• CSS Beautifier: Formatuje kod CSS zgodnie z ustalonymi standardami.

• JSON Beautifier: Ułatwia czytanie i edycję plików JSON.

Przykład formatowania HTML

js-beautify index.html -o sformatowany_index.html

Przykład formatowania CSS

js-beautify style.css -o sformatowany_style.css

Upiększanie kodu online z Beautifier.io

Jeśli nie chcesz instalować dodatkowych narzędzi, możesz skorzystać z Beautifier.io, strony internetowej, która pozwala upiększyć Twój kod JavaScript bezpośrednio w przeglądarce.

Funkcje Beautifier.io:

• Wsparcie dla różnych języków: JavaScript, HTML, CSS.

• Konfigurowalne opcje: Pozwala dostosować ustawienia formatowania.

• Łatwość użycia: Wystarczy wkleić kod i kliknąć przycisk.

🟢 Beautifier.io – Upiększ swój kod online

Podsumowanie – Beautify JS

Automatyczne formatowanie kodu za pomocą narzędzi takich jak Beautify JS czy Prettier znacząco ułatwia pracę programisty. Upiększanie kodu poprawia jego czytelność i pomaga zachować spójność w zespołach programistycznych. Warto z nich korzystać, aby tworzyć kod wysokiej jakości.

DEVSTOCK ©

Mateusz Wojdalski

Specjalista SEO i content marketingu w Devstock. Zajmuję się strategią treści, automatyzacją procesów marketingowych i wdrożeniami AI w codziennej pracy. Badam nowe narzędzia, adaptuję je do realnych zadań i piszę o tym, co faktycznie działa.