Softonic

Formatter JavaScript

Passaggio 1 / 3
Avanti

Incolla un blob di JavaScript minificato o mal indentato e ricevi un codice pulito e leggibile formattato con le stesse regole utilizzate dagli editor. Scegli tab o spazi, virgolette singole o doppie, punto e virgola o meno, virgole finali in ES5 o in tutti. Gestisce la sintassi moderna, chaining opzionale, coalescenza nullish, JSX, TypeScript, await di alto livello.

Come formattare JavaScript

  1. 1

    Incolla la sorgente

    Qualsiasi JS, JSX o TypeScript valido. Il parser rileva il dialetto dalla sintassi.

  2. 2

    Imposta le tue preferenze

    Dimensione dell'indentazione, tab vs spazi, stile delle virgolette, punto e virgola, larghezza di stampa, virgole finali.

  3. 3

    Formatta

    Lo strumento esegue un passaggio compatibile con Prettier e restituisce il risultato formattato.

  4. 4

    Copia l'output

    Copia con un clic o scarica come file. L'indentazione originale viene scartata, non sovrapposta.

Opzioni di stile

Opzione Valori Predefinito
Indentazione tab, 2, 4 2 spazi
Stile delle virgolette singola, doppia doppia
Punto e virgola sempre, mai sempre
Larghezza di stampa 60 - 120 80
Virgole finali nessuna, es5, tutte es5
Parentesi freccia sempre, evita sempre
Spaziatura delle parentesi true, false true
Virgolette singole JSX true, false false

Perché la formattazione è importante

La formattazione non è cosmetica, riguarda la riduzione del carico cognitivo. Un codice formattato in modo coerente consente ai revisori di concentrarsi sul cambiamento logico, non sulla ricerca di una parentesi mal posizionata.

  • Il bike-shedding termina una volta che un progetto adotta un formatter. git diff mostra il cambiamento reale, non dibattiti sull’indentazione.
  • I pre-commit hooks (con strumenti come Husky + lint-staged) formattano automaticamente i file in fase di staging prima che vengano impegnati.
  • Integrazione con l’editor (VS Code, WebStorm) applica le stesse regole al salvataggio.

Cosa non fa la formattazione

  • Non fa linting. Le regole di stile (no-unused-vars, eqeqeq) sono territorio di ESLint. Un formatter modifica solo spazi bianchi e punteggiatura, non rifiuta il codice per problemi logici.
  • Non corregge errori di sintassi. Se l’input è JS non valido, il formatter genererà un errore. Usalo come controllo di sanità per assicurarti che il tuo codice almeno venga analizzato.
  • Non impone convenzioni di denominazione. camelCase vs snake_case è una regola di linting, non una di formattazione.

Errori comuni

  • Combattere con il formatter. Se continui a riformattare dopo che è stato eseguito, stai sprecando tempo. Configura le opzioni o accetta la scelta del progetto.
  • Eseguire la formattazione su un file generato. Output del bundler, codice traspilato, .min.js, nessuno di essi ne beneficia. Formattta le sorgenti, non gli artefatti.
  • Formattare senza analisi. Un regex “pretty-print” corromperà i template literals, regex literals e JSX. Usa sempre un formatter basato su AST (come questo).

Domande frequenti

Sì. Il parser rileva la sintassi TypeScript (tipi, interfacce, generici, decoratori) e formatta di conseguenza. JSX è supportato anche all’interno di file .tsx / .jsx.

Segue le stesse regole dei predefiniti di Prettier, configurabili tramite le solite opzioni (larghezza di stampa, virgolette, punto e virgola, virgole finali). Un file formattato qui dovrebbe corrispondere a uno formattato da Prettier con la stessa configurazione.

Il formatter richiede JavaScript valido e analizzabile. Se ricevi un errore, il codice probabilmente ha un problema di sintassi (parentesi non chiuse, JSX non valido, errore di battitura). Eseguilo prima attraverso un linter se il messaggio non è chiaro.

Sì. Sia i commenti su singola linea (//) che i commenti a blocchi (/* */) vengono mantenuti nell’output, posizionati vicino a dove si trovavano nella sorgente.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Promemoria Markdown

Riferimento pratico Markdown con anteprime reali ed esempi pronti da copiare per titoli, elenchi, tabelle, codice, link, immagini e sintassi GFM.

Formatter HTML

Formatta HTML localmente nel browser con rientri di due o quattro spazi. L’HTML non viene caricato né validato.

Strumento disponibile in altre lingue