Formater kodu

Do czego służy

Formater kodu bierze ściśnięty, zminifikowany lub niekonsekwentnie wcięty kod i zwraca go w czystym, spójnym stylu. Obsługuje języki, z którymi najczęściej masz do czynienia w pracy z webem: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML i GraphQL.

Pod spodem działa Prettier, formater używany przez miliony projektów, więc wynik wygląda dokładnie tak jak kod sformatowany w VS Code lub przez hook pre-commit. Parser danego języka wczytuje się dopiero wtedy, gdy go wybierzesz, dzięki czemu strona działa szybko.

Jak używać

1. Wybierz Język swojego kodu.
2. Wklej kod lub otwórz plik.
3. Wybierz styl Wcięcia (2 spacje, 4 spacje lub tabulatory) i Szerokość wiersza. Wiersze dłuższe niż ta szerokość są łamane tam, gdzie pozwala na to język.
4. W JavaScripcie i TypeScripcie zdecyduj, czy instrukcje mają kończyć się średnikami. W skryptach i arkuszach stylów wybierz pojedyncze cudzysłowy, jeśli twój projekt je preferuje.
5. Skopiuj wynik lub go pobierz.

Przykład

Przykład to jednowierszowa strona HTML z osadzonym CSS i JavaScriptem. Po sformatowaniu każdy element stoi w osobnym wierszu, reguły CSS są rozwinięte po jednej deklaracji na wiersz, a funkcja strzałkowa w skrypcie dostaje nawiasy i średnik:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Wskazówki

• Formatowanie to także szybki test składni. Jeśli Prettier nie potrafi sparsować wejścia, komunikat błędu pokazuje wiersz i kolumnę, więc od razu przejdziesz do pomyłki.
• XML jest formatowany przy założeniu, że białe znaki nie mają znaczenia, dzięki czemu zagnieżdżone znaczniki dostają wcięcia. Jeśli twój dokument zależy od dokładnych białych znaków wewnątrz elementów, sprawdź wynik przed użyciem.
• Potrzebujesz czegoś odwrotnego? Użyj minifikatora JavaScript i CSS, aby zmniejszyć kod na produkcję, albo formatera JSON do walidacji i minifikacji JSON.