Formatowanie JavaScript

0 znaków

Przeglądarkowe narzędzie do formatowania kodu JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON z obsługą precyzyjnej konfiguracji w stylu Prettier, kompresją i obfuskacją Terser, wbudowanym edytorem CodeMirror, podglądem na żywo, skrótami klawiszowymi oraz uploadem i pobieraniem plików.

Powiązane Rekomendacje

Kompresja JavaScript

CSS Formatter

Formatownik JSX

Generator QR Code i kodów kreskowych

Konwerter cURL na kod

Obfuskacja JS

Przypadki użycia

  • Wklejanie skompresowanego kodu JS od firm trzecich podczas tworzenia frontendu w celu szybkiego upiększenia układu dla czytelności i debugowania
  • Ujednolicenie formatowania kodu JavaScript/TypeScript przed przeglądem zespołowym, eliminując różnice stylu wcięć, cudzysłowów i średników, aby skupić się na przeglądzie logiki
  • Szybkie sformatowanie chaotycznie ułożonego starego kodu JS podczas przejmowania projektów legacy, aby szybko zrozumieć strukturę i hierarchię logiki kodu
  • Użycie kompresji Terser do obfuskacji kodu JavaScript przed wdrożeniem produkcyjnym, zmniejszając rozmiar pliku i przyspieszając ładowanie strony
  • Formatowanie na żywo podczas pisania demo JS/JSX online, utrzymując porządek w kodzie ułatwiający udostępnianie współpracownikom lub społeczności
  • Nauka efektów poszczególnych opcji konfiguracyjnych Prettier poprzez natychmiastowy podgląd wyników formatowania podczas dostosowywania opcji, rozumiejąc działanie parametrów tabWidth, trailingComma i innych
  • Przetwarzanie fragmentów kodu skopiowanych z platform takich jak Stack Overflow, GitHub, automatycznie naprawiając problemy z wcięciami i łamaniem linii
  • Automatyczne formatowanie wcięć i łamania linii podczas pisania plików konfiguracyjnych JSON, unikając błędów parsowania spowodowanych przecinkami lub nawiasami
  • Kompleksowe formatowanie kodu JS+CSS+HTML w tym samym projekcie podczas tworzenia stron CSS/HTML, utrzymując spójny styl
  • Szybkie uporządkowanie kodu JS z algorytmami przed rozmowami kwalifikacyjnymi, poprawiając wygląd kodu poprzez standardowe układanie

Jak Używać

  1. Otwórz stronę narzędzia do formatowania JavaScript, wklej kod bezpośrednio do lewego obszaru edycyjnego lub kliknij przycisk uploadu, aby wybrać plik lokalny (obsługiwane formaty .js/.ts/.jsx/.tsx/.css/.html/.json)
  2. Wybierz odpowiedni typ języka: narzędzie zazwyczaj automatycznie rozpoznaje, ale jeśli rozpoznawanie jest niedokładne, ręcznie wybierz JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON z listy rozwijanej języka
  3. Skonfiguruj opcje formatowania: możesz wybrać szybki preset stylu (default/modern/classic) lub ręcznie dostosować opcje Prettier (szerokość wcięcia, tabulacje/spacje, szerokość linii, średniki, cudzysłowy, przecinki końcowe, nawiasy funkcji strzałkowych)
  4. Jeśli chcesz skompresować kod, przełącz się na tryb minifikacji i skonfiguruj opcje kompresji Terser (czy włączyć compress, czy mangle nazwy zmiennych, czy kompresować zmienne najwyższego poziomu), poziom optymalizacji CSS oraz opcje minifikacji HTML
  5. Narzędzie przetwarza kod w czasie rzeczywistym, prawy obszar edycyjny natychmiast wyświetla sformatowany lub skompresowany wynik, a pasek stanu na dole pokazuje w czasie rzeczywistym statystyki liczby znaków, bajtów i stopnia kompresji
  6. Używaj skrótów klawiszowych dla większej wydajności: Ctrl+Shift+B wyzwala formatowanie, Ctrl+Shift+M przełącza tryb minifikacji, Ctrl+Shift+O otwiera plik, Ctrl+Shift+D pobiera wynik, Ctrl+Shift+K czyści edytor
  7. Po uzyskaniu satysfakcjonującego wyniku kliknij przycisk kopiowania, aby skopiować wynik do schowka, lub przycisk pobierania, aby zapisać jako plik lokalny; możesz również kliknąć przycisk udostępniania, aby wygenerować link URL z kodem i konfiguracją do udostępnienia innym

Funkcje

  • Wsparcie dla wielu języków: jednoczesne formatowanie 7 popularnych języków frontendowych — JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — kompleksowa obsługa kodu frontendowego w jednym miejscu
  • Precyzyjna konfiguracja w stylu Prettier: pełne opcje, w tym szerokość wcięcia tabWidth (2/4/8 spacji), useTabs (tabulacje vs spacje), printWidth (szerokość linii), semi (średniki), singleQuote (apostrofy vs cudzysłowy), trailingComma (przecinki końcowe), arrowParens (nawiasy funkcji strzałkowych) i więcej
  • Funkcja minifikacji kodu: zintegrowany silnik kompresji Terser z opcjami produkcyjnymi — compress (kompresja), mangle (obfuskacja nazw zmiennych), toplevel (kompresja zmiennych najwyższego poziomu)
  • Specjalne optymalizacje CSS: konfiguracja poziomu optymalizacji CSS z obsługą minifikacji CSS, usuwania komentarzy i bieli
  • Opcje minifikacji HTML: konfiguracja HTML minify z możliwością zwijania bieli, usuwania komentarzy i usuwania cudzysłowów atrybutów
  • Przetwarzanie na żywo: formatowanie i podgląd w czasie rzeczywistym po wklejeniu kodu — wyniki układania widoczne bez klikania przycisków
  • Edytor CodeMirror: profesjonalny edytor CodeMirror z podświetlaniem składni, numerami linii, dopasowywaniem nawiasów, zwijaniem kodu i innymi profesjonalnymi funkcjami edycyjnymi
  • Upload i pobieranie plików: obsługa bezpośredniego wgrywania lokalnych plików .js/.ts/.jsx/.tsx/.css/.html/.json oraz pobierania przetworzonego pliku jednym kliknięciem
  • Linki do udostępniania: zapisywanie kodu i konfiguracji w hash URL, generowanie linków do udostępnienia współpracownikom w celu odtworzenia scenariusza formatowania
  • Historia: automatyczne zapisywanie historii formatowania w localStorage, umożliwiając powrót do poprzednich wersji kodu i konfiguracji w dowolnym momencie
  • Skróty klawiszowe: obsługa skrótów Ctrl+Shift+B do formatowania, Ctrl+Shift+M do minifikacji, Ctrl+Shift+O do otwierania pliku, Ctrl+Shift+D do pobierania, Ctrl+Shift+K do czyszczenia i innych
  • Szybkie presety: 3 szybkie presety konfiguracyjne — default (domyślny), modern (nowoczesny), classic (klasyczny) — do przełączania popularnych stylów jednym kliknięciem
  • Statystyki znaków: wyświetlanie w czasie rzeczywistym liczby znaków, bajtów i porównania stopnia kompresji dla kodu oryginalnego i przetworzonego
  • Przykładowy kod: wbudowany przykładowy kod dla różnych języków, klikalny do załadowania i szybkiego przetestowania funkcji

Często Zadawane Pytania

Czy logika kodu JavaScript zmieni się po formatowaniu?

Nie. Formatowanie jedynie dostosowuje kwestie związane z "układem" — biel, wcięcia, łamanie linii, pozycje nawiasów, styl cudzysłowów — i jest realizowane w oparciu o transformację AST. Struktura AST kodu przed i po formatowaniu jest całkowicie identyczna, a logika wykonywania w 100% taka sama. O ile kod jest poprawny składniowo i może być prawidłowo zanalizowany, formatowanie nie zmienia żadnych zachowań wykonawczych, można używać bez obaw. Jednak chociaż kompresja (mangle) również nie zmienia logiki, należy zwrócić uwagę na specjalne scenariusze jak eval i eksporty zmiennych globalnych, aby uniknąć nieprawidłowej konfiguracji.

Co zrobić, jeśli wyniki formatowania w narzędziu różnią się od wyników formatowania lokalnego VS Code/Prettier?

Logika formatowania tego narzędzia stara się być zgodna z oficjalnym zachowaniem Prettier. Jeśli wyniki się różnią, sprawdź opcje konfiguracyjne: czy te kluczowe opcje — tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens — są całkowicie identyczne po obu stronach. Dodatkowo zwróć uwagę na różnice wersji Prettier — domyślne konfiguracje Prettier 2/3 mają subtelne różnice (v3 domyślnie trailingComma: all, v2 domyślnie es5; od v2 arrowParens domyślnie always). Jeśli w lokalnym projekcie jest plik konfiguracyjny .prettierrc, dopasuj na stronie internetowej opcje zgodnie z nim, a wyniki formatowania będą takie same.

Czy skompresowany kod można odzyskać? Czy można przywrócić nazwy zmiennych po mangle?

Sformatowany kod jest całkowicie odwracalny — ponieważ zmienił się tylko układ, wszystkie identyfikatory i logika są w pełni zachowane, ponowne formatowanie je przywróci. Jednak w przypadku skompresowanego kodu: tylko część z usuniętą bielą i komentarzami może być ponownie sformatowana w celu przywrócenia układu, ale mangle (obfuskacja nazw zmiennych) jest nieodwracalna — oryginalne znaczące nazwy zmiennych jak userName stają się a, a ten proces jest jednokierunkowy i nie może automatycznie przywrócić oryginalnych nazw. Jeśli potrzebujesz debugować skompresowany kod w środowisku produkcyjnym, skonfiguruj generowanie plików Source Map, aby mapować z powrotem na pozycje kodu źródłowego przez Source Map. Dlatego przed kompresją koniecznie zachowaj oryginalny, nieskompresowany kod źródłowy!

Jakie przeglądarki są obsługiwane? Czy można używać na telefonie?

To narzędzie obsługuje wszystkie nowoczesne przeglądarki: najnowsze wersje Chrome, Firefox, Safari, Edge działają poprawnie. Przeglądarka IE nie jest obsługiwana (obecnie nikt nie używa IE do tworzenia). Układ responsywny dostosowuje się do ekranów telefonów, ale edycja kodu na małych ekranach nie jest najlepszym doświadczeniem — zaleca się używanie w przeglądarce na komputerze, duży ekran zapewnia większą wydajność. Wszystkie obliczenia formatowania i kompresji działają lokalnie w przeglądarce, kod nie jest wysyłany na żaden serwer, kod nie opuszcza Twojej przeglądarki, co jest bezpieczne i wiarygodne.

Dlaczego niektórych kodów nie można sformatować, pojawia się błąd parsowania?

Narzędzie do formatowania najpierw musi zanalizować kod do AST, aby działać. Jeśli kod ma błędy składniowe (niedopasowane nawiasy, niezamknięte ciągi znaków, błędnie napisane słowa kluczowe, nadmiarowe przecinki itp.), parser nie jest w stanie zrozumieć struktury kodu i zgłasza błąd. Najpierw sprawdź błędy składniowe w samym kodzie: sprawdź, czy w konsoli są komunikaty o błędach, czy edytor ma czerwone faliste linie wskazujące miejsca błędów — po naprawieniu błędów składniowych formatowanie będzie działać poprawnie. Dodatkowo upewnij się, że wybrano właściwy tryb języka, kod JSX/TSX nie powinien być ustawiony jako zwykły JS.

Czy mój kod zostanie wysłany na serwer? Czy kod jest bezpieczny?

Nie. Całe formatowanie, kompresja i podświetlanie składni działają lokalnie w Twojej przeglądarce przez JavaScript, kod nie jest wysyłany na żaden serwer, jest przetwarzany całkowicie na Twoim urządzeniu. Możesz to przetestować odłączając sieć: po odłączeniu sieci narzędzie nadal działa poprawnie. Funkcja linków do udostępniania koduje kod i konfigurację w hash URL, kliknięcie udostępnienia jedynie generuje URL, kod nie jest wgrywany — ale jeśli wyślesz link komuś, kto go otworzy, zobaczy Twój kod, więc nie udostępniaj linków z wrażliwym kodem.

Czy można formatować jednoplikowe komponenty Vue (pliki .vue)? A co z Svelte?

Obecnie wielojęzyczna obsługa tego narzędzia obejmuje JS/TS/JSX/TSX/CSS/HTML/JSON. Jednoplikowe komponenty Vue (SFC) z <template>/<script>/<style> i komponenty Svelte nie są obecnie obsługiwane w zakresie bezpośredniego całościowego formatowania, ale możesz skopiować oddzielnie część script (JS/TS), część style (CSS) i część template (HTML) i wybrać odpowiedni język do formatowania osobno. W przyszłości planowane jest dodanie obsługi formatowania SFC Vue/Svelte.

Jak ustawić ujednoliconą konwencję formatowania w zespole?

Ujednolicona konwencja w zespole zaleca trójwarstwowe współdziałanie: ① umieść .editorconfig w katalogu głównym projektu, aby ujednolicić podstawowe ustawienia edytora (wcięcia, znaki nowej linii, kodowanie); ② użyj Prettier i umieść plik konfiguracyjny .prettierrc w projekcie, niech wszyscy i CI używają tej konfiguracji do formatowania, to narzędzie również może wybrać odpowiednie opcje, aby dopasować konfigurację; ③ użyj ESLint + eslint-config-prettier, aby wyłączyć reguły stylu ESLint i sprawdzać tylko jakość kodu. Skonfiguruj edytor na automatyczne formatowanie przy zapisie (VS Code — zainstaluj rozszerzenie Prettier, ustaw editor.formatOnSave: true), dodaj krok lint w CI do sprawdzania formatu, zapewniając, że commitowany kod jest zgodny z konwencją.

Jakie korzyści dają przecinki końcowe (trailingComma)? Czy warto je włączyć?

Zdecydowanie zaleca się włączenie przecinków końcowych (przynajmniej na poziomie es5, polecane all). Korzyści przecinków końcowych: ① czystszy Git diff: dodając ostatni element nie trzeba modyfikować poprzedniej linii, aby dodać przecinek — tylko diff nowej linii, bez zanieczyszczania diffu poprzedniej linii przez dodanie przecinka; ② wygodniejsze przestawianie kolejności elementów, nie trzeba obsługiwać kwestii przecinka końcowego; ③ nowoczesne przeglądarki i Node.js w pełni obsługują przecinki końcowe, stare IE nie obsługuje, ale obecnie nie trzeba uwzględniać IE. Jedyna wada to dodatkowy przecinek, ale w porównaniu do przynoszonych udogodnień jest to całkowicie warte. Prettier v3 domyślnie ustawia all.

Czy podczas kompresji należy włączyć mangle? Jaka jest różnica między compress a mangle?

Podczas kompresji produkcyjnej zaleca się włączenie zarówno compress, jak i mangle — są to niezależne opcje kompresji: compress to optymalizacja kodu (stałe zwijanie, usuwanie martwego kodu, upraszczanie wyrażeń itp.), modyfikująca strukturę kodu tylko gdy może to uprościć, bez zmiany nazw zmiennych; mangle to skracanie nazw zmiennych lokalnych, zmiana długich nazw zmiennych na pojedyncze znaki — to jedno z głównych źródeł zmniejszenia rozmiaru. O ile Twój kod nie ma być biblioteką, z której zewnętrznie wywoływane są nazwy zmiennych, lub nie używasz eval do dynamicznego dostępu do nazw zmiennych, mangle jest bezpieczne i może znacząco zmniejszyć rozmiar. Jeśli jest to biblioteka open source wymagająca zachowania nazw API, skonfiguruj mangle.reserved, aby zachować eksportowane nazwy.

Dlaczego podczas formatowania JSON niektóre znaki są automatycznie eskejpowane?

Specyfikacja JSON ma ścisłe wymagania składniowe: ciągi znaków muszą być w cudzysłowach podwójnych, nie może być przecinków końcowych, specjalne znaki muszą być eskejpowane (znak nowej linii → \n, cudzysłów → \", ukośnik odwrotny → \\, Tab → \t itp.). Jeśli w Twoim ciągu JSON są nieeskejpowane specjalne znaki, podczas formatowania zostaną automatycznie eskejpowane zgodnie ze specyfikacją JSON, co jest prawidłowym zachowaniem. Uwaga: JSON to nie JavaScript, w JSON nie można pisać komentarzy, nie może być apostrofów, nie może być undefined — te wszystkie rzeczy spowodują niepowodzenie parsowania JSON.

Jak sprawić, by parametry funkcji strzałkowej zawsze miały nawiasy? Lub aby ich nie miały?

Dostosuj opcję arrowParens: always oznacza zawsze dodawanie nawiasów ((x) => x), jest to domyślne Prettier v2+, zaletą jest brak konieczności dodawania/usuwania nawiasów przy dodawaniu/usuwaniu parametrów, co daje czystsze diffy; avoid oznacza pomijanie nawiasów przy jednym parametrze (x => x), kod jest bardziej zwięzły. Wybierz zgodnie ze stylem zespołu — oba style nie są ani dobre, ani złe, wystarczy je ujednolicić. Uwaga: adnotacje typów parametrów, parametry domyślne, parametry z destrukturyzacją zawsze będą miały nawiasy niezależnie od konfiguracji.

Czy formatowanie może automatycznie naprawić problemy stylu zgłaszane przez ESLint?

To narzędzie to formatowanie w stylu Prettier, może naprawiać tylko problemy stylu obsługiwane przez Prettier (wcięcia, cudzysłowy, średniki, przecinki końcowe, szerokość linii, spacje itp.). Problemy z jakością kodu zgłaszane przez ESLint (np. nieużywane zmienne, brakujący return, problemy z ===) to problemy logiczne, narzędzie do formatowania nie może ich automatycznie naprawić — wymagana jest ręczna modyfikacja. Jeśli Twój ESLint jest skonfigurowany z eslint-config-prettier, to po sformatowaniu przez Prettier ESLint nie będzie już zgłaszać błędów związanych ze stylem, a pozostałe problemy jakości wystarczy naprawić ręcznie.

Jakie maksymalne rozmiary plików kodu są obsługiwane? Czy formatowanie dużych plików będzie się zawieszać?

Ponieważ formatowanie działa lokalnie w przeglądarce, obsługiwany rozmiar pliku zależy od wydajności Twojego urządzenia — zazwyczaj pliki JS od kilkudziesięciu KB do kilku MB mogą być normalnie przetwarzane, co w zupełności wystarcza dla pojedynczych plików JS w zwykłych projektach. Jeśli jest to szczególnie duży spakowany plik JS (kilkadziesiąt MB), może wystąpić opóźnienie a nawet brak pamięci — tak bardzo duże pliki zaleca się przetwarzać lokalnie z wiersza poleceń Node.js+Prettier/Terser. Rozmiary pojedynczych plików źródłowych w codziennym tworzeniu zazwyczaj mieszczą się w zakresie obsługi.

Dlaczego skrót Ctrl+Shift+B w Chrome otwiera menedżera zakładek?

Jest to domyślny konflikt skrótów w przeglądarce Chrome: Ctrl+Shift+B to skrót Chrome do pokazywania/ukrywania paska zakładek, a skróty przeglądarki mają wyższy priorytet niż skróty JS strony internetowej, dlatego są przechwytywane przez Chrome. Rozwiązanie: ① operuj przyciskiem formatowania; ② jeśli jesteś użytkownikiem Mac, Cmd+Shift+B nie koliduje z Chrome; ③ możesz zmienić skróty przeglądarki w ustawieniach Chrome; ④ możesz najpierw nadać fokus edytorowi, w niektórych przypadkach fokus edytora może przechwycić skrót. Jeśli w innych przeglądarkach również występują konflikty skrótów, zawsze można operować przyciskami.

Rozwiązywanie problemów

Błąd parsowania składni podczas formatowania, niemożność formatowania

Błędy składniowe w samym kodzie: niedopasowane nawiasy, niezamknięte ciągi znaków, brakujące słowa kluczowe, nadmiarowe przecinki itp. Błędy składniowe powodują niepowodzenie analizy AST i uniemożliwiają formatowanie — najpierw napraw błędy składni Nieprawidłowo wybrany tryb języka: np. kod JSX/TSX wybrany jako JavaScript, składnia generyków błędnie rozpoznana jako tagi JSX lub odwrotnie — ręcznie wybierz właściwy typ języka Zawiera eksperymentalną składnię: kod używa zbyt nowych propozycji składni JavaScript, które nie stały się jeszcze standardem (np. dekoratory, operator Pipeline), a parser ich nie obsługuje Plik ma nagłówek BOM: trzy bajty UTF-8 BOM (EF BB BF) na początku, niektóre parsery mogą nie obsłużyć — spróbuj zapisać jako UTF-8 bez BOM W kodzie wmieszany kod innego języka: np. języki szablonów osadzone w HTML (EJS, Handlebars, dyrektywy szablonów Vue) nie są czystym JS/HTML, parser ich nie rozpoznaje W kodzie są niezakończone komentarze blokowe: /* bez odpowiadającego */, niezamknięty komentarz powoduje, że cały dalszy kod jest traktowany jako komentarz Niejednoznaczność wyrażeń regularnych: niektóre miejsca wyglądające jak dzielenie/operator są w rzeczywistości literałami wyrażeń regularnych, co błędnie rozpoznawane przez parser — dodaj średnik przed wyrażeniem regularnym, aby usunąć niejednoznaczność

Błąd podczas kompresji (Minify), niemożność kompresji

Błędy składniowe kodu: podobnie jak formatowanie, kompresja również opiera się na AST, kod musi być poprawny składniowo, aby można go było skompresować — najpierw napraw błędy składni Użyto import/export ES Module bez poprawnego oznaczenia typu modułu lub konfiguracja kompresji jest nieodpowiednia dla typu modułu Problem podczas mangle nazw właściwości: jeśli włączono mangle nazw właściwości (domyślnie wyłączone), dynamiczny dostęp do właściwości obj['key'] spowoduje nieznalezienie właściwości — nie włączaj niepotrzebnie property mangle W kodzie jest eval() lub instrukcja with: Terser może błędnie obsłużyć mangle przy napotkaniu eval/with, ponieważ eval może dynamicznie uzyskiwać dostęp do nazw zmiennych w zakresie — unikaj eval w kodzie produkcyjnym Błąd konfiguracji nazw zastrzeżonych: jeśli skonfigurowano mangle.reserved, ale z błędami pisowni lub pominięto nazwy wymagające zachowania (np. jQuery, $ i inne biblioteki globalne), może to spowodować błędy wykonania Problem konfiguracji kompresji toplevel: jeśli kod działa w zakresie globalnym, a nie jest spakowany w IIFE/module, włączenie compress.toplevel: true może zniszczyć odwołania do zmiennych globalnych Zbyt stara wersja docelowej przeglądarki: Terser podczas kompresji może użyć składni nieobsługiwanej przez docelową przeglądarkę — można skonfigurować wersję ecma, aby określić wersję składni JS wyjściowej

Chińskie znaki/chińskie komentarze wyświetlane jako krzaczki po sformatowaniu

Kodowanie pliku nie jest UTF-8: wgrany plik lokalny ma kodowanie chińskie jak GBK/GB2312, narzędzie domyślnie analizuje jako UTF-8, powodując krzaczki — przekonwertuj plik na kodowanie UTF-8 w edytorze przed wgraniem Kodowanie strony przeglądarki zostało przypadkowo zmienione: chociaż obecne przeglądarki domyślnie używają UTF-8, niektóre stare przeglądarki lub specjalne ustawienia mogą mieć nieprawidłowe kodowanie — sprawdź w menu przeglądarki ustawienie kodowania strony na UTF-8 Plik ma nagłówek UTF-8 BOM: chociaż BOM zazwyczaj nie powoduje krzaczków, niektóre parsery obsługują BOM nieprawidłowo — użyj edytora, aby usunąć BOM i zapisać jako UTF-8 bez BOM Problem konwersji kodowania podczas kopiowania i wklejania: podczas kopiowania kodu z niektórych starych programów (jak stary Notatnik, Word) specjalne znaki (jak chińskie cudzysłowy, spacje pełnoszerokościowe) mogą zostać błędnie przekonwertowane — staraj się kopiować z nowoczesnych edytorów jak VS Code Problem z czcionką: niektóre czcionki o stałej szerokości słabo obsługują znaki chińskie, powodując nieprawidłowe wyświetlanie — to nie jest problem kodowania, tylko czcionki, wystarczy zmienić czcionkę o stałej szerokości obsługującą chińskie Specjalne znaki Unicode: kod zawiera emoji, spacje o zerowej szerokości, znaki sterujące i inne specjalne niewidoczne znaki, które mogą spowodować nieprawidłowe wyświetlanie lub błędy formatowania — włącz w edytorze wyświetlanie niewidocznych znaków, aby sprawdzić Problem kompresji gzip lub proxy: jeśli krzaczki pojawiają się po wdrożeniu, sprawdź, czy serwer poprawnie ustawia nagłówek odpowiedzi Content-Type: application/javascript; charset=utf-8

Formatowanie kodu JSX/TSX kończy się niepowodzeniem lub błędem parsowania

Tryb języka wybrany jako JavaScript zamiast JSX/TSX: zwykły parser JS nie rozpoznaje składni <tag> i będzie błędnie interpretować tagi JSX jako operatory porównania, zgłaszając błąd — ręcznie wybierz język JSX lub TSX Niejednoznaczność składni generyków TSX: parametr generyczny <T> w TSX może być błędnie rozpoznany jako tag JSX, np. const f = <T>(x: T) => x — dodaj przecinek po <T> w postaci <T,>, aby usunąć niejednoznaczność (jest to powszechny zapis w TSX) Tagi JSX niezamknięte: JSX wymaga poprawnego zamknięcia wszystkich tagów, tagi samozamykające muszą mieć />, w przeciwieństwie do HTML — <img> musi być zapisane jako <img/> Problem z nawiasami wyrażeń JS w JSX: wyrażenia JS w {} muszą być poprawnie zamknięte, {obj.prop} bez zamykającego } spowoduje zaburzenie dalszego parsowania Problem ze skróconą składnią Fragment: puste tagi <></> wymagają obsługi React 16+ i muszą być poprawnie zamknięte; jeśli używasz <Fragment>, wymagany jest poprawny import Problem z cudzysłowami wartości atrybutów JSX: jeśli wartość atrybutu JSX jest ciągiem znaków, musi być w cudzysłowach (podwójnych), jeśli jest wyrażeniem — w {}, nie mieszaj obu Rozszerzenie pliku TSX to .ts zamiast .tsx: parser TypeScript włącza analizę JSX tylko dla rozszerzenia .tsx, pisanie JSX w pliku .ts spowoduje błąd — używaj poprawnego rozszerzenia

Wcięcia po formatowaniu są nieprawidłowe, niezgodne z oczekiwaniami

Nieprawidłowa konfiguracja tabWidth: sprawdź, czy konfiguracja szerokości wcięcia to 2 czy 4 — zespoły często używają 2 spacji, jeśli oczekujesz 4 spacji, musisz ręcznie dostosować opcję tabWidth Nieprawidłowa konfiguracja useTabs: jeśli zespół używa wcięć tabulacjami, a Ty skonfigurowałeś spacje lub odwrotnie, sprawdź, czy opcja useTabs jest poprawna Błędy składniowe w samym kodzie: błędy składniowe powodują nieprawidłową strukturę AST, a wcięcia po formatowaniu są chaotyczne — najpierw napraw błędy składniowe wskazywane przez czerwone faliste linie Wymieszane Taby i spacje: w oryginalnym kodzie niektóre miejsca mają wcięcia tabulacjami, a inne spacjami — formatowanie ujednolici styl do skonfigurowanego, ale jeśli oryginalny kod jest zbyt chaotyczny, może być wymagane wielokrotne formatowanie Zbyt mała wartość printWidth: jeśli szerokość linii jest ustawiona zbyt mało (np. 40), kod będzie często łamany, co wygląda jak chaotyczne wcięcia — ustawienie 80 lub 100 jest bardziej odpowiednie Opcje układu jak bracketSameLine/arrowParens skonfigurowane niezgodnie z oczekiwaniami: pozycja nawiasów klamrowych, nawiasy funkcji strzałkowych i inne style są determinowane przez konfigurację, nie jest to problem wcięć — wystarczy dostosować odpowiednie opcje Konflikt EditorConfig z konfiguracją lokalnego edytora: jeśli lokalny edytor używa automatycznego ustawiania wcięć z .editorconfig, a opcje skonfigurowane w przeglądarce są inne, wyniki formatowania po obu stronach będą niespójne — ujednolić konfigurację

Skróty klawiszowe nie działają, naciśnięcie nie daje reakcji

Kursor nie jest w edytorze: skróty działają tylko gdy edytor ma fokus, jeśli fokus jest na przycisku, polu wejściowym lub innym miejscu strony, skrót nie zostanie wyzwolony — najpierw kliknij obszar edytora, aby nadać mu fokus Konflikt skrótów przeglądarki: niektóre skróty (np. Ctrl+Shift+B w Chrome otwiera pasek zakładek, Ctrl+Shift+O w Firefox otwiera historię) są zajęte przez przeglądarkę — można operować przyciskami lub spróbować użyć Cmd zamiast Ctrl (Mac) Problem z metodą wprowadzania: w trybie chińskiej metody wprowadzania niektóre skróty mogą być przechwytywane — przełącz się na angielską metodę wprowadzania przed użyciem skrótów Zajęcie przez inne rozszerzenia/wtyczki: rozszerzenia skrótów przeglądarki, skrypty Tampermonkey, wtyczki proxy mogą zajmować skróty — spróbuj otworzyć stronę w trybie incognito Konflikt skrótów systemowych: system operacyjny lub inne uruchomione programy (jak narzędzia do zrzutów ekranu, metody wprowadzania, IDE) zajmują odpowiednie kombinacje klawiszy globalnymi skrótami — można zmienić skróty w innych programach lub operować przyciskami tego narzędzia Różnice klawiatury Mac/Windows: pamiętaj, Mac używa klawisza Cmd (⌘), a Windows/Linux klawisza Ctrl — nie mieszaj; Option na Mac odpowiada Alt w Windows Ograniczenia bezpieczeństwa przeglądarki: niektóre skróty związane z dostępem do plików mogą być ograniczone przez politykę bezpieczeństwa przeglądarki i nie można ich w pełni zasymulować przez JS — w razie potrzeby bezpośrednio klikaj odpowiednie przyciski

Słownik

Prettier
Najpopularniejsze obecnie narzędzie do formatowania kodu frontendowego, przyjmujące filozofię projektowania Opinionated, obsługujące wiele języków jak JS/TS/CSS/HTML/Markdown, wymuszające ujednolicenie stylu kodu i kończące spory zespołowe dotyczące stylu.
Terser
Nowoczesne narzędzie do kompresji JavaScript, będąca forkiem UglifyJS kompatybilnym z ES6+, obsługujące kompresję i obfuskację składni ES6+, domyślny minifikator nowoczesnych narzędzi budowania jak Webpack, Rollup, Vite.
UglifyJS
Klasyczne narzędzie do kompresji JavaScript, poprzednik Terser, ale obsługujące tylko składnię ES5 i starszą, bez obsługi nowych cech ES6+ — obecnie w nowych projektach zazwyczaj używa się Terser jako zamiennika.
AST (Abstract Syntax Tree)
Abstrakcyjne drzewo składni, drzewiasta reprezentacja struktury składniowej kodu źródłowego, gdzie każdy węzeł reprezentuje konstrukcję składniową w kodzie. Narzędzia jak Babel, Prettier, Terser, ESLint są implementowane w oparciu o AST.
ESLint
Najpopularniejsze narzędzie do sprawdzania kodu (Linter) w ekosystemie JavaScript/TypeScript, służące do wykrywania problemów jakości kodu i ujednolicania stylu kodu, może być używane razem z Prettier.
EditorConfig
Wieloedytorowy plik konfiguracyjny do ujednolicania stylu kodu, definiujący podstawowe ustawienia jak styl wcięć, rozmiar wcięć, znaki nowej linii, kodowanie, zapewniając spójne zachowanie różnych edytorów podczas otwierania tego samego projektu.
CodeMirror
Komponent edytora kodu przeglądarkowego, oferujący profesjonalne funkcje edycyjne jak podświetlanie składni, numery linii, dopasowywanie nawiasów, zwijanie kodu, wielokursorowość — jeden z dominujących wyborów edytorów kodu webowych.
minify (kompresja)
Proces minimalizacji rozmiaru kodu bez zmiany logiki kodu poprzez usuwanie bieli, komentarzy, skracanie nazw zmiennych, optymalizację kodu itp., stosowany w środowiskach produkcyjnych w celu przyspieszenia ładowania.
mangle (obfuskacja/niszczenie)
Etap kompresji polegający na skracaniu nazw zmiennych, funkcji i parametrów do pojedynczych znaków, znacznie zmniejszający rozmiar kodu jednocześnie utrudniając jego odczyt, zwany też obfuskacją nazw zmiennych.
beautify (upiększanie)
Czyli formatowanie kodu, ponowne układanie wcięć, łamań linii i dodawanie spacji w skompresowanym lub chaotycznym kodzie w celu poprawy czytelności, przeciwieństwo minify.
trailing comma (przecinek końcowy)
Przecinek po ostatnim elemencie w obiektach, tablicach i parametrach funkcji, ułatwiający czystszy Git diff przy dodawaniu nowych elementów, obsługiwany w środowiskach ES5+.
arrow parens (nawiasy funkcji strzałkowej)
Określa, czy parametr funkcji strzałkowej z jednym parametrem wymaga otoczenia nawiasami, np. x => x (bez nawiasów) vs (x) => x (z nawiasami).
printWidth (szerokość linii)
Liczba znaków w linii, po przekroczeniu której następuje automatyczne łamanie linii podczas formatowania, Prettier domyślnie 80 znaków, zespoły mogą dostosować do 100 lub 120 w zależności od rozmiaru monitora.
semicolons (średniki)
Określa, czy dodawać średniki na końcu instrukcji JavaScript. JS ma mechanizm ASI automatycznego wstawiania średników, ale w większości scenariuszy nadal zaleca się dodawanie średników dla uniknięcia niespodzianek.
single quote (apostrof)
Używanie apostrofów lub cudzysłowów dla ciągów znaków. W JS funkcjonalność jest całkowicie równoważna, różnica to tylko preferencja stylistyczna, a specyfikacja JSON wymusza cudzysłowy podwójne.
double quote (cudzysłów podwójny)
Używanie cudzysłowów podwójnych do otaczania ciągów znaków, domyślny styl w wielu językach, a także format ciągów znaków wymagany przez specyfikację JSON.
tab width (szerokość wcięcia)
Liczba spacji odpowiadająca każdemu poziomowi wcięcia. Społeczność frontendowa często używa 2 spacji, języki backendowe 4 spacji.
BOM (Byte Order Mark)
Znacznik kolejności bajtów, trzy bajty EF BB BF mogące wystąpić na początku pliku w kodowaniu UTF-8, służące do oznaczenia kodowania, w niektórych scenariuszach mogące spowodować błędy parsowania JS.
UTF-8
Unicode Transformation Format 8-bit, obecnie standardowe kodowanie plików w projektach Web i frontendowych, obsługujące wszystkie znaki Unicode, domyślnie zalecane kodowanie.
source map (mapa źródłowa)
Plik mapujący skompresowany/transpilowany kod z powrotem na oryginalne pozycje kodu źródłowego, używany do debugowania w środowisku produkcyjnym, umożliwiający zlokalizowanie numeru linii w kodzie źródłowym, gdy skompresowany kod zgłasza błąd.

Tabela porównawcza kluczowych opcji Prettier

Przykład porównania kodu JavaScript przed i po kompresji

Ściągawka skrótów klawiszowych