Formatownik JSX

Prześlij

0 znaków

Narzędzie do formatowania JSX GeekFormat, oparte na silniku Prettier v3 Standalone do profesjonalnego upiększania kodu komponentów React JSX/TSX. Obsługuje 12 konfiguracji formatowania (rozmiar wcięcia, średnik, styl cudzysłowów, przecinek końcowy, odstęp w nawiasach, nawiasy funkcji strzałkowej, szerokość wydruku, pojedyncze cudzysłowy JSX, nawias JSX w tej samej linii, strategia cudzysłowów właściwości itp.), z wbudowanym silnikiem kompresji Terser. Oferuje przełączanie między siedmioma językami: JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Edytor z podświetlaniem składni CodeMirror 6, porównanie w czasie rzeczywistym w dwóch kolumnach, obsługa upload/pobierania plików, historia, udostępnianie URL, kopiowanie jednym kliknięciem. Czysto przeglądarkowe przetwarzanie, kod nie jest wysyłany na serwer.

Powiązane Rekomendacje

Kompresja JSX

Formatowanie TSX

Formatowanie JavaScript

Formatowanie CSS

JSON Formatter

O formatowaniu JSX

JSX to skrót od JavaScript XML, rozszerzenie składni JavaScript wprowadzone przez framework React które pozwala pisać struktury tagów podobnych do HTML bezpośrednio w kodzie JavaScript. JSX jest konwertowany na zwykłe wywołania funkcji React.createElement() przez narzędzia takie jak Babel lub TypeScript podczas kompilacji. JSX sprawia że struktura kodu komponentów jest bardziej intuicyjna — programiści mogą opisywać strukturę UI tak jakby pisali HTML, jednocześnie uzyskując pełną ekspresywność JavaScript. Jednak jeśli kod JSX brakuje ustandaryzowanego formatowania — niechlujne poziomy zagnieżdżenia tagów, nieuporządkowane atrybuty, niespójne wcięcia — to poważnie wpłynie na czytelność i efektywność utrzymania, na czym polega wartość narzędzi do formatowania JSX.

Prettier jest obecnie najbardziej dominującym narzędziem do formatowania kodu w ekosystemie JavaScript/JSX, stworzonym przez Jamesa Longa w 2017 roku i teraz stał się de facto standardem. Centralna filozofia Prettier to 'opiniowany formatter' (opinionated formatter) — oferuje tylko kilka konfigurowalnych elementów, pozostałe reguły są wbudowane i niezmienialne. Zaletą tego jest wyeliminowanie niekończących się debat o stylu kodu między zespołami. Prettier obsługuje różne języki i formaty takie jak JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, jest szeroko przyjmowany przez społeczności głównych frameworków takich jak React, Vue, Angular. Większość nowoczesnych projektów front-end integruje Prettier w potoki CI/CD aby zagwarantować spójny styl kodu.

Centralne reguły formatowania JSX obejmują: Po pierwsze, poziomy wcięcia — każdy zagnieżdżony tag JSX i wyrażenie zwiększają poziom wcięcia o jeden, odzwierciedlając drzewiastą strukturę DOM; Po drugie, porządkowanie atrybutów — gdy tag ma wiele atrybutów i przekracza szerokość linii, każdy atrybut zajmuje jedną linię i jest wyrównany; Po trzecie, obsługa nawiasów — wieloliniowe wyrażenia JSX są zwykle owijane nawiasami okrągłymi aby zapobiec problemom z automatycznym wstawianiem średnika (ASI); Po czwarte, samozamykające się tagi — komponenty bez elementów potomnych używają formy <Component />; Po piąte, cudzysłowy stringów — atrybuty JSX domyślnie używają podwójnych cudzysłowów (zgodnie z HTML), ciągi JavaScript domyślnie używają pojedynczych cudzysłowów; Po szóste, obsługa spacji — czy dodawać spacje po obu stronach nawiasów klamrowych {} wewnątrz tagów jest konfigurowalne.

Kompresja JSX (Minification) jest odwrotną operacją formatowania, celem jest przekształcenie JSX w wykonywalny kod o minimalnej objętości do wdrażania w środowisku produkcyjnym, zmniejszając objętość transmisji sieciowej i przyspieszając prędkość ładowania. Kompresja JSX zwykle obejmuje następujące kroki: najpierw skompiluj JSX do wywołań React.createElement (czyli zwykłego JavaScript) za pomocą Babel, następnie użyj kompresora (takiego jak Terser, UglifyJS) do: usuwania komentarzy i znaków białych, skracania nazw zmiennych i funkcji (mangling), eliminacji martwego kodu (dead code elimination), upraszczania wyrażeń i instrukcji warunkowych, łączenia deklaracji, funkcji inline itp. Nowoczesne narzędzia budowania (Webpack, Vite, Rollup) automatycznie wykonują kompresję kodu w trybie production.

Dlaczego formatowanie kodu jest ważne? W pracy zespołowej jednolity styl kodu może znacznie poprawić czytelność i efektywność przeglądu. Jeśli każdy programista formatuje kod zgodnie z własnymi preferencjami, Git diff będzie pełen bezsensownych zmian formatu, recenzentom będzie trudno znaleźć prawdziwe zmiany logiczne. Badania pokazują że programiści spędzają znacznie więcej czasu na czytaniu kodu niż na jego pisaniu, a spójny styl formatowania może znacznie zmniejszyć obciążenie poznawcze przy czytaniu. Duże firmy takie jak Google, Meta, Airbnb mają surowe normy stylu kodu i zautomatyzowane łańcuchy narzędzi formatujących, co również odzwierciedla dojrzałość inżynierii oprogramowania.

Podział pracy między Prettier a Linterami (takimi jak ESLint, TSLint) jest jedną z najlepszych praktyk nowoczesnej inżynierii front-end: Prettier zajmuje się wyłącznie formatem (formatting) — podziały linii, wcięcia, spacje, średnik, cudzysłowy, przecinki i inne czysto stylistyczne problemy; ESLint zajmuje się wyłącznie jakością (code quality) — nieużywane zmienne, potencjalne błędy, problemy bezpieczeństwa, najlepsze praktyki i inne problemy logiczne. Przy wspólnym użyciu należy wyłączyć reguły formatu w ESLint które nakładają się na Prettier poprzez eslint-config-prettier, aby uniknąć konfliktów. Wiele zespołów konfiguruje również haki pre-commit (poprzez husky + lint-staged) aby automatycznie uruchamiać Prettier i ESLint przed wysłaniem kodu, gwarantując że cały kod wysłany do repozytorium spełnia normy.

Przy wyborze narzędzia do formatowania JSX należy wziąć pod uwagę kilka czynników: Po pierwsze, wybór silnika — preferuj Prettier jako silnik, ponieważ jest standardem społeczności, z przewidywalnymi wynikami i spójnością z rozszerzeniami IDE; Po drugie, konfigurowalność — wybierz liczbę dostosowywalnych parametrów zgodnie z potrzebami zespołu; zbyt wiele opcji wręcz zwiększa koszty decyzyjne; Po trzecie, bezpieczeństwo — upewnij się że narzędzie przetwarza kod lokalnie, nie wysyła go na serwery, unikając ryzyka wycieku kodu źródłowego; Po czwarte, dodatkowe funkcje — kompresja, podświetlanie składni, historia, udostępnianie i inne funkcje mogą poprawić efektywność użycia; Po piąte, wielojęzyczna obsługa — narzędzie które pokrywa wiele języków takich jak JS/TS/JSX/TSX/CSS/HTML/JSON może zmniejszyć koszty przełączania narzędzi.

Środki bezpieczeństwa przy używaniu online narzędzi do formatowania kodu: Po pierwsze, preferuj narzędzia z czysto przeglądarkowym przetwarzaniem — te narzędzia nie potrzebują serwera, kod działa tylko lokalnie, maksymalne bezpieczeństwo; Po drugie, nie wklejaj kodu zawierającego wrażliwe informacje — takie jak hasła do baz danych, klucze API, wewnętrzna logika biznesowa, algorytmy zastrzeżone itp. Nawet jeśli narzędzie twierdzi że nie wysyła, utrzymuj świadomość bezpieczeństwa; Po trzecie, sprawdź czy narzędzie używa HTTPS — zapobiega podsłuchiwaniu podczas transmisji (chociaż narzędzia z lokalnym przetwarzaniem nie potrzebują transmisji, sama strona również potrzebuje bezpiecznego ładowania); Po czwarte, używaj lokalnych narzędzi dla ważnego kodu — dla rdzeniowego kodu biznesowego zaleca się używanie lokalnie zainstalowanego Prettier CLI lub rozszerzeń IDE, nie poleganie na usługach online; Po piąte, regularnie przeglądaj wiarygodność narzędzia — sprawdź czy jest open source, jaka jest ocena społeczności, czy ma politykę prywatności itp.

Przypadki użycia

Kod komponentu React skopiowany z internetu z niechlujnym formatowaniem — szybkie formatowanie dla łatwiejszego czytania i nauki
Porządkowanie plików komponentów JSX przy przejmowaniu starych projektów, ujednolicenie stylu kodu przed wtórnym rozwojem
Formatowanie przed przeglądem kodu, eliminacja bezsensownych diff spowodowanych różnicami formatu, skupienie się na przeglądzie logicznym
Ponowne formatowanie skompresowanego produkcyjnego kodu JSX, czytanie zaciemnionego kodu podczas diagnozowania problemów w produkcji
Upiększanie przykładowego kodu JSX przed pisaniem blogów technicznych lub dokumentacji, poprawa profesjonalizmu treści
Porównywanie efektów różnych konfiguracji formatowania, służy jako punkt odniesienia do wyboru konfiguracji Prettier zespołu
Demonstrowanie procesu formatowania kodu JSX od niechlujnego do ustandaryzowanego na prezentacjach edukacyjnych
Podczas debugowania fragmentów kodu React online — najpierw sformatuj, potem analizuj strukturę i lokalizuj błędy
W dokumentacji bibliotek komponentów generujących kod JSX, gwarancja jednolitego i schludnego stylu przykładowego kodu
Porządkowanie kodu projektów React przed rozmowami kwalifikacyjnymi, gwarancja ustandaryzowanego stylu wysyłanych przykładów kodu
Formatowanie wygenerowanego przez AI kodu JSX przed umieszczeniem w projekcie, eliminacja problemów z niespójnością formatu w wyjściu AI
Podczas rozwoju projektów React Native lub Next.js — szybkie formatowanie fragmentów kodu komponentu online

Jak Używać

Wklej kod JSX/TSX w lewym edytorze, lub kliknij przycisk upload aby zaimportować pliki .jsx/.tsx, lub załaduj bezpośrednio z przykładów
Kliknij przycisk ustawień aby dostosować parametry formatowania: rozmiar wcięcia, średnik, cudzysłowy, przecinek końcowy, szerokość wydruku, opcje JSX itp., lub zachowaj konfigurację domyślną
Kliknij przycisk formatowania (lub użyj skrótu klawiszowego) aby wykonać formatowanie. Prawy panel wyświetla wynik natychmiast. Możesz przeciągać aby dostosować szerokość paneli
Jeśli potrzebujesz kompresji, kliknij przycisk kompresji aby przełączyć się w tryb kompresji. Silnik Terser wyświetli zminimalizowany kod JSX
Kliknij przycisk kopiowania aby skopiować wynik do schowka, lub kliknij pobierz aby zapisać jako plik, lub wyślij do innych osób poprzez link udostępniania

Funkcje

Silnik Prettier v3: Oparty na Prettier v3 Standalone, najpopularniejszym w branży, jako mechanizm formatowania w połączeniu z parserem Babel. Wyniki spójne z rozszerzeniem Prettier w VS Code, gwarantując jednolitość stylu kodu zespołu
12 konfiguracji formatowania: Dostosuj rozmiar wcięcia (2/4/8 spacji lub Tab), średnik, pojedyncze/podwójne cudzysłowy, przecinek końcowy (none/es5/all), odstęp w nawiasach, nawiasy funkcji strzałkowej, szerokość wydruku, pojedyncze cudzysłowy JSX, nawias JSX w tej samej linii, strategia cudzysłowów właściwości i inne 12 parametrów
Edytor z podświetlaniem składni JSX: Profesjonalny edytor kodu oparty na CodeMirror 6, obsługuje podświetlanie składni JSX/TSX, numery linii, dopasowywanie nawiasów, wprowadzanie po lewej i wynik po prawej w czasie rzeczywistym
Funkcja kompresji JSX: Wbudowany silnik kompresji Terser, kompresuje kod komponentów JSX do minimalnej objętości jednym kliknięciem. Obsługuje zaciemnianie nazw zmiennych (mangle), usuwanie martwego kodu, czyszczenie console/debugger i inne zaawansowane opcje kompresji
Przełączanie między 7 językami: Obsługuje JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — siedem popularnych języków front-end. Jedno narzędzie pokrywa wszystkie potrzeby formatowania full-stack
Upload i pobieranie plików: Obsługuje bezpośredni upload plików .jsx/.tsx/.js/.ts/.css/.html/.json do formatowania, można pobrać i zapisać lokalnie po przetworzeniu
Panel historii: Automatycznie zapisuje ostatnie rekordy formatowania, obsługuje powrót do wersji historycznych i porównywanie efektów formatowania przy różnych konfiguracjach
Kopiowanie wyniku jednym kliknięciem: Sformatowany lub skompresowany kod jest kopiowany do schowka jednym kliknięciem, bezpośrednio wklejany do IDE lub projektu
Funkcja udostępniania URL: Koduje kod i konfigurację w hashu URL poprzez kompresję LZ-String. Skopiuj link, aby udostępnić pełny kod i parametry formatowania
Przyjazne wskazówki błędów składni: Rozróżnia błędy składni od innych błędów gdy formatowanie nie powiedzie się, podaje wskazówki lokalizacyjne do szybkiego naprawiania problemów z kodem
Przeciągalne kolumny: Szerokość lewego i prawego panelu można swobodnie regulować przeciągając, dostosowując się do różnych rozmiarów ekranu i nawyków czytania
Lokalne przetwarzanie w przeglądarce: Całe formatowanie, kompresja i analiza jest wykonywana w JavaScript w przeglądarce. Kod nie jest wysyłany na żaden serwer, gwarantując bezpieczeństwo kodu źródłowego

Często Zadawane Pytania

Na czym polega zasada formatowania JSX? Jaki jest związek z Prettier?

To narzędzie wykorzystuje wersję Prettier v3 Standalone jako silnik formatowania w dolnej warstwie. Analizuje składnię JSX poprzez parser Babel, a następnie ponownie eksportuje kod z schludnym formatowaniem zgodnie ze skonfigurowanymi regułami. Prettier jest obecnie najpopularniejszym narzędziem do formatowania kodu w ekosystemie front-end, szeroko stosowanym w projektach React/Vue/Angular. Wyniki formatowania tego narzędzia są zasadniczo spójne z wynikami instalacji rozszerzenia Prettier w VS Code do formatowania plików JSX. Nadaje się do szybkiego formatowania online bez konieczności otwierania lokalnego IDE.

Jakie opcje formatowania są obsługiwane? Czy mogę dostosować wcięcie i styl cudzysłowów?

Obsługuje 12 konfiguracji formatowania: 1) Rozmiar wcięcia: 2 spacje/4 spacje/8 spacji lub użycie Tab; 2) Użycie średnika; 3) Pojedyncze lub podwójne cudzysłowy; 4) Strategia przecinka końcowego: none (brak)/es5 (tablice i obiekty)/all (w tym parametry funkcji); 5) Spacje wewnątrz nawiasów klamrowych obiektów; 6) Nawiasy przy pojedynczym parametrze funkcji strzałkowej; 7) Szerokość wydruku (maksymalna liczba znaków na linię); 8) Pojedyncze lub podwójne cudzysłowy dla atrybutów JSX; 9) Czy prawy nawias wieloliniowego JSX pozostaje w tej samej linii co zawartość; 10) Strategia cudzysłowów dla właściwości obiektów: as-needed/preserve/consistent; 11) Wrażliwość na białe znaki HTML; 12) Użycie Tab do wcięcia. Swobodne dostosowania w panelu ustawień.

Czy formatowanie zmienia logikę kodu JSX? Czy jest bezpieczne?

Formatowanie dostosowuje tylko znaki białe (podziały linii, wcięcia, spacje) i formy cukru składniowego takie jak cudzysłowy i średnik, nie zmieniając żadnej logiki kodu. Prettier jest dojrzałym narzędziem, zweryfikowanym przez miliony programistów na całym świecie. Sformatowany kod jest semantycznie równoważny oryginalnemu kodowi. Jednak zwróć uwagę: jeśli oryginalny kod zawiera błędy składni (np. niedopasowane nawiasy, nie zamknięte tagi), formatowanie nie powiedzie się i wskaże błąd składni. W takim przypadku najpierw napraw problem w kodzie przed formatowaniem.

Jak działa funkcja kompresji JSX? Jakie opcje kompresji są obsługiwane?

Kompresja JSX wykorzystuje silnik Terser (jeden z najpopularniejszych kompresorów JavaScript w branży) wykonywany lokalnie w przeglądarce. Kompresja obejmuje: usuwanie komentarzy i nadmiarowych białych znaków, skracanie i zaciemnianie nazw zmiennych (mangle), eliminacja martwego kodu (dead_code), usuwanie nieużywanych zmiennych (unused), optymalizacja hoisting funkcji/zmiennych, upraszczanie wyrażeń warunkowych, optymalizacja pętli itp. Kompresja najpierw kompiluje JSX do zwykłego JavaScript poprzez Babel, a następnie wykonuje kompresję i optymalizację. Uwaga: skompresowany kod ma drastycznie zmniejszoną czytelność, nadaje się do wdrażania w środowisku produkcyjnym, nie nadaje się do rozwoju i debugowania.

Czy obsługiwany jest TypeScript (TSX)? Jaka jest różnica od JSX?

Obsługiwany. Narzędzie domyślnie używa języka JSX. Możesz przełączyć się na tryb TSX poprzez menu przełączania języka w lewym górnym rogu. Tryb TSX wykorzystuje parser TypeScript, który poprawnie rozpoznaje adnotacje typów TypeScript (interface, type, generyki, asercje typów itp.), nie zgłaszając błędów z powodu składni typów. Tryb JSX wykorzystuje parser Babel, odpowiedni dla komponentów React w czystym JavaScript. Podczas kompresji TSX adnotacje typów są automatycznie usuwane przed kompresją Terser.

Czy wprowadzany kod JSX jest wysyłany na serwer? Czy prywatność jest bezpieczna?

Całkowicie bezpiecznie. Wszystkie funkcje tego narzędzia (formatowanie, kompresja, wykrywanie składni, historia) są wykonywane lokalnie w Twojej przeglądarce poprzez JavaScript. Zawartość kodu nie jest wysyłana przez sieć na żaden zewnętrzny serwer. Prettier i Terser są bibliotekami zaimplementowanymi czysto w JavaScript, które mogą być wykonywane bezpośrednio po stronie przeglądarki. Możesz używać tego narzędzia offline — wszystkie funkcje nadal działają normalnie. Historia jest zapisywana w localStorage przeglądarki, widoczna tylko na Twoim bieżącym urządzeniu.

Gdzie jest zapisywana historia? Czy może zostać utracona?

Historia jest zapisywana w localStorage (pamięci lokalnej) przeglądarki, powiązana z konkretną przeglądarką i urządzeniem. Jeśli wyczyścisz dane przeglądarki, zmienisz przeglądarkę lub użyjesz trybu incognito, historia zostanie utracona. Historia służy do szybkiego powrotu do ostatnio sformatowanych fragmentów kodu, ułatwiając porównywanie efektów różnych konfiguracji. Zaleca się samodzielne zapisywanie ważnego kodu jako pliki, nie poleganie wyłącznie na funkcji historii.

Czy funkcja udostępniania URL wysyła kod na serwer?

Nie. Funkcja udostępniania URL kompresuje kod i konfigurację za pomocą LZ-String i koduje je w części hash URL (zawartość po #). Hash URL ma ważną cechę: nie jest wysyłany na serwer z żądaniem HTTP, a tylko odczytywany i analizowany lokalnie w przeglądarce przez JavaScript. Gdy odbiorca otworzy link udostępniania, przeglądarka bezpośrednio analizuje hash i dekompresuje aby wyświetlić kod — cały proces nie wymaga udziału serwera. Jednak zwróć uwagę: link udostępniania zawiera pełną zawartość kodu. Jeśli kod jest wrażliwy, nie udostępniaj go w publicznych kanałach.

Co zrobić gdy formatowanie nie powiedzie się i wskaże błąd składni?

Najczęstszą przyczyną niepowodzenia formatowania jest to, że sam kod zawiera błędy składni: 1) Nie zamknięte tagi JSX — sprawdź czy wszystkie tagi mają odpowiadającą parę, czy samozamykające się tagi są poprawne (<img /> zamiast <img>); 2) Niedopasowane nawiasy — sprawdź czy nawiasy klamrowe {}, okrągłe (), kwadratowe [] są sparowane; 3) Nie zamknięte cudzysłowy — czy cudzysłowy stringów są kompletne; 4) Źle napisana składnia — np. użycie składni niedozwolonej w JSX. Możesz najpierw sprawdzić numer linii i komunikat błędu we wskazówce aby zlokalizować problem, lub uprościć kod i badać krok po kroku.

Co oznacza szerokość wydruku (printWidth)? Jaką wartość powinienem ustawić?

Szerokość wydruku (printWidth) jest jednym z centralnych parametrów Prettier, oznacza maksymalną liczbę znaków na linię kodu. Gdy linia kodu przekracza tę szerokość, Prettier automatycznie ją łamie. Wartość domyślna to 80 znaków, to stara konwencja programistyczna (pochodząca z kart dziurkowanych i szerokości terminala). Typowe wartości: 80 (klasyczny konserwatywny), 100 (bardziej powszechny), 120 (przyjazny dla szerokich ekranów). Ustawienie zbyt małej wartości powoduje częste łamanie które utrudnia czytanie; zbyt duże sprawia że linia jest za długa aby czytać na wąskich ekranach. Zaleca się wybór wartości między 80-120 zgodnie z normami zespołu i szerokością monitora.

Do czego służy przecinek końcowy (trailing comma)? Który tryb wybrać?

Przecinek końcowy odnosi się do dodawania przecinka również po ostatnim elemencie w wieloliniowych strukturach takich jak tablice, obiekty i parametry funkcji. Zalety obejmują: 1) Dodawanie/usuwanie elementów zmienia tylko jedną linię, czystszy Git diff; 2) Unika błędów składni spowodowanych zapomnieniem dodania przecinka; 3) W niektórych przypadkach stabilniejsza analiza. Prettier oferuje trzy tryby: none (bez przecinka końcowego, najbardziej zwięzły), es5 (tylko tam gdzie obsługiwane przez ES5, czyli tablice i obiekty, najbardziej kompatybilny), all (we wszystkich możliwych miejscach, w tym parametry funkcji, wymaga ES2017+ lub obsługi Babel/TS). Dla nowoczesnych projektów zalecany jest tryb 'all', który działa idealnie z kompilacją Babel lub TypeScript.

Jakie efekty dają jsxSingleQuote i jsxBracketSameLine?

jsxSingleQuote (pojedyncze cudzysłowy JSX): Steruje czy wartości atrybutów JSX używają pojedynczych czy podwójnych cudzysłowów. Domyślnie wyłączone (podwójne cudzysłowy), co jest zgodne z konwencją atrybutów HTML. Po włączeniu ciągi znaków atrybutów w JSX używają pojedynczych cudzysłowów. jsxBracketSameLine (nawias JSX w tej samej linii): Steruje czy zamykający prawy nawias (/> lub >) wieloliniowych elementów JSX znajduje się na końcu ostatniej linii (ta sama linia) czy w nowej linii (inna linia). Domyślnie wyłączone (nowa linia). Po włączeniu prawy nawias znajduje się w tej samej linii co ostatni atrybut. Różne zespoły mają różne preferencje — wybierz styl zgodny z projektem.

Czy obsługiwane jest wsadowe formatowanie wielu plików?

Obecnie narzędzie webowe jest głównie zaprojektowane dla scenariuszy szybkiego formatowania pojedynczego pliku, obsługuje upload indywidualnego pliku. Jeśli masz wiele plików JSX/TSX do sformatowania wsadowo, zaleca się zainstalowanie narzędzia Prettier CLI w projekcie i przetwarzanie wsadowe poprzez wiersz poleceń (np. npx prettier --write "src/**/*.jsx"). Podstawowy silnik tego narzędzia jest dokładnie taki sam jak Prettier, z identycznymi wynikami formatowania. Przyszłe wersje mogą rozważyć dodanie funkcji przetwarzania wsadowego.

Czy można używać w połączeniu z ESLint?

Tak. W prawdziwych projektach zaleca się używanie Prettier do formatu kodu (podziały linii, wcięcia, spacje, cudzysłowy itp.), a ESLint do jakości kodu (nieużywane zmienne, potencjalne błędy, najlepsze praktyki itp.). Zalecana praktyka wspólnego użycia to: 1) Zainstaluj eslint-config-prettier aby wyłączyć reguły formatu w ESLint które konfliktują z Prettier; 2) Najpierw uruchom formatowanie Prettier, potem kontrolę ESLint. To narzędzie skupia się na formatowaniu (tym, w czym Prettier jest dobry) i nie obejmuje funkcji kontroli kodu ESLint.

Czy można używać na telefonie? Jakie jest doświadczenie mobilne?

Można używać w przeglądarce telefonu. Narzędzie stosuje projekt responsywny, automatycznie dostosowuje układ na urządzeniach z małym ekranem — lewa-prawa kolumny stają się góra-dół, przyciski paska narzędzi są zoptymalizowane pod odpowiednie rozmiary dla dotyku. Jednak edycja kodu na telefonie ma gorsze doświadczenie niż na komputerze. Zaleca się używanie głównie na komputerze. Jeśli często musisz przetwarzać kod na urządzeniach mobilnych, zaleca się używanie mobilnych aplikacji edytora kodu obsługujących Prettier.

Rozwiązywanie problemów

Co zrobić gdy formatowanie nie powiedzie się i wskaże błąd składni?

Najpierw upewnij się że kod jest kompletny: komponenty JSX zwykle potrzebują export lub przynajmniej zawierają jedną funkcję zwracającą JSX. Typowe błędy składni obejmują: 1) Nie zamknięte tagi JSX — sprawdź czy każdy tag otwierający ma odpowiadający tag zamykający lub oznaczenie samozamykające się; 2) Niedopasowane nawiasy klamrowe — czy nawiasy wyrażeń {} w JSX są sparowane; 3) Nie zamknięte cudzysłowy stringów — sprawdź wszystkie pojedyncze cudzysłowy/podwójne cudzysłowy/backticki; 4) Użycie słów zarezerwowanych w JSX — np. class musi być napisane jako className, for jako htmlFor; 5) Wiele elementów głównych — JSX dopuszcza tylko jeden element główny, wiele elementów musi być owiniętych w <>...</> lub <div>. Komunikaty błędów zwykle podają numer linii i przyczynę, które można użyć do lokalizacji.

Brak reakcji lub zły format po uploadzie pliku?

Najpierw upewnij się że rozszerzenie pliku jest poprawne — pliki .jsx/.tsx/.js/.ts/.css/.html/.json można przesyłać. Jeśli rozszerzenie pliku nie jest standardowe, narzędzie może niepoprawnie rozpoznać format języka, w wyniku czego formatowanie nie będzie zgodne z oczekiwaniami. Rozwiązania: 1) Zapewnij że rozszerzenie pliku jest w standardowym formacie; 2) Po uploadzie sprawdź czy wybór języka w lewym górnym rogu jest poprawny, przy niepoprawnym — można przełączyć ręcznie; 3) Upewnij się że zawartość pliku to zwykły tekst a nie plik binarny; 4) Zbyt duże pliki (powyżej 1MB) mogą powodować zawieszanie się przeglądarki, zaleca się używanie narzędzi desktopowych do przetwarzania.

Sformatowany kod różni się od wyniku mojego lokalnego Prettier?

Możliwe przyczyny: 1) Różnica wersji — to narzędzie używa Prettier v3, jeśli Twój projekt używa wersji v2, niektóre szczegóły mogą się różnić (np. zmiana domyślnej wartości przecinka końcowego); 2) Różne konfiguracje — sprawdź czy parametry takie jak szerokość wydruku, wcięcie, cudzysłowy, przecinek końcowy są zgodne z konfiguracją projektu; 3) Różne parsery — JSX używa parsera Babel, TSX używa parsera TypeScript, upewnij się że wybrano właściwy; 4) Różnica wtyczek — jeśli lokalny Prettier ma zainstalowane dodatkowe wtyczki (np. prettier-plugin-tailwindcss), to narzędzie nie obejmuje tych wtyczek. Zaleca się dostosowanie konfiguracji tego narzędzia tak aby była zgodna z .prettierrc projektu.

Kod nie działa poprawnie po skompresowaniu JSX?

Kompresja JSX używa silnika Terser, który najpierw kompiluje JSX do zwykłego JavaScript przed kompresją. Jeśli skompresowany kod nie działa, sprawdź: 1) Czy konfiguracja kompresji jest zbyt agresywna — np. włączenie toplevel może zmienić zachowanie modułu; 2) Czy kod używa eval lub dynamicznego dostępu do właściwości — zaciemnianie zmiennych może spowodować niezgodność nazw; 3) Czy zależy od konkretnych nazw funkcji lub klas — jeśli tak, należy włączyć opcje keep_fnames lub keep_classnames. Do kompresji w środowisku produkcyjnym zaleca się używanie narzędzi budowania projektu (Vite/Webpack), które mają bardziej kompletne konfiguracje i ekosystem wtyczek.

Słownik

JSX: Skrót od JavaScript XML, rozszerzenie składni JavaScript wprowadzone przez React które pozwala pisać struktury tagów podobnych do HTML w JS. Po kompilacji jest konwertowany na wywołania React.createElement().
Prettier: Najpopularniejsze opiniowane (opinionated) narzędzie do formatowania kodu obecnie, obsługuje JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown itp., stało się de facto standardem formatowania kodu front-end.
Babel: Kompilator JavaScript który może przekształcać nowe składnie takie jak ES6+/JSX/TS na kod ES5 kompatybilny ze starymi przeglądarkami, służy również jako podstawowy silnik Prettier do analizy JSX.
Terser: Jeden z najpopularniejszych w branży kompresorów (minifier) JavaScript/JSX, obsługuje zaciemnianie zmiennych, eliminację martwego kodu, kompresję kodu itp. Jest domyślnym kompresorem narzędzi budowania takich jak Webpack/Vite.
Print Width: Jeden z centralnych parametrów Prettier, oznacza maksymalną liczbę znaków na linię kodu, z automatycznym łamaniem przy przekroczeniu tej szerokości. Domyślnie 80 znaków, typowe ustawienia 80/100/120.
Trailing Comma: Dodawanie przecinka również po ostatnim elemencie w wieloliniowych strukturach takich jak tablice, obiekty i parametry funkcji. Może sprawić że Git diff jest czystszy i uniknąć błędów składni. Prettier obsługuje trzy tryby: none/es5/all.
Mangle: Technika skracania nazw zmiennych/funkcji podczas kompresji kodu, zastępująca znaczące długie nazwy krótkimi nazwami takimi jak a/b/c, zmniejszając objętość kodu a także zwiększając trudność czytania.
Dead Code Elimination: Technika optymalizacji kompresorów usuwająca kod który nigdy nie zostanie wykonany (np. kod pod warunkiem false, nieużywane zmienne i funkcje), zmniejszając objętość produktu.
CodeMirror: Komponent edytora kodu po stronie przeglądarki używany przez to narzędzie (wersja 6), dostarcza profesjonalne funkcje edycji takie jak podświetlanie składni, numery linii, dopasowywanie nawiasów, szeroko stosowany w różnych online IDE.
LZ-String: Zaimplementowany w JavaScript algorytm kompresji LZ, używany do wydajnej kompresji i przechowywania zawartości kodu w hashu URL. Wysoki współczynnik kompresji i szybka prędkość dekodowania, odpowiedni dla scenariuszy linków udostępniania.
localStorage: Dostarczane przez przeglądarkę API lokalnego przechowywania klucz-wartość, pojemność około 5-10MB, dane trwale zapisane (chyba że aktywnie wyczyszczone). To narzędzie używa go do przechowywania historii formatowania.
ESLint: Narzędzie do statycznej kontroli kodu JavaScript/TypeScript (Linter), głównie odpowiedzialne za jakość kodu i najlepsze praktyki, zwykle używane w połączeniu z Prettier (Prettier zajmuje się formatem, ESLint zajmuje się jakością).

Obsługiwane języki i formaty plików

Narzędzie obsługuje 7 popularnych języków front-end, które można swobodnie przełączać poprzez menu w lewym górnym rogu:

Język	Rozszerzenie pliku	Silnik formatowania	Silnik kompresji
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (najpierw usuwa typy)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (najpierw usuwa typy)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Niestandardowa implementacja
JSON	`.json`	Prettier (JSON)	JSON.stringify

Przegląd konfiguracji formatowania

12 konfigurowalnych parametrów formatowania i ich funkcja:

Ustawienie	Dostępne wartości	Wartość domyślna	Opis
tabWidth Rozmiar wcięcia	`2 / 4 / 8 / Tab`	`2 spacje`	Liczba spacji na każdy poziom wcięcia, lub użycie znaku Tab
semi Średnik	`true / false`	`true`	Czy dodawać średnik na końcu instrukcji
singleQuote Pojedyncze cudzysłowy	`true / false`	`false (podwójne cudzysłowy)`	Czy ciągi JS używają pojedynczych czy podwójnych cudzysłowów
trailingComma Przecinek końcowy	`none / es5 / all`	`es5`	Czy dodawać przecinek końcowy po ostatnim elemencie w wieloliniowych strukturach
bracketSpacing Odstęp w nawiasach	`true / false`	`true`	Czy dodawać spację wewnątrz nawiasów klamrowych obiektów
arrowParens Nawiasy strzałkowe	`always / avoid`	`always`	Czy dodawać nawiasy przy pojedynczym parametrze funkcji strzałkowej
printWidth Szerokość wydruku	`Liczba (zalecane 80-120)`	`80`	Maksymalna liczba znaków na linię, automatyczne łamanie przy przekroczeniu
jsxSingleQuote Pojedyncze cudzysłowy JSX	`true / false`	`false`	Wartości atrybutów JSX używają pojedynczych cudzysłowów (domyślnie: podwójne)
jsxBracketSameLine Nawias JSX ta sama linia	`true / false`	`false`	Czy prawy nawias wieloliniowego JSX znajduje się w tej samej linii co ostatni atrybut
quoteProps Cudzysłowy właściwości	`as-needed / preserve / consistent`	`as-needed`	Kiedy dodawać cudzysłowy do nazw właściwości obiektów

Porównanie efektów przed i po kompresji JSX

Na przykładzie typowego komponentu React pokazujemy zmianę objętości przed i po kompresji:

Punkt porównania	Sformatowane (rozwój)	Skompresowane (produkcja)	Współczynnik kompresji
Objętość kodu	Około 2.5 KB	Około 0.8 KB	`~68%`
Liczba linii	Około 80 linii	1 linia	`~99%`
Nazwy zmiennych	Znaczące nazwy	Pojedyncze litery a/b/c/d	`—`
Komentarze	Wszystkie komentarze zachowane	Wszystkie usunięte	`—`
Czytelność	Wysoka (debugowanie i czytanie)	Bardzo niska (tylko do odczytu maszynowego)	`—`
Zastosowalne scenariusze	Rozwój, debugowanie, przegląd	Wdrażanie produkcyjne, dystrybucja CDN	`—`

Privacy & Security

Wszystkie operacje tego narzędzia do formatowania JSX są wykonywane całkowicie lokalnie w przeglądarce: kod który wprowadzasz lub przesyłasz jest formatowany i kompresowany tylko w JavaScript w przeglądarce, nie jest wysyłany przez sieć na żaden zewnętrzny serwer. Prettier i Terser są bibliotekami czysto JavaScript, które mogą być wykonywane bezpośrednio po stronie przeglądarki. Historia jest zapisywana w localStorage (pamięci lokalnej) przeglądarki, widoczna tylko na bieżącym urządzeniu i przeglądarce. Funkcja udostępniania URL kompresuje kod poprzez LZ-String i koduje go w części hash URL (zawartość po # nie jest wysyłana na serwer). Strona nie używa śledzenia Cookie, nie gromadzi zawartości kodu wprowadzanego przez użytkownika. Możesz używać tego narzędzia offline, z normalnie działającymi funkcjami centralnymi.

Authoritative References

prettier.ioOficjalna dokumentacja Prettier
terser.orgTerser - Kompresor JavaScript
react.devOficjalna dokumentacja React - Wprowadzenie do JSX