Softonic

Formater JavaScript

Krok 1 / 3
Dalej

Wklej fragment zminifikowanego lub źle sformatowanego kodu JavaScript i odzyskaj czysty, czytelny kod sformatowany według tych samych reguł, których używają edytory. Wybierz tabulatory lub spacje, cudzysłowy pojedyncze lub podwójne, średniki lub ich brak, przecinki końcowe w ES5 albo wszędzie. Obsługuje nowoczesną składnię: opcjonalne łańcuchy, scalanie wartości null, JSX, TypeScript oraz await na najwyższym poziomie.

Jak formatować JavaScript

  1. 1

    Wklej kod źródłowy

    Dowolny poprawny kod JS, JSX lub TypeScript. Parser rozpoznaje odmianę na podstawie składni.

  2. 2

    Ustaw preferencje

    Rozmiar wcięcia, tabulatory czy spacje, styl cudzysłowów, średniki, szerokość wiersza, przecinki końcowe.

  3. 3

    Sformatuj

    Narzędzie wykonuje przebieg zgodny z Prettier i zwraca sformatowany wynik.

  4. 4

    Skopiuj wynik

    Skopiuj jednym kliknięciem lub pobierz jako plik. Oryginalne wcięcie zostaje odrzucone, a nie nałożone na wierzch.

Opcje stylu

Opcja Wartości Domyślnie
Wcięcie tab, 2, 4 2 spacje
Styl cudzysłowów single, double podwójne
Średniki always, never zawsze
Szerokość wiersza 60 - 120 80
Przecinki końcowe none, es5, all es5
Nawiasy przy funkcjach strzałkowych always, avoid zawsze
Odstępy w nawiasach true, false true
Pojedyncze cudzysłowy w JSX true, false false

Dlaczego formatowanie ma znaczenie

Formatowanie to nie kwestia estetyki, lecz sposób na zmniejszenie obciążenia poznawczego. Spójnie sformatowana baza kodu pozwala recenzentom skupić się na zmianie logiki, a nie na wyszukiwaniu źle postawionego nawiasu.

  • Jałowe spory kończą się w chwili, gdy projekt przyjmuje formater. git diff pokazuje rzeczywistą zmianę, a nie dyskusje o wcięciach.
  • Haki pre-commit (z narzędziami takimi jak Husky + lint-staged) automatycznie formatują pliki przygotowane do zatwierdzenia, zanim zostaną zatwierdzone.
  • Integracja z edytorem (VS Code, WebStorm) stosuje te same reguły przy zapisie.

Czego formatowanie nie robi

  • Nie sprawdza kodu (lint). Reguły stylu (no-unused-vars, eqeqeq) to domena ESLint. Formater jedynie przekształca białe znaki i interpunkcję, nie odrzuca kodu z powodu problemów z logiką.
  • Nie naprawia błędów składni. Jeśli wejściem jest nieprawidłowy JS, formater zgłosi błąd. Traktuj go jako kontrolę, że kod przynajmniej daje się sparsować.
  • Nie wymusza konwencji nazewnictwa. camelCase kontra snake_case to reguła lintera, a nie formatera.

Częste błędy

  • Walka z formaterem. Jeśli po jego uruchomieniu wciąż formatujesz kod ręcznie, oboje tracicie czas. Albo skonfiguruj opcje, albo zaakceptuj wybór projektu.
  • Formatowanie wygenerowanego pliku. Wynik bundlera, kod po transpilacji, .min.js, żaden z nich na tym nie zyskuje. Formatuj źródła, a nie artefakty.
  • Formatowanie bez parsowania. „Ładne wypisanie“ oparte na wyrażeniach regularnych uszkodzi literały szablonowe, literały wyrażeń regularnych i JSX. Zawsze używaj formatera opartego na AST (takiego jak ten).

Najczęściej zadawane pytania

Tak. Parser wykrywa składnię TypeScript (typy, interfejsy, typy generyczne, dekoratory) i formatuje ją odpowiednio. JSX jest obsługiwany również w plikach .tsx / .jsx.

Stosuje te same reguły co ustawienia domyślne Prettier, konfigurowalne za pomocą zwykłych opcji (szerokość wiersza, cudzysłowy, średniki, przecinki końcowe). Plik sformatowany tutaj powinien odpowiadać plikowi sformatowanemu przez Prettier z tą samą konfiguracją.

Formater wymaga poprawnego, dającego się sparsować kodu JavaScript. Jeśli pojawia się błąd, kod ma najprawdopodobniej problem ze składnią (niezamknięty nawias, nieprawidłowy JSX, literówka). Jeśli komunikat jest niejasny, najpierw przepuść kod przez linter.

Tak. Zarówno komentarze jednowierszowe (//), jak i blokowe (/* */) są zachowywane w wyniku i umieszczane blisko miejsca, w którym znajdowały się w źródle.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach