Formattazione JavaScript

Carica

0 caratteri

Strumento di formattazione codice browser-based per JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON con configurazione fine compatibile con Prettier, compressione e offuscamento Terser. Editor CodeMirror integrato con anteprima in tempo reale, scorciatoie da tastiera, upload e download file.

Raccomandazioni correlate

Compressione JS

CSS Formatter

Formattatore JSX

Generatore di QR Code/Codici a Barre

Generatore di codice cURL

Offuscamento JS

Casi d'uso

Quando si incolla codice JS di terze parti compresso durante lo sviluppo frontend per abbellire rapidamente l'impaginazione e facilitare lettura e debug
Prima delle revisioni codice di squadra per formattare uniformemente il codice JavaScript/TypeScript, eliminando differenze di stile in indentazione, virgolette e punti e virgola per concentrarsi sulla revisione della logica
Quando si subentrano progetti legacy per formattare con un clic il vecchio codice JS con impaginazione disordinata e comprendere rapidamente struttura del codice e gerarchia logica
Prima del deploy in produzione per comprimere e offuscare il codice JavaScript con Terser, riducendo la dimensione dei file e migliorando la velocità di caricamento delle pagine web
Quando si scrivono demo JS/JSX online per mantenere il codice pulito con formattazione in tempo reale, facilitando la condivisione con colleghi o community
Quando si apprendono gli effetti delle varie opzioni di configurazione di Prettier per visualizzare immediatamente l'anteprima dei risultati di formattazione durante la regolazione delle opzioni, comprendendo l'effetto di parametri come tabWidth e trailingComma
Quando si elaborano frammenti di codice da piattaforme come Stack Overflow o GitHub per correggere automaticamente problemi di indentazione e a capo
Quando si scrivono file di configurazione JSON per formattare automaticamente indentazione e a capo, evitando errori di parsing causati da virgole o parentesi errate
Durante lo sviluppo di pagine CSS/HTML per formattare in un'unica soluzione codice JS+CSS+HTML nello stesso progetto mantenendo uno stile uniforme
Prima di colloqui tecnici per sistemare rapidamente codice JS di algoritmi e migliorare l'aspetto del codice con impaginazione standardizzata

Come utilizzare

Apri la pagina dello strumento di formattazione JavaScript. Puoi incollare il codice direttamente nell'area di editor a sinistra o cliccare sul pulsante di upload per selezionare un file locale (supporta formati .js/.ts/.jsx/.tsx/.css/.html/.json)
Seleziona il tipo di linguaggio corrispondente: lo strumento di solito riconosce automaticamente il linguaggio. Se il riconoscimento non è accurato, seleziona manualmente dal menu a discesa tra JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON
Configura le opzioni di formattazione: puoi scegliere preimpostazioni di stile rapide (default/modern/classic) o regolare manualmente le opzioni Prettier (larghezza indentazione, tabulazioni/spazi, larghezza riga, punti e virgola, virgolette, virgole finali, parentesi per frecce)
Se hai bisogno di comprimere il codice, passa alla modalità di compressione e configura le opzioni di compressione Terser (se abilitare compress, se offuscare i nomi delle variabili, se comprimere le variabili al livello superiore), livello di ottimizzazione CSS e opzioni di compressione HTML
Lo strumento elabora il codice in tempo reale. L'area di editor a destra mostra immediatamente il risultato formattato o compresso e la barra di stato in basso mostra in tempo reale statistiche su numero di caratteri, byte e tasso di compressione
Usa le scorciatoie da tastiera per maggiore efficienza: Ctrl+Shift+B attiva la formattazione, Ctrl+Shift+M passa alla modalità compressione, Ctrl+Shift+O apre un file, Ctrl+Shift+D scarica il risultato, Ctrl+Shift+K svuota l'editor
Quando sei soddisfatto, clicca sul pulsante Copia per copiare il risultato negli appunti o sul pulsante Download per salvarlo come file locale; puoi anche cliccare sul pulsante Condividi per generare un link URL con codice e configurazione da condividere con altri

Funzionalità

Supporto multilingua: formatta contemporaneamente JavaScript, TypeScript, JSX, TSX, CSS, HTML e JSON – 7 linguaggi comuni del frontend in un solo strumento per l'elaborazione unificata del codice frontend
Configurazione precisa in stile Prettier: supporta tutte le opzioni principali come tabWidth (larghezza indentazione: 2/4/8 spazi), useTabs (tabulazioni vs spazi), printWidth (larghezza riga), semi (punti e virgola), singleQuote (virgolette singole vs doppie), trailingComma (virgole finali), arrowParens (parentesi per funzioni freccia) e altro
Funzionalità di compressione del codice: motore di compressione Terser integrato con opzioni a livello produttivo: compress (ottimizzazione codice), mangle (offuscamento nomi variabili), toplevel (compressione delle variabili al livello superiore)
Ottimizzazione specifica per CSS: livelli di ottimizzazione CSS configurabili con supporto per compressione CSS, rimozione di commenti e spazi vuoti
Opzioni di compressione HTML: configurazione HTML minify con piegatura degli spazi, rimozione commenti e rimozione delle virgolette dagli attributi
Elaborazione in tempo reale: anteprima della formattazione immediata durante l'inserimento, senza bisogno di cliccare pulsanti per vedere il risultato dell'impaginazione
Editor CodeMirror: editor CodeMirror professionale integrato con evidenziazione della sintassi, numeri di riga, corrispondenza parentesi, code folding e altre funzionalità di editing professionali
Upload e download file: supporta upload diretto di file locali .js/.ts/.jsx/.tsx/.css/.html/.json e download con un clic dei file elaborati dopo la formattazione
Condivisione tramite link: salva codice e configurazione tramite hash URL e genera link condivisibili che permettono ai colleghi di riprodurre esattamente la stessa situazione di formattazione
Cronologia: salva automaticamente la cronologia delle formattazioni in localStorage, per tornare in qualsiasi momento a versioni precedenti del codice e configurazioni
Scorciatoie da tastiera: supporta combinazioni come Ctrl+Shift+B (Formatta), Ctrl+Shift+M (Comprimi), Ctrl+Shift+O (Apri file), Ctrl+Shift+D (Download), Ctrl+Shift+K (Svuota) e altro
Preimpostazioni rapide: tre preimpostazioni disponibili – default (predefinito), modern (moderno), classic (classico) – per cambiare stile comune con un clic
Statistiche caratteri: visualizza in tempo reale numero di caratteri, dimensione in byte e tasso di compressione a confronto tra codice originale e codice elaborato
Codice di esempio: codici di esempio integrati per tutti i linguaggi, caricabili con un clic per provare rapidamente le funzionalità

Domande frequenti

La logica del codice JavaScript cambia dopo la formattazione?

No. La formattazione regola solo contenuti relativi all'impaginazione come spazi, indentazione, a capo, posizione delle parentesi e stile delle virgolette. È basata su trasformazione AST e la struttura AST del codice è completamente identica prima e dopo la formattazione – la logica di esecuzione è identica al 100%. Finché il codice stesso è sintatticamente corretto e può essere analizzato normalmente, la formattazione non modifica alcun comportamento di esecuzione e può essere usata in tutta sicurezza. Anche la compressione (mangle) non modifica la logica, ma devi fare attenzione a scenari particolari come eval ed esportazioni di variabili globali per evitare configurazioni errate.

Cosa fare se i risultati dello strumento di formattazione sono diversi dalla formattazione locale di VS Code/Prettier?

La logica di formattazione di questo strumento è mantenuta il più possibile coerente con il comportamento ufficiale di Prettier. Se i risultati sono diversi, controlla le opzioni di configurazione: assicurati che le opzioni principali tabWidth, useTabs, semi, singleQuote, trailingComma e arrowParens siano completamente uguali su entrambe le parti. Fai anche attenzione alle differenze di versione di Prettier – le configurazioni predefinite di Prettier 2/3 presentano piccole differenze (v3 trailingComma: all di default, v2 es5 di default; da v2 arrowParens è always di default). Se hai un file di configurazione .prettierrc nel progetto locale, confronta le opzioni e regolale sul web in modo corrispondente, così i risultati della formattazione coincideranno.

Il codice compresso può essere ripristinato? I nomi delle variabili sottoposti a mangle possono essere ripristinati?

Il codice formattato è completamente reversibile – poiché è cambiato solo l'impaginazione e tutti gli identificatori e la logica sono mantenuti intatti, può essere ripristinato con una nuova formattazione. Per il codice compresso invece: le parti in cui sono stati rimossi solo spazi e commenti possono essere ripristinate nel layout con una nuova formattazione, ma mangle (offuscamento nomi variabili) è irreversibile – il nome di variabile significativo originale userName è diventato a e questo processo è a senso unico, i nomi originali non possono essere ripristinati automaticamente. Se hai bisogno di fare debug del codice compresso in produzione, dovresti configurare la generazione di file Source Map e tramite Source Map mappare nuovamente alle posizioni del codice sorgente. Quindi conserva sempre il codice sorgente originale non compresso prima della compressione!

Quali browser sono supportati? Funziona su dispositivi mobili?

Questo strumento supporta tutti i browser moderni: le ultime versioni di Chrome, Firefox, Safari e Edge funzionano correttamente. IE non è supportato (oggi nessuno usa più IE per sviluppare). Il layout responsive si adatta agli schermi degli smartphone, ma l'editing del codice su schermi piccoli non è un'esperienza ottimale – è consigliabile l'uso su browser desktop per una maggiore efficienza su schermi grandi. Tutti i calcoli di formattazione e compressione vengono eseguiti localmente nel browser, non è necessario caricare codice sui server – il codice non esce dal tuo browser, sicuro e affidabile.

Perché alcuni codici non possono essere formattati e viene mostrato un errore di parsing?

Gli strumenti di formattazione devono prima analizzare il codice in un AST per funzionare. Se il codice ha errori sintattici (parentesi non corrispondenti, stringhe non chiuse, parole chiave errate, virgole superflue ecc.), il parser non riesce a comprendere la struttura del codice e segnala un errore. Controlla prima gli errori sintattici nel codice stesso: verifica se la console mostra messaggi di errore, se l'editor mostra linee ondulate rosse per localizzare l'errore. Dopo aver corretto gli errori sintattici la formattazione funzionerà normalmente. Assicurati anche di aver selezionato la modalità linguistica corretta – il codice JSX/TSX non deve essere selezionato come JS normale.

Il mio codice viene caricato sui server? Il codice è sicuro?

No. Tutta la formattazione, compressione ed evidenziazione della sintassi viene eseguita completamente localmente nel tuo browser tramite JavaScript. Il codice non viene inviato a nessun server ma viene elaborato interamente sul tuo dispositivo. Puoi testarlo disconnettendo la rete: a rete disconnessa lo strumento continua a funzionare correttamente. La funzione di condivisione link codifica codice e configurazione nell'hash URL – quando condividi viene generato solo un URL, il codice non viene caricato. Ma se invii il link ad altre persone, queste aprendo il link potranno vedere il tuo codice, quindi non condividere codice sensibile tramite link.

È possibile formattare componenti Single-File Vue (file .vue)? E Svelte?

Attualmente il supporto multilingua di questo strumento comprende JS/TS/JSX/TSX/CSS/HTML/JSON. I file Single-File Vue con <template>/<script>/<style> (SFC) e i componenti Svelte non sono attualmente supportati per la formattazione diretta completa, ma puoi copiare separatamente le parti script (JS/TS), le parti style (CSS) e le parti template (HTML) e selezionare la lingua corrispondente per la formattazione singola. In futuro verrà considerato l'aggiunta del supporto per la formattazione di SFC Vue/Svelte.

Come si impostano regole di formattazione uniformi per il team?

Per regole uniformi nel team si consiglia una collaborazione a tre livelli: ① posiziona .editorconfig nella directory principale del progetto per uniformare le impostazioni base dell'editor (indentazione, caratteri di a capo, codifica); ② usa Prettier e posiziona un file di configurazione .prettierrc nel progetto, in modo che tutte le persone e la CI usino questa configurazione per la formattazione. Anche in questo strumento è possibile selezionare le opzioni corrispondenti per abbinare la configurazione; ③ usa ESLint + eslint-config-prettier per disattivare le regole di stile ESLint e controllare solo la qualità del codice. Configura l'editor per la formattazione automatica al salvataggio (VS Code con estensione Prettier, impostazione editor.formatOnSave: true) e aggiungi un passaggio lint nella CI per il controllo del formato, per assicurarti che il codice inviato corrisponda alle convenzioni.

Quali vantaggi hanno le virgole finali (trailingComma)? Dovrebbero essere attivate?

È fortemente consigliato attivare le virgole finali (almeno a livello es5, consigliato livello all). I vantaggi delle virgole finali sono: ① Git diff più puliti: quando aggiungi l'ultimo elemento non devi modificare la virgola della riga precedente – c'è solo il diff della nuova riga, senza sporcare il diff della riga precedente con la virgola; ② è più facile riordinare gli elementi senza dover gestire problemi di virgola finale; ③ i browser moderni e Node.js supportano completamente le virgole finali. Le vecchie versioni di IE non le supportano ma oggi non è più necessario considerare IE. L'unico svantaggio è una virgola in più, ma i vantaggi valgono ampiamente la pena. Prettier v3 usa all di default.

Durante la compressione bisogna attivare mangle? Qual è la differenza tra compress e mangle?

Per la compressione in produzione è consigliato attivare sia compress che mangle. Queste sono due opzioni di compressione indipendenti: compress è l'ottimizzazione del codice (constant folding, rimozione di codice morto, semplificazione di espressioni ecc.), modifica la struttura del codice solo quando può essere semplificata e non cambia i nomi delle variabili; mangle è l'accorciamento dei nomi delle variabili locali, in cui i nomi lunghi delle variabili vengono cambiati in caratteri singoli – questa è una delle fonti maggiori di riduzione del volume. Finché il tuo codice non deve essere usato come libreria chiamata direttamente dall'esterno tramite nomi di variabili o non usa eval per accedere dinamicamente ai nomi delle variabili, mangle è sicuro e può ridurre notevolmente il volume. Per le librerie open source che devono mantenere i nomi delle API, configura mangle.reserved per conservare i nomi esportati.

Perché durante la formattazione JSON alcuni caratteri vengono automaticamente escapati?

La specifica JSON ha requisiti sintattici rigorosi: le stringhe devono essere tra virgolette doppie, non ci devono essere virgole finali, i caratteri speciali devono essere escapati (a capo→\n, virgolette→\", backslash→\\, tab→\t ecc.). Se le tue stringhe JSON contengono caratteri speciali non escapati, durante la formattazione verranno automaticamente escapati secondo la specifica JSON – questo è il comportamento corretto. Nota: JSON non è JavaScript. In JSON non si possono scrivere commenti, virgolette singole o undefined, perché causerebbero errori di parsing JSON.

Come faccio a fare in modo che i parametri delle funzioni freccia abbiano sempre le parentesi? O che non le abbiano?

Regola l'opzione arrowParens: always mette sempre le parentesi ((x) => x), questo è il default da Prettier v2. Il vantaggio è che quando aggiungi o rimuovi parametri non devi aggiungere/rimuovere parentesi, per diff più puliti; avoid omette le parentesi con un parametro (x => x), rendendo il codice più conciso. Scegli in base allo stile del team – entrambi gli stili non sono né giusti né sbagliati, l'importante è uniformarsi. Nota: le annotazioni di tipo dei parametri, i parametri di default e i parametri di destrutturazione hanno sempre le parentesi indipendentemente dalla configurazione.

La formattazione può correggere automaticamente i problemi di stile segnalati da ESLint?

Questo strumento usa la formattazione in stile Prettier e può correggere solo i problemi di stile di cui si occupa Prettier (indentazione, virgolette, punti e virgola, virgole finali, larghezza riga, spazi ecc.). I problemi di qualità del codice segnalati da ESLint (come variabili non utilizzate, return mancante, problemi con ===) sono problemi logici che gli strumenti di formattazione non possono correggere automaticamente e devono essere modificati manualmente. Se la tua configurazione ESLint usa eslint-config-prettier, dopo la formattazione Prettier ESLint non segnalerà più errori relativi allo stile – i restanti problemi di qualità devono essere corretti manualmente.

Qual è la dimensione massima del file di codice supportata? La formattazione di file grandi sarà lenta?

Poiché la formattazione viene eseguita localmente nel browser, la dimensione del file supportata dipende dalle prestazioni del tuo dispositivo. In generale file JS da qualche decina di KB a diversi MB possono essere elaborati normalmente – i singoli file JS di progetti comuni sono completamente sufficienti. File JS impacchettati particolarmente grandi (diverse decine di MB) potrebbero causare lentezza o addirittura esaurimento della memoria. Per file di dimensioni così estreme è consigliabile elaborarli localmente con Node.js+Prettier/Terser da riga di comando. I singoli file sorgente nello sviluppo quotidiano rientrano normalmente nell'intervallo elaborabile.

Perché Ctrl+Shift+B in Chrome apre Gestione Preferiti?

Questo è un conflitto con le scorciatoie predefinite di Chrome: Ctrl+Shift+B è la scorciatoia di Chrome per mostrare/nascondere la barra dei preferiti. Le scorciatoie del browser hanno priorità maggiore delle scorciatoie JS della pagina e quindi vengono intercettate da Chrome. Soluzioni: ① usa il pulsante di formattazione; ② se sei utente Mac Cmd+Shift+B non è in conflitto con Chrome; ③ puoi modificare le scorciatoie del browser nelle impostazioni di Chrome; ④ puoi mettere prima il fuoco sull'editor – in alcuni casi il fuoco dell'editor può catturare la scorciatoia. Per conflitti di scorciatoia in altri browser puoi sempre usare i pulsanti.

Risoluzione dei problemi

Durante la formattazione viene mostrato »errore di analisi sintattica«, formattazione impossibile

Errori sintattici nel codice stesso: parentesi non corrispondenti, stringhe non chiuse, parole chiave mancanti, virgole superflue ecc. Gli errori sintattici causano il fallimento del parsing AST e rendono impossibile la formattazione. Correggi prima gli errori sintattici Selezione errata della modalità linguistica: ad esempio codice JSX/TSX selezionato come JavaScript, la sintassi dei generics viene scambiata per tag JSX (o viceversa). Seleziona manualmente il tipo di linguaggio corretto Sintassi sperimentale presente: il codice usa proposte di sintassi JavaScript troppo recenti non ancora standardizzate (come Decorators, operatore Pipeline) che non sono supportate dal parser Il file ha un'intestazione BOM: UTF-8 BOM (EF BB BF) all'inizio. Alcuni parser potrebbero non gestirlo. Prova a salvare il file come UTF-8 senza BOM Codice in altri linguaggi mescolato: ad esempio linguaggi template incorporati in HTML (EJS, Handlebars, direttive template Vue) non sono JS/HTML puri e non vengono riconosciuti dal parser Commenti di blocco non terminati nel codice: /* senza */ corrispondente, un commento non chiuso causa che il codice successivo venga trattato interamente come commento Ambiguità con le espressioni regolari: punti che sembrano divisioni/operatori sono in realtà letterali di regex e vengono interpretati erroneamente dal parser. Aggiungi un punto e virgola prima della regex per eliminare l'ambiguità

Errore durante la compressione (Minify), compressione impossibile

Errori sintattici nel codice: come per la formattazione, anche la compressione è basata su AST. Il codice deve essere sintatticamente corretto per essere compresso. Correggi prima gli errori sintattici Sono usati import/export di ES Module ma il tipo di modulo non è marcato correttamente, oppure la configurazione di compressione non corrisponde al tipo di modulo Problemi durante il mangle dei nomi delle proprietà: se il mangle dei nomi delle proprietà è attivato (disattivato di default), l'accesso dinamico alle proprietà obj['key'] causa il mancato reperimento delle proprietà. Non attivare il mangle delle proprietà senza motivo Il codice contiene istruzioni eval() o with: in Terser il mangle può fallire in presenza di eval/with, perché eval può accedere dinamicamente ai nomi delle variabili nell'ambito. Evita eval nel codice di produzione Configurazione errata dei nomi riservati: se hai configurato mangle.reserved ma ci sono errori di ortografia o mancano i nomi che devono essere riservati (come librerie globali jQuery, $), possono verificarsi errori a runtime Problemi di configurazione della compressione toplevel: se il tuo codice viene eseguito nell'ambito globale e non impacchettato in un IIFE/modulo, l'attivazione di compress.toplevel: true può distruggere i riferimenti alle variabili globali La versione del browser di destinazione configurata è troppo vecchia: durante la compressione Terser potrebbe usare sintassi non supportata dai browser di destinazione. Configura la versione ecma per specificare la versione della sintassi JS di output

Caratteri cinesi/commenti cinesi vengono visualizzati come caratteri corrotti dopo la formattazione

La codifica del file non è UTF-8: il file locale caricato usa codifiche cinesi come GBK/GB2312. Lo strumento analizza di default come UTF-8 causando caratteri corrotti. Converti il file in codifica UTF-8 con un editor e ricaricalo La codifica della pagina del browser è stata modificata accidentalmente: sebbene oggi i browser usino UTF-8 di default, su browser vecchi o con impostazioni particolari la codifica potrebbe essere errata. Controlla nel menu del browser l'impostazione della codifica della pagina e impostala su UTF-8 Il file ha un'intestazione UTF-8 BOM: sebbene il BOM normalmente non causi caratteri corrotti, alcuni parser gestiscono il BOM in modo anomalo. Rimuovi il BOM con un editor e salva come UTF-8 senza BOM Problemi di conversione della codifica durante copia e incolla: quando copi codice da software vecchio (come vecchi editor, Word), caratteri speciali (come virgolette cinesi, spazi a larghezza intera) potrebbero essere convertiti erroneamente. Copia possibilmente con editor moderni come VS Code Problema di font: alcuni font monospace supportano male il cinese causando anomalie di visualizzazione. Non è un problema di codifica ma solo di font di visualizzazione. Passa a un font monospace con supporto per il cinese Caratteri Unicode speciali: il codice contiene emoji, spazi a larghezza zero, caratteri di controllo o altri caratteri invisibili speciali che possono causare anomalie di visualizzazione o errori di formattazione. Attiva la visualizzazione dei caratteri invisibili nell'editor per verificarlo Problemi di compressione gzip o proxy: se dopo il deployment si verificano caratteri corrotti durante l'accesso, verifica che il server abbia impostato correttamente l'header di risposta Content-Type: application/javascript; charset=utf-8

Formattazione del codice JSX/TSX fallita o errore di parsing

La modalità linguistica è impostata su JavaScript invece che JSX/TSX: il parser JS normale non riconosce la sintassi <Tag> e interpreta i tag JSX come operatori di confronto causando errori. Seleziona manualmente la lingua JSX o TSX Ambiguità con i generics TSX: i parametri generic <T> in TSX possono essere scambiati per tag JSX, ad es. const f = <T>(x: T) => x. Aggiungi una virgola dopo <T> (<T,>) per eliminare l'ambiguità (questa è la scrittura comune in TSX) Tag JSX non chiusi: JSX richiede che tutti i tag siano chiusi correttamente, i tag auto-chiusi devono avere />. Diversamente da HTML, <img> deve essere scritto come <img/> Problemi con le parentesi delle espressioni JS in JSX: le espressioni JS in {} devono essere chiuse correttamente. Se manca la } in {obj.prop} si creano problemi di parsing nel codice successivo Problemi con la sintassi abbreviata dei Fragment: i tag vuoti <></> richiedono React 16+ e devono essere chiusi correttamente; se usi <Fragment> l'import deve essere corretto Problema con le virgolette nei valori degli attributi JSX: i valori degli attributi JSX che sono stringhe devono essere tra virgolette (doppie), quelli che sono espressioni tra {}, non mischiare i due Il file TSX ha estensione .ts invece di .tsx: il parser TypeScript abilita il parsing JSX solo con l'estensione .tsx. Se scrivi JSX con estensione .ts si verificano errori. Usa l'estensione corretta

L'indentazione dopo la formattazione è errata, non corrisponde alle aspettative

Configurazione tabWidth errata: controlla che la larghezza dell'indentazione sia configurata a 2 o 4. Nel team sono comuni 2 spazi. Se ti aspetti 4 spazi regola manualmente l'opzione tabWidth Configurazione useTabs errata: se il team usa l'indentazione Tab ma tu hai configurato gli spazi (o viceversa), controlla che l'opzione useTabs sia corretta Il codice stesso ha errori sintattici: gli errori sintattici causano una struttura AST anomala e l'indentazione durante la formattazione viene scomposta. Correggi prima gli errori sintattici evidenziati dalle linee ondulate rosse Tab e spazi mescolati: nel codice originale l'indentazione è in parte con Tab e in parte con spazi. La formattazione uniforma allo stile configurato, ma se il disordine nel codice originale è grave potrebbero essere necessarie più formattazioni printWidth impostato troppo piccolo: se la larghezza riga è troppo piccola (es. 40), il codice va spesso a capo facendo sembrare l'indentazione disordinata. Un valore di 80 o 100 è più appropriato Opzioni di impaginazione come bracketSameLine/arrowParens non corrispondono alle aspettative: la posizione delle graffe, le parentesi delle funzioni freccia e così via sono determinate dalla configurazione e non sono problemi di indentazione. Regola le opzioni corrispondenti Conflitto tra EditorConfig e la configurazione dell'editor locale: se il tuo editor locale usa .editorconfig per l'impostazione automatica dell'indentazione e le opzioni sulla configurazione web sono diverse, i risultati di formattazione delle due parti non corrispondono. Uniforma la configurazione

Le scorciatoie da tastiera non funzionano, nessuna reazione alla pressione

Il fuoco non è sull'editor: le scorciatoie funzionano solo quando l'editor ha il fuoco. Se il fuoco è su pulsanti, campi di input o altre aree della pagina le scorciatoie non vengono attivate. Clicca prima sull'area dell'editor per darle il fuoco Conflitto con scorciatoie del browser: alcune scorciatoie (come Ctrl+Shift+B in Chrome che apre la barra dei segnalibri, Ctrl+Shift+O in Firefox che apre la cronologia) sono occupate dal browser. Puoi usare i pulsanti o (su Mac) provare Cmd invece di Ctrl Problema di metodo di input: con il metodo di input cinese alcune scorciatoie potrebbero essere intercettate. Passa al metodo di input inglese e riprova le scorciatoie Altre estensioni/plugins occupano le scorciatoie: estensioni di scorciatoie installate nel browser, script Tampermonkey o plugin proxy potrebbero occupare le scorciatoie. Prova ad aprire la pagina in modalità in incognito Conflitto con scorciatoie di sistema: il sistema operativo o altri software in esecuzione (come strumenti di screenshot, metodi di input, IDE) hanno scorciatoie globali che occupano le combinazioni di tasti. Puoi modificare le scorciatoie di altri software o usare i pulsanti di questo strumento Differenze di tastiera Mac/Windows: nota che Mac usa il tasto Cmd (⌘), Windows/Linux il tasto Ctrl – non confonderli. Su Mac Option corrisponde al tasto Alt di Windows Limitazioni di sicurezza del browser: alcune scorciatoie per l'accesso ai file potrebbero essere limitate dalle policy di sicurezza del browser e non possono essere completamente simulate tramite JS. Se necessario usa direttamente il pulsante corrispondente

Glossario

Prettier: Lo strumento di formattazione del codice frontend più popolare attualmente, con filosofia di progettazione opinionated. Supporta più linguaggi come JS/TS/CSS/HTML/Markdown, impone uno stile del codice uniforme e pone fine ai dibattiti sullo stile nel team.
Terser: Moderno strumento di compressione JavaScript, un fork di UglifyJS compatibile con ES6+. Supporta compressione e offuscamento della sintassi ES6+ ed è il compressore predefinito in moderni strumenti di build come Webpack, Rollup e Vite.
UglifyJS: Classico strumento di compressione JavaScript, predecessore di Terser. Tuttavia supporta solo la sintassi ES5 e precedenti senza le nuove funzionalità ES6+; nei nuovi progetti generalmente si usa Terser come sostituto.
AST (Abstract Syntax Tree): Albero sintattico astratto, una rappresentazione ad albero della struttura sintattica del codice sorgente dove ogni nodo rappresenta una struttura sintattica nel codice. Strumenti come Babel, Prettier, Terser ed ESLint sono tutti basati su AST.
ESLint: Lo strumento di ispezione del codice (Linter) più popolare nell'ecosistema JavaScript/TypeScript. Serve a trovare problemi di qualità del codice e uniformare lo stile del codice e può essere usato insieme a Prettier.
EditorConfig: File di configurazione trasversale agli editor per uniformare lo stile del codice. Definisce impostazioni di base come stile di indentazione, dimensione dell'indentazione, caratteri di a capo e codifica, in modo che editor diversi aprano lo stesso progetto in modo coerente.
CodeMirror: Componente editor di codice browser-based con funzionalità di editing professionali come evidenziazione della sintassi, numeri di riga, corrispondenza parentesi, code folding e cursori multipli. Una delle scelte principali per gli editor di codice web.
minify: Il processo di minimizzare il volume del codice senza modificare la logica, attraverso rimozione di spazi, commenti, accorciamento dei nomi delle variabili e ottimizzazioni del codice. Usato in produzione per migliorare la velocità di caricamento.
mangle: Il passaggio durante la compressione in cui nomi di variabili, funzioni e parametri vengono accorciati a caratteri singoli. Riduce notevolmente il volume del codice rendendolo contemporaneamente più difficile da leggere – anche conosciuto come offuscamento dei nomi di variabili.
beautify: Chiamato anche formattazione del codice: il codice compresso o disordinato viene reimpaginato con indentazione, a capo e spazi per migliorare la leggibilità – l'opposto di minify.
trailing comma: Una virgola dopo l'ultimo elemento in oggetti, array o parametri di funzione. Facilita l'aggiunta di nuovi elementi grazie a Git diff più puliti ed è supportato negli ambienti ES5+.
arrow parens: Indica se i parametri delle funzioni freccia con un solo parametro debbano essere racchiusi tra parentesi, ad es. x => x (senza parentesi) vs. (x) => x (con parentesi).
printWidth: Il numero di caratteri per riga oltre il quale la formattazione va automaticamente a capo. Prettier usa 80 caratteri di default, i team possono regolare a 100 o 120 a seconda delle dimensioni del monitor.
semicolons: Indica se mettere il punto e virgola alla fine delle istruzioni JavaScript. JS ha un meccanismo ASI di inserimento automatico dei punti e virgola, ma nella maggior parte degli scenari è comunque consigliato usare i punti e virgola per evitare sorprese.
single quote: Uso di virgolette singole invece di doppie per le stringhe. In JS le funzionalità sono completamente equivalenti, è solo una preferenza di stile. La specifica JSON impone le virgolette doppie.
double quote: Uso di virgolette doppie per racchiudere le stringhe. Lo stile predefinito di molti linguaggi e il formato stringa richiesto dalla specifica JSON.
tab width: Il numero di spazi per ogni livello di indentazione. Nella community frontend sono comuni 2 spazi, nei linguaggi backend 4 spazi.
BOM (Byte Order Mark): Byte Order Mark, tre byte EF BB BF all'inizio dei file con codifica UTF-8 per marcare la codifica. In alcuni scenari può causare errori di parsing JS.
UTF-8: Unicode Transformation Format 8 bit, la codifica di file standard per progetti Web e frontend. Supporta tutti i caratteri Unicode ed è la codifica consigliata di default.
source map: Un file che mappa il codice compresso/transpilato alle posizioni originali del codice sorgente. Usato per il debug in produzione per localizzare i numeri di riga del codice sorgente quando si verificano errori nel codice compresso.

Tabella di riferimento delle opzioni principali di Prettier

Nome opzione	Funzione	Valori possibili	Valore predefinito	Descrizione
`tabWidth`	Larghezza indentazione (numero di spazi)	`2, 4, 8`	`2`	Attivo quando useTabs=false, 2 spazi comuni nel frontend
`useTabs`	Indentazione con caratteri Tab	`true/false`	`false`	true = indentazione Tab, false = indentazione spazi
`printWidth`	Limite larghezza riga (numero di caratteri)	`80, 100, 120`	`80`	A capo automatico al superamento, nessun limite rigido
`semi`	Punti e virgola a fine istruzione	`true/false`	`true`	A false solo punti e virgola dove ASI potrebbe fallire
`singleQuote`	Usa virgolette singole	`true/false`	`false`	true = virgolette singole, false = virgolette doppie, attributi JSX sempre doppi
`trailingComma`	Modalità virgole finali	`none, es5, all`	`all (v3+)`	none = nessuna, es5 = oggetti/array, all = anche parametri funzione
`arrowParens`	Parentesi per funzioni freccia con un parametro	`avoid, always`	`always (v2+)`	avoid = nessuna parentesi con un parametro, always = sempre parentesi
`bracketSpacing`	Spazi nelle parentesi graffe degli oggetti	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	Posizione parentesi di chiusura HTML/JSX	`true/false`	`false`	true = parentesi di chiusura alla fine dell'ultima riga, false = riga separata
`vueIndentScriptAndStyle`	Indentazione script/style in file Vue	`true/false`	`false`	Se indentare il codice nei tag script/style in Vue SFC

Esempio di confronto prima/dopo la compressione del codice JavaScript

Ottimizzazione	Codice formattato (versione sviluppo)	Codice compresso (versione produzione)	Riduzione volume
Spazi e a capo	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
Rimozione commenti	`// Calcola la somma di due numeri function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
Mangle variabili locali	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
Constant folding	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
Semplificazione booleana	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
Esempio completo (con più ottimizzazioni)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

Tabella rapida scorciatoie da tastiera

Scorciatoia (Win/Linux)	Scorciatoia (Mac)	Funzione	Frequenza d'uso
`Ctrl+Shift+B`	`Cmd+Shift+B`	Esegui formattazione/abbellimento	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	Passa tra modalità formattazione/compressione	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	Apri file locale	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	Scarica file elaborato	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	Svuota contenuto editor	★★★
`Ctrl+S`	`Cmd+S`	Scarica (salva) file	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	Cerca / Cerca e sostituisci	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	Annulla / Ripeti	★★★★★
`Ctrl+/`	`Cmd+/`	Attiva/disattiva commento riga	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	Aumenta/riduci indentazione (con selezione)	★★★★
`Alt+Clic`	`Option+Clic`	Aggiungi cursori multipli	★★★
`Ctrl+D`	`Cmd+D`	Seleziona parola successiva uguale	★★★
`Home / End`	`Cmd+← / Cmd+→`	Inizio riga / Fine riga	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	Inizio file / Fine file	★★★