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

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Konwerter liczb szesnastkowych na dziesiętne

Przeliczaj liczby szesnastkowe na dziesiętne (system o podstawie 10). Działa z adresami pamięci, kodami błędów, kanałami RGB oraz liczbami całkowitymi o dowolnej precyzji.

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