Formattatore JSX

Carica

0 caratteri

Strumento di formattazione JSX di GeekFormat, basato sul motore Prettier v3 Standalone per la formattazione professionale del codice dei componenti React JSX/TSX. Supporta 12 configurazioni di formattazione (dimensione rientro, punto e virgola, stile virgolette, virgola finale, spaziatura parentesi, parentesi funzione freccia, larghezza di stampa, virgolette singole JSX, parentesi JSX sulla stessa riga, strategia virgolette proprietà, ecc.), con motore di compressione Terser integrato. Offre il cambio tra sette linguaggi: JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Editor con evidenziazione sintassi CodeMirror 6, confronto in tempo reale a doppia colonna, supporto upload/download file, cronologia, condivisione URL, copia con un clic. Elaborazione puramente lato browser, il codice non viene inviato al server.

Raccomandazioni correlate

Compressione JSX

Formattazione TSX

Formattazione JavaScript

Formattazione CSS

Formattatore JSON

Informazioni sulla formattazione JSX

JSX è l'acronimo di JavaScript XML, un'estensione della sintassi JavaScript introdotta dal framework React che permette di scrivere strutture di tag simili all'HTML direttamente nel codice JavaScript. JSX viene convertito in normali chiamate di funzione React.createElement() da strumenti come Babel o TypeScript durante la compilazione. JSX rende la struttura del codice dei componenti più intuitiva — gli sviluppatori possono descrivere la struttura dell'interfaccia utente come se scrivessero HTML, ottenendo al contempo tutta la capacità espressiva di JavaScript. Tuttavia, se il codice JSX manca di formattazione standardizzata — livelli di annidamento dei tag disordinati, attributi disorganizzati, rientro inconsistente — ciò influenzerà seriamente la leggibilità e l'efficienza della manutenzione, che è esattamente il valore degli strumenti di formattazione JSX.

Prettier è attualmente lo strumento di formattazione del codice più dominante nell'ecosistema JavaScript/JSX, creato da James Long nel 2017 e ora diventato lo standard di fatto. La filosofia centrale di Prettier è il 'formattatore opinionato' (opinionated formatter) — offre solo pochi elementi configurabili, con le restanti regole integrate e non modificabili. Il vantaggio di ciò è eliminare interminabili dibattiti sullo stile del codice tra i team. Prettier supporta vari linguaggi e formati come JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, essendo ampiamente adottato dalle comunità dei framework principali come React, Vue, Angular. La maggior parte dei progetti front-end moderni integra Prettier nelle pipeline CI/CD per garantire uno stile di codice coerente.

Le regole centrali della formattazione JSX includono: Primo, livelli di rientro — ogni tag JSX annidato e ogni espressione aumentano di un livello di rientro, riflettendo la struttura ad albero del DOM; Secondo, organizzazione degli attributi — quando un tag ha più attributi e supera la larghezza della riga, ogni attributo occupa una riga e viene allineato; Terzo, gestione delle parentesi — le espressioni JSX multilinea sono solitamente racchiuse tra parentesi tonde per evitare problemi di inserimento automatico del punto e virgola (ASI); Quarto, tag autochiudenti — i componenti senza elementi figli usano la forma <Component />; Quinto, virgolette delle stringhe — gli attributi JSX usano virgolette doppie per impostazione predefinita (coerente con HTML), le stringhe JavaScript usano virgolette singole per impostazione predefinita; Sesto, gestione degli spazi — se aggiungere spazi su entrambi i lati delle parentesi graffe {} all'interno dei tag è configurabile.

La compressione JSX (Minification) è l'operazione inversa della formattazione, con l'obiettivo di convertire JSX in codice eseguibile di volume minimo, per la distribuzione in ambiente di produzione, riducendo il volume di trasmissione di rete e accelerando la velocità di caricamento. La compressione JSX di solito include le seguenti fasi: prima, compilare JSX in chiamate React.createElement (cioè JavaScript comune) usando Babel, poi usare un compressore (come Terser, UglifyJS) per: rimuovere commenti e caratteri di spazio bianco, accorciare nomi di variabili e funzioni (mangling), eliminare codice morto (dead code elimination), semplificare espressioni e istruzioni condizionali, unire dichiarazioni, funzioni inline, ecc. Gli strumenti di costruzione moderni (Webpack, Vite, Rollup) eseguono automaticamente la compressione del codice in modalità production.

Perché la formattazione del codice è importante? Nel lavoro di squadra, uno stile di codice unificato può migliorare significativamente la leggibilità e l'efficienza della revisione. Se ogni sviluppatore formatta il codice secondo le proprie preferenze, il Git diff sarà pieno di modifiche di formato senza senso, rendendo difficile per i revisori trovare i veri cambiamenti logici. Gli studi dimostrano che gli sviluppatori trascorrono molto più tempo a leggere il codice che a scriverlo, e uno stile di formattazione coerente può ridurre significativamente il carico cognitivo di lettura. Grandi aziende come Google, Meta e Airbnb hanno normative rigorose sullo stile del codice e catene di strumenti di formattazione automatizzata, il che riflette anche la maturità dell'ingegneria del software.

La divisione del lavoro tra Prettier e Linters (come ESLint, TSLint) è una delle migliori pratiche dell'ingegneria front-end moderna: Prettier si occupa esclusivamente del formato (formatting) — interruzioni di riga, rientro, spazi, punto e virgola, virgolette, virgole e altri problemi puramente di stile; ESLint si occupa esclusivamente della qualità (code quality) — variabili inutilizzate, bug potenziali, problemi di sicurezza, migliori pratiche e altri problemi logici. Quando si usano entrambi insieme, è necessario disattivare le regole di formato in ESLint che si sovrappongono a Prettier tramite eslint-config-prettier, per evitare conflitti. Molti team configurano anche hook pre-commit (tramite husky + lint-staged) per eseguire automaticamente Prettier e ESLint prima di inviare il codice, garantendo che tutto il codice inviato al repository sia conforme alle normative.

Nella scelta di uno strumento di formattazione JSX, bisogna considerare diversi fattori: Primo, scelta del motore — prediligi Prettier come motore, poiché è lo standard della comunità, con risultati prevedibili e coerenza con le estensioni IDE; Secondo, configurabilità — scegli la quantità di parametri regolabili in base alle esigenze del team; troppe opzioni, al contrario, aumentano il costo decisionale; Terzo, sicurezza — assicurati che lo strumento elabori il codice localmente, non inviandolo ai server, evitando rischi di fughe di codice sorgente; Quarto, funzioni aggiuntive — compressione, evidenziazione sintassi, cronologia, condivisione e altre funzioni possono migliorare l'efficienza d'uso; Quinto, supporto multilingue — uno strumento che copre più linguaggi come JS/TS/JSX/TSX/CSS/HTML/JSON può ridurre il costo di cambio strumento.

Precauzioni di sicurezza nell'uso di strumenti online di formattazione del codice: Primo, prediligi strumenti di elaborazione puramente lato browser — questi strumenti non hanno bisogno di server, il codice gira solo localmente, con la massima sicurezza; Secondo, non incollare codice contenente informazioni sensibili — come password di database, chiavi API, logica di business interna, algoritmi proprietari, ecc. Anche se lo strumento dichiara di non inviare, mantieni la consapevolezza della sicurezza; Terzo, verifica che lo strumento usi HTTPS — evita l'intercettazione durante la trasmissione (sebbene gli strumenti di elaborazione locale non abbiano bisogno di trasmissione, anche la pagina stessa ha bisogno di un caricamento sicuro); Quarto, usa strumenti locali per il codice importante — per il codice di business centrale, si consiglia di usare Prettier CLI installato localmente o estensioni IDE, non dipendendo da servizi online; Quinto, revisione regolare la credibilità dello strumento — verifica se è open source, qual è la valutazione della comunità, se ha una politica sulla privacy, ecc.

Casi d'uso

Codice di componente React copiato da internet con formattazione disordinata, formattazione rapida per facilitare lettura e apprendimento
Organizzare file di componenti JSX quando si riprendono progetti vecchi, unificare lo stile del codice prima dello sviluppo secondario
Formattare prima della revisione del codice, eliminare i diff senza senso causati da differenze di formato, concentrarsi sulla revisione logica
Riformattare il codice JSX di produzione compresso, leggere il codice offuscato durante la diagnosi di problemi in produzione
Abbellire il codice di esempio JSX prima di scrivere blog tecnici o documentazione, migliorare la professionalità dei contenuti
Confrontare gli effetti di diverse configurazioni di formattazione, servire come riferimento per la selezione della configurazione Prettier del team
Dimostrare il processo di formattazione del codice JSX da disordinato a standardizzato nelle presentazioni didattiche
Durante il debug di frammenti di codice React online, formattare prima di analizzare la struttura e localizzare i bug
Nella documentazione delle librerie di componenti che generano codice JSX, garantire uno stile uniforme e curato del codice di esempio
Organizzare il codice dei progetti React prima dei colloqui, garantire che i campioni di codice inviati abbiano uno stile standardizzato
Formattare il codice JSX generato dall'IA prima di inserirlo nel progetto, eliminare i problemi di inconsistenza del formato nell'output dell'IA
Durante lo sviluppo di progetti React Native o Next.js, formattare rapidamente frammenti di codice di componente online

Come utilizzare

Incolla il codice JSX/TSX nell'editor sinistro, oppure clicca sul pulsante di upload per importare file .jsx/.tsx, oppure carica direttamente dagli esempi
Clicca sul pulsante delle impostazioni per regolare i parametri di formattazione: dimensione rientro, punto e virgola, virgolette, virgola finale, larghezza di stampa, opzioni JSX, ecc., oppure mantieni la configurazione predefinita
Clicca sul pulsante di formattazione (o usa la scorciatoia) per eseguire la formattazione. Il pannello destro mostra il risultato istantaneamente. Puoi trascinare per regolare la larghezza dei pannelli
Se hai bisogno di comprimere, clicca sul pulsante di compressione per passare alla modalità di compressione. Il motore Terser produrrà codice JSX minimizzato
Clicca sul pulsante di copia per copiare il risultato negli appunti, oppure clicca su download per salvare come file, oppure invia ad altre persone tramite link di condivisione

Funzionalità

Motore Prettier v3: Basato su Prettier v3 Standalone, il più popolare del settore, come motore di formattazione, abbinato al parser Babel. Risultati coerenti con l'estensione Prettier in VS Code, garantendo uniformità nello stile del codice del team
12 configurazioni di formattazione: Regola la dimensione del rientro (2/4/8 spazi o Tab), punto e virgola, virgolette singole/doppie, virgola finale (none/es5/all), spaziatura parentesi, parentesi funzione freccia, larghezza di stampa, virgolette singole JSX, parentesi JSX sulla stessa riga, strategia virgolette proprietà e altri 12 parametri
Editor con evidenziazione sintassi JSX: Editor di codice professionale basato su CodeMirror 6, supporta evidenziazione sintassi JSX/TSX, numeri di riga, corrispondenza parentesi, input a sinistra e risultato a destra in tempo reale
Funzione di compressione JSX: Motore di compressione Terser integrato, comprime il codice dei componenti JSX al volume minimo con un clic. Supporta offuscamento nomi variabili (mangle), rimozione codice morto, pulizia console/debugger e altre opzioni avanzate di compressione
Cambio tra 7 linguaggi: Supporta JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — sette linguaggi comuni del front-end. Uno strumento copre tutte le esigenze di formattazione full-stack
Upload e download di file: Supporta upload diretto di file .jsx/.tsx/.js/.ts/.css/.html/.json per la formattazione, scaricabili e salvabili localmente dopo l'elaborazione
Pannello cronologia: Salva automaticamente i record di formattazione recenti, supporta il ritorno a versioni storiche e il confronto degli effetti di formattazione con diverse configurazioni
Copia risultato con un clic: Codice formattato o compresso copiato negli appunti con un clic, direttamente incollabile nell'IDE o nel progetto
Funzione di condivisione URL: Codifica codice e configurazione nell'hash dell'URL tramite compressione LZ-String. Copia il link per condividere il codice completo e i parametri di formattazione
Suggerimenti amichevoli per errori di sintassi: Differenzia errori di sintassi da altri errori quando la formattazione fallisce, fornendo indicazioni di localizzazione per aiutare a risolvere rapidamente i problemi del codice
Colonne trascinabili: La larghezza dei pannelli sinistro e destro può essere regolata liberamente trascinando, adattandosi a diverse dimensioni dello schermo e abitudini di lettura
Elaborazione locale nel browser: Tutta la formattazione, compressione e analisi viene eseguita in JavaScript nel browser. Il codice non viene inviato a nessun server, garantendo la sicurezza del codice sorgente

Domande frequenti

Qual è il principio della formattazione JSX? Qual è la relazione con Prettier?

Questo strumento utilizza la versione Prettier v3 Standalone come motore di formattazione nello strato inferiore. Analizza la sintassi JSX tramite il parser Babel e quindi riesporta il codice con formattazione ordinata secondo le regole configurate. Prettier è attualmente lo strumento di formattazione del codice più popolare nell'ecosistema front-end, ampiamente utilizzato in progetti React/Vue/Angular. I risultati di formattazione di questo strumento sono sostanzialmente coerenti con quelli ottenuti installando l'estensione Prettier in VS Code per formattare i file JSX. È adatto per la formattazione rapida online senza dover aprire l'IDE locale.

Quali opzioni di formattazione sono supportate? Posso personalizzare il rientro e lo stile delle virgolette?

Supporta 12 configurazioni di formattazione: 1) Dimensione del rientro: 2 spazi/4 spazi/8 spazi o uso di Tab; 2) Uso del punto e virgola; 3) Virgolette singole o doppie; 4) Strategia virgola finale: none (nessuna)/es5 (array e oggetti)/all (anche nei parametri di funzione); 5) Spazi all'interno delle parentesi graffe degli oggetti; 6) Parentesi nel parametro singolo della funzione freccia; 7) Larghezza di stampa (numero massimo di caratteri per riga); 8) Virgolette singole o doppie per gli attributi JSX; 9) Se la parentesi destra di JSX multilinea rimane sulla stessa riga del contenuto; 10) Strategia virgolette per proprietà degli oggetti: as-needed/preserve/consistent; 11) Sensibilità agli spazi bianchi HTML; 12) Uso di Tab per il rientro. Regolazioni libere nel pannello delle impostazioni.

La formattazione cambia la logica del codice JSX? È sicura?

La formattazione regola solo i caratteri di spazio bianco (interruzioni di riga, rientro, spazi) e le forme di zucchero sintattico come virgolette e punto e virgola, non modificando alcuna logica del codice. Prettier è uno strumento maturo validato da milioni di sviluppatori in tutto il mondo. Il codice formattato è semanticamente equivalente al codice originale. Tuttavia, nota che: se il codice originale ha errori di sintassi (come parentesi non corrispondenti, tag non chiusi), la formattazione fallirà e indicherà un errore di sintassi. In tal caso, è necessario correggere il problema del codice prima di formattare.

Come funziona la funzione di compressione JSX? Quali opzioni di compressione sono supportate?

La compressione JSX utilizza il motore Terser (uno dei compressori JavaScript più popolari del settore) eseguito localmente nel browser. La compressione include: rimozione di commenti e spazi bianchi eccessivi, accorciamento e offuscamento dei nomi delle variabili (mangle), eliminazione del codice morto (dead_code), rimozione delle variabili inutilizzate (unused), ottimizzazione dell'hoisting di funzioni/variabili, semplificazione delle espressioni condizionali, ottimizzazione dei cicli, ecc. La compressione prima compila JSX in JavaScript comune tramite Babel e quindi esegue la compressione e l'ottimizzazione. Nota: il codice compresso ha una leggibilità drasticamente ridotta, adatto per la distribuzione in ambiente di produzione, non per lo sviluppo e il debug.

Supporta TypeScript (TSX)? Qual è la differenza da JSX?

Supporta. Lo strumento utilizza il linguaggio JSX per impostazione predefinita. Puoi passare alla modalità TSX tramite il menu di cambio linguaggio in alto a sinistra. La modalità TSX utilizza il parser TypeScript, che riconosce correttamente le annotazioni di tipo TypeScript (interface, type, generics, asserzione di tipo, ecc.), non riportando errori per la sintassi di tipo. La modalità JSX utilizza il parser Babel, adatto per componenti React in JavaScript puro. Nella compressione TSX, le annotazioni di tipo vengono rimosse automaticamente prima della compressione Terser.

Il codice JSX inserito viene inviato al server? La privacy è sicura?

Completamente sicuro. Tutte le funzioni di questo strumento (formattazione, compressione, rilevamento sintassi, cronologia) vengono eseguite localmente nel tuo browser tramite JavaScript. Il contenuto del codice non viene inviato tramite rete a nessun server esterno. Prettier e Terser sono librerie implementate puramente in JavaScript, che possono essere eseguite direttamente lato browser. Puoi usare questo strumento offline — tutte le funzioni continuano a funzionare normalmente. La cronologia è salvata nel localStorage del browser, visibile solo sul tuo dispositivo attuale.

Dove viene salvata la cronologia? Può essere persa?

La cronologia è salvata nel localStorage (archiviazione locale) del browser, legata allo specifico browser e dispositivo. Se cancelli i dati del browser, cambi browser o usi la modalità incognito, la cronologia verrà persa. La cronologia serve per tornare rapidamente ai frammenti di codice formattati di recente, facilitando il confronto degli effetti di diverse configurazioni. Si consiglia di salvare autonomamente i codici importanti come file, non dipendendo solo dalla funzione di cronologia.

La funzione di condivisione URL invia il codice al server?

No. La funzione di condivisione URL comprime il codice e la configurazione usando LZ-String e li codifica nella parte hash dell'URL (contenuto dopo il #). L'hash dell'URL ha una caratteristica importante: non viene inviato al server con la richiesta HTTP, ma viene letto e analizzato solo localmente nel browser da JavaScript. Quando il destinatario apre il link di condivisione, il browser analizza direttamente l'hash e decomprime per visualizzare il codice — l'intero processo non richiede la partecipazione del server. Tuttavia, nota che il link di condivisione contiene il contenuto completo del codice. Se il codice è sensibile, non condividerlo su canali pubblici.

Cosa fare se la formattazione fallisce e indica un errore di sintassi?

La causa più comune di fallimento della formattazione è che il codice stesso ha errori di sintassi: 1) Tag JSX non chiusi — verifica che tutti i tag abbiano la coppia corrispondente, che i tag autochiudenti siano corretti (<img /> invece di <img>); 2) Parentesi non corrispondenti — verifica che le parentesi graffe {}, tonde (), quadre [] siano abbinate; 3) Virgolette non chiuse — che le virgolette delle stringhe siano complete; 4) Sintassi scritta in modo errato — ad esempio, uso di sintassi non consentita in JSX. Puoi prima verificare il numero di riga e il messaggio di errore nel suggerimento per localizzare il problema, oppure semplificare il codice e indagare passo dopo passo.

Cosa significa larghezza di stampa (printWidth)? Qual valore devo impostare?

La larghezza di stampa (printWidth) è uno dei parametri centrali di Prettier, che indica il numero massimo di caratteri per riga di codice. Quando una riga di codice supera questa larghezza, Prettier la spezza automaticamente. Il valore predefinito è 80 caratteri, una convenzione di programmazione di lunga data (originata dalle schede perforate e dalla larghezza del terminale). Valori comuni: 80 (classico conservatore), 100 (più comune), 120 (amichevole per schermi larghi). Impostarlo troppo piccolo causa interruzioni frequenti che rendono difficile la lettura; impostarlo troppo grande rende la riga troppo lunga per leggere su schermi stretti. Si consiglia di scegliere un valore tra 80-120 in base alle normative del team e alla larghezza del monitor.

A cosa serve la virgola finale (trailing comma)? Quale modalità devo scegliere?

La virgola finale si riferisce all'aggiunta di una virgola anche dopo l'ultimo elemento in strutture multilinea come array, oggetti e parametri di funzione. I vantaggi includono: 1) Aggiungere/rimuovere elementi modifica solo una riga, Git diff più pulito; 2) Evita errori di sintassi per aver dimenticato di aggiungere la virgola; 3) In alcuni casi, analisi più stabile. Prettier offre tre modalità: none (nessuna virgola finale, più conciso), es5 (solo dove supportato da ES5, ovvero array e oggetti, più compatibile), all (in tutti i posti possibili, inclusi i parametri di funzione, richiede ES2017+ o supporto Babel/TS). Per i progetti moderni, si consiglia la modalità 'all', che funziona perfettamente con la compilazione Babel o TypeScript.

Quali sono gli effetti di jsxSingleQuote e jsxBracketSameLine?

jsxSingleQuote (virgolette singole JSX): Controlla se i valori degli attributi JSX usano virgolette singole o doppie. Per impostazione predefinita, disattivato (virgolette doppie), il che è in linea con la convenzione degli attributi HTML. Quando attivato, le stringhe degli attributi in JSX usano virgolette singole. jsxBracketSameLine (parentesi JSX sulla stessa riga): Controlla se la parentesi destra di chiusura (/> o >) degli elementi JSX multilinea rimane alla fine dell'ultima riga (stessa riga) o in una nuova riga (riga diversa). Per impostazione predefinita, disattivato (nuova riga). Quando attivato, la parentesi destra rimane sulla stessa riga dell'ultimo attributo. Team diversi hanno preferenze diverse — scegli lo stile coerente con il progetto.

Supporta la formattazione batch di più file?

Attualmente, lo strumento web è progettato principalmente per scenari di formattazione rapida di file singolo, supportando l'upload di file individuali. Se hai molti file JSX/TSX da formattare in batch, si consiglia di installare lo strumento Prettier CLI nel progetto ed elaborare in batch tramite riga di comando (ad esempio, npx prettier --write "src/**/*.jsx"). Il motore sottostante di questo strumento è esattamente lo stesso di Prettier, con risultati di formattazione identici. Le versioni future potrebbero considerare l'aggiunta della funzione di elaborazione batch.

Può essere usato in combinazione con ESLint?

Sì. Nei progetti reali, si consiglia di usare Prettier per il formato del codice (interruzioni di riga, rientro, spazi, virgolette, ecc.) e ESLint per la qualità del codice (variabili inutilizzate, bug potenziali, migliori pratiche, ecc.). La pratica consigliata per usarli insieme è: 1) Installare eslint-config-prettier per disattivare le regole di formato in ESLint che confliggono con Prettier; 2) Eseguire prima la formattazione Prettier e poi il controllo ESLint. Questo strumento si concentra sulla formattazione (ciò che Prettier fa bene) e non include la funzione di controllo del codice di ESLint.

Può essere usato sul cellulare? Com'è l'esperienza mobile?

Può essere usato nel browser del cellulare. Lo strumento adotta un design reattivo, regolando automaticamente il layout su dispositivi a schermo piccolo — le colonne sinistra-destra diventano colonne sopra-sotto, e i pulsanti della barra degli strumenti sono ottimizzati per dimensioni adatte al tocco. Tuttavia, la modifica del codice sul cellulare ha un'esperienza inferiore rispetto al desktop. Si consiglia di usarlo principalmente sul computer. Se hai bisogno di elaborare frequentemente codice su dispositivi mobili, si consiglia di usare app di editor di codice mobile che supportano Prettier.

Risoluzione dei problemi

Cosa fare se la formattazione fallisce e indica un errore di sintassi?

Prima verifica che il codice sia completo: i componenti JSX di solito hanno bisogno di export o almeno contengono una funzione che restituisca JSX. Errori di sintassi comuni includono: 1) Tag JSX non chiusi — verifica che ogni tag di apertura abbia un tag di chiusura corrispondente o una marcatura autochiudente; 2) Parentesi graffe non corrispondenti — che le parentesi delle espressioni {} in JSX siano abbinate; 3) Virgolette di stringhe non chiuse — verifica tutte le virgolette singole/virgolette doppie/backtick; 4) Uso di parole riservate in JSX — come class deve essere scritto come className, for deve essere scritto come htmlFor; 5) Più elementi radice — JSX permette solo un elemento radice, più elementi devono essere racchiusi da <>...</> o <div>. I messaggi di errore di solito indicano il numero di riga e il motivo, che possono essere usati per la localizzazione.

Nessuna reazione o formato errato dopo l'upload del file?

Prima verifica che l'estensione del file sia corretta — file .jsx/.tsx/.js/.ts/.css/.html/.json possono essere caricati. Se l'estensione del file non è standard, lo strumento potrebbe non riconoscere correttamente il formato del linguaggio, risultando in una formattazione non conforme alle aspettative. Soluzioni: 1) Garantisci che l'estensione del file sia in formato standard; 2) Dopo l'upload, verifica che la selezione del linguaggio in alto a sinistra sia corretta, potendo essere cambiata manualmente se errata; 3) Verifica che il contenuto del file sia testo puro e non file binario; 4) File troppo grandi (oltre 1MB) possono causare rallentamenti nel browser, si consiglia di usare strumenti desktop per l'elaborazione.

Il codice formattato è diverso dal risultato del mio Prettier locale?

Possibili cause: 1) Differenza di versione — questo strumento usa Prettier v3, se il tuo progetto usa la versione v2, alcuni dettagli potrebbero essere diversi (come la modifica del valore predefinito della virgola finale); 2) Configurazioni diverse — verifica che parametri come larghezza di stampa, rientro, virgolette, virgola finale siano coerenti con la configurazione del progetto; 3) Parser diversi — JSX usa il parser Babel, TSX usa il parser TypeScript, verifica di aver selezionato quello corretto; 4) Differenza di plugin — se il Prettier locale ha plugin aggiuntivi installati (come prettier-plugin-tailwindcss), questo strumento non include questi plugin. Si consiglia di regolare la configurazione di questo strumento per renderla coerente con il .prettierrc del progetto.

Il codice non funziona correttamente dopo aver compresso JSX?

La compressione JSX usa il motore Terser, che prima compila JSX in JavaScript comune prima di comprimere. Se il codice compresso non funziona, verifica: 1) Se la configurazione di compressione è troppo aggressiva — come l'abilitazione di toplevel potrebbe alterare il comportamento del modulo; 2) Se il codice usa eval o accesso dinamico alle proprietà — l'offuscamento delle variabili potrebbe causare incompatibilità di nomi; 3) Se dipende da nomi specifici di funzioni o classi — se sì, è necessario abilitare le opzioni keep_fnames o keep_classnames. Per la compressione in ambiente di produzione, si consiglia di usare strumenti di costruzione del progetto (Vite/Webpack), che hanno configurazioni e un ecosistema di plugin più completi.

Glossario

JSX: Acronimo di JavaScript XML, estensione della sintassi JavaScript introdotta da React che permette di scrivere strutture di tag simili all'HTML in JS. Dopo la compilazione, viene convertita in chiamate React.createElement().
Prettier: Lo strumento di formattazione del codice opinionato più popolare attualmente, supporta JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown, ecc., diventato lo standard di fatto per la formattazione del codice front-end.
Babel: Compilatore JavaScript che può convertire nuove sintassi come ES6+/JSX/TS in codice ES5 compatibile con i browser vecchi, fungendo anche da motore sottostante di Prettier per analizzare JSX.
Terser: Uno dei compressori (minifier) JavaScript/JSX più popolari del settore, supporta offuscamento variabili, eliminazione codice morto, compressione codice, ecc. È il compressore predefinito di strumenti di costruzione come Webpack/Vite.
Print Width: Uno dei parametri centrali di Prettier, indica il numero massimo di caratteri per riga di codice, con interruzione automatica al superamento di questa larghezza. Predefinito 80 caratteri, impostazioni comuni 80/100/120.
Trailing Comma: Aggiungere virgola anche dopo l'ultimo elemento in strutture multilinea come array, oggetti e parametri di funzione. Può rendere il Git diff più pulito ed evitare errori di sintassi. Prettier supporta tre modalità: none/es5/all.
Mangle: Tecnica di accorciamento dei nomi di variabili/funzioni nella compressione del codice, sostituendo nomi lunghi con significato con nomi corti come a/b/c, riducendo il volume del codice e aumentando anche la difficoltà di lettura.
Dead Code Elimination: Tecnica di ottimizzazione dei compressori che rimuove il codice che non verrà mai eseguito (come il codice sotto condizione false, variabili e funzioni inutilizzate), riducendo il volume del prodotto.
CodeMirror: Componente di editor di codice per browser usato da questo strumento (versione 6), fornisce funzioni di editing professionali come evidenziazione sintassi, numeri di riga, corrispondenza parentesi, ampiamente usato in vari IDE online.
LZ-String: Algoritmo di compressione LZ implementato in JavaScript, usato per comprimere e archiviare efficientemente il contenuto del codice nell'hash dell'URL. Alto tasso di compressione e velocità di decodifica veloce, adatto per scenari di link di condivisione.
localStorage: API di archiviazione locale chiave-valore fornita dal browser, capacità di circa 5-10MB, dati persistenti (a meno che non siano cancellati attivamente). Questo strumento lo usa per archiviare la cronologia di formattazione.
ESLint: Strumento di controllo statico del codice JavaScript/TypeScript (Linter), responsabile principalmente della qualità del codice e delle migliori pratiche, solitamente usato in combinazione con Prettier (Prettier gestisce il formato, ESLint gestisce la qualità).

Linguaggi e formati di file supportati

Lo strumento supporta 7 linguaggi comuni del front-end, che possono essere cambiati liberamente tramite il menu in alto a sinistra:

Linguaggio	Estensione file	Motore formattazione	Motore compressione
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (rimuove tipi prima)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (rimuove tipi prima)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Implementazione personalizzata
JSON	`.json`	Prettier (JSON)	JSON.stringify

Panoramica delle configurazioni di formattazione

12 parametri di formattazione configurabili e le loro funzioni:

Voce configurazione	Valori opzionali	Valore predefinito	Descrizione
tabWidth Dimensione rientro	`2 / 4 / 8 / Tab`	`2 spazi`	Numero di spazi usati per ogni livello di rientro, o uso del carattere Tab
semi Punto e virgola	`true / false`	`true`	Se aggiungere il punto e virgola alla fine delle istruzioni
singleQuote Virgolette singole	`true / false`	`false (virgolette doppie)`	Se le stringhe JS usano virgolette singole o doppie
trailingComma Virgola finale	`none / es5 / all`	`es5`	Se aggiungere la virgola finale dopo l'ultimo elemento nelle strutture multilinea
bracketSpacing Spazio parentesi	`true / false`	`true`	Se aggiungere spazio all'interno delle parentesi graffe degli oggetti
arrowParens Parentesi freccia	`always / avoid`	`always`	Se aggiungere le parentesi nel parametro singolo della funzione freccia
printWidth Larghezza di stampa	`Numero (consigliato 80-120)`	`80`	Numero massimo di caratteri per riga, con interruzione automatica al superamento
jsxSingleQuote Virgolette singole JSX	`true / false`	`false`	I valori degli attributi JSX usano virgolette singole (predefinito: virgolette doppie)
jsxBracketSameLine Parentesi JSX stessa riga	`true / false`	`false`	Se la parentesi destra di JSX multilinea rimane sulla stessa riga dell'ultimo attributo
quoteProps Virgolette proprietà	`as-needed / preserve / consistent`	`as-needed`	Quando aggiungere le virgolette ai nomi delle proprietà degli oggetti

Confronto degli effetti prima e dopo la compressione JSX

Prendendo come esempio un tipico componente React, mostriamo la variazione di volume prima e dopo la compressione:

Voce confronto	Formattato (sviluppo)	Compresso (produzione)	Tasso compressione
Volume codice	Circa 2.5 KB	Circa 0.8 KB	`~68%`
Numero di righe	Circa 80 righe	1 riga	`~99%`
Nomi variabili	Nomi con significato	Lettere singole a/b/c/d	`—`
Commenti	Tutti i commenti conservati	Tutti rimossi	`—`
Leggibilità	Alta (debug e lettura)	Molto bassa (solo leggibile da macchina)	`—`
Scenari applicabili	Sviluppo, debug, revisione	Distribuzione produzione, distribuzione CDN	`—`

Privacy & Security

Tutte le operazioni di questo strumento di formattazione JSX vengono eseguite completamente localmente nel browser: il codice che inserisci o carichi viene formattato e compresso solo in JavaScript nel browser, non viene inviato tramite rete a nessun server esterno. Prettier e Terser sono librerie puramente in JavaScript, che possono essere eseguite direttamente lato browser. La cronologia è salvata nel localStorage (archiviazione locale) del browser, visibile solo sul dispositivo e browser attuali. La funzione di condivisione URL comprime il codice tramite LZ-String e lo codifica nella parte hash dell'URL (contenuto dopo # non viene inviato al server). La pagina non usa tracciamento Cookie, non raccoglie il contenuto del codice inserito dall'utente. Puoi usare questo strumento offline, con le funzioni centrali funzionanti normalmente.

Authoritative References

prettier.ioDocumentazione ufficiale Prettier
terser.orgTerser - Compressore JavaScript
react.devDocumentazione ufficiale React - Introduzione a JSX