Formatador JSX

Pujar

0 caràcters

Eina Formatador JSX de GeekFormat, basada en el motor Prettier v3 Standalone per a l'embelliment professional de codi de components React JSX/TSX. Suporta 12 configuracions de formatatge (mida d'indentació, punt i coma, estil de cometes, comes finals, espai entre claudàtors, parèntesis en funcions fletxa, amplada d'impressió, cometes simples JSX, claudàtor de tancament en la mateixa línia, estratègia de cometes de propietat, etc.), amb motor de minificació Terser integrat, proporciona canvi entre set llenguatges JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Editor amb ressaltat de sintaxi CodeMirror 6, comparació en temps real de panells esquerra-dret, suporta càrrega/descàrrega de fitxers, històric de registres, compartició per URL, còpia amb un clic. Processament purament al costat del navegador, sense càrrega de codi al servidor.

Relacionats

Minificador JSX

Formatejador de TSX

Formatejador de JavaScript

Formatador de CSS

JSON Formatter

Sobre el Formatatge JSX

JSX vol dir JavaScript XML, és una extensió de sintaxi JavaScript introduïda pel framework React que permet escriure estructures d'etiquetes semblants a HTML directament en codi JavaScript. JSX es converteix en crides a funcions React.createElement() normals en temps de compilació per eines com Babel o TypeScript. JSX fa que l'estructura del codi de components sigui més intuïtiva, permetent als desenvolupadors descriure l'estructura de la UI com si escriguessin HTML tot guanyant el poder expressiu complet de JavaScript. Tot i això, si el codi JSX manca de formatatge estandarditzat — nivells d'imbricació d'etiquetes desordenats, disposició d'atributs desorganitzada, indentació inconsistent — afectarà seriosament la llegibilitat i l'eficiència de manteniment, que també és el valor de les eines de formatatge JSX.

Prettier és actualment l'eina de formatatge de codi més convencional de l'ecosistema JavaScript/JSX, creada per James Long el 2017, i ara s'ha convertit en l'estàndard de facto. El concepte principal de Prettier és "opinionated formatter" — només proporciona uns pocs elements configurables, i la resta de regles estan integrades i no es poden modificar. L'avantatge d'aquesta aproximació és eliminar les discussions interminables sobre l'estil de codi entre equips. Prettier suporta múltiples llenguatges i formats com JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, i és àmpliament adoptat per comunitats de frameworks convencionals com React, Vue i Angular. La majoria de projectes frontend moderns integren Prettier a les pipelines CI/CD per assegurar un estil de codi consistent.

Les regles principals del formatatge JSX inclouen: Primer, nivells d'indentació — cada etiqueta JSX i expressió imbricada augmenta un nivell d'indentació, reflectint l'estructura de l'arbre DOM; Segon, disposició d'atributs — quan una etiqueta té múltiples atributs i supera l'amplada de línia, cada atribut ocupa la seva línia i està alineat; Tercer, gestió de claudàtors — les expressions JSX multilinia solen estar embolcallades en parèntesis per evitar problemes d'inserció automàtica de punt i coma (ASI); Quart, etiquetes de tancament automàtic — components sense elements fills utilitzen la forma <Component />; Cinquè, cometes de cadena — els atributs JSX per defecte utilitzen cometes dobles (consistent amb HTML), les cadenes JavaScript per defecte utilitzen cometes simples; Sisè, gestió d'espais en blanc — si afegir espais a banda i banda de les claudàtors {} dins les etiquetes és configurable.

La minificació JSX és l'operació inversa del formatatge, amb el propòsit de convertir JSX en el volum de codi executable més petit, utilitzat per al desplegament de producció per reduir el volum de transmissió per xarxa i accelerar la càrrega. La minificació JSX sol incloure els passos següents: primer compilar JSX a crides React.createElement (és a dir, JavaScript normal) utilitzant Babel, i després utilitzar un minificador (com Terser, UglifyJS) per: eliminar comentaris i caràcters d'espai en blanc, escurçar noms de variables i noms de funcions (mangling), eliminar codi mort (dead code elimination), simplificar expressions i sentències condicionals, fusionar declaracions, funcions en línia, etc. Les eines de construcció modernes (Webpack, Vite, Rollup) executen automàticament la minificació de codi en mode producció.

Per què és important el formatatge de codi? En la col·laboració d'equips, un estil de codi unificat pot millorar significativament la llegibilitat i l'eficiència de revisió. Si cada desenvolupador formata el codi segons la seva preferència, el diff de Git s'omplirà de una gran quantitat de canvis de format sense sentit, fent que sigui difícil per als revisors trobar canvis lògics reals. La investigació mostra que els desenvolupadors passen molt més temps llegint codi que escrivint codi, i un estil de formatatge consistent pot reduir significativament la càrrega cognitiva de lectura. Grans empreses com Google, Meta i Airbnb tenen estrictes especificacions d'estil de codi i eines de formatatge automatitzades, que també és un reflex de la maduresa de l'enginyeria de programari.

La divisió de treball entre Prettier i els Linters (com ESLint, TSLint) és la millor pràctica de l'enginyeria frontend moderna: Prettier s'especialitza en el formatatge — salts de línia, indentació, espais, punts i coma, cometes, comes i altres problemes purament d'estil; ESLint s'especialitza en la qualitat del codi — variables no utilitzades, errors potencials, problemes de seguretat, millors pràctiques i altres problemes lògics. En utilitzar tots dos conjuntament, cal desactivar les regles de formatatge superposades a ESLint mitjançant eslint-config-prettier per evitar conflictes. Molts equips també configuren pre-commit hooks (mitjançant husky + lint-staged) per executar automàticament Prettier i ESLint abans de la presentació de codi, assegurant que el codi presentat compleixi les especificacions.

Cal considerar diversos factors en triar una eina de formatatge JSX: Primer, selecció de motor — donar prioritat a triar Prettier com a motor, perquè és l'estàndard de la comunitat, els resultats són previsibles i consistents amb les extensions IDE; Segon, configurabilitat — triar el nombre de paràmetres ajustables segons les necessitats de l'equip, massa opcions augmenten el cost de decisió; Tercer, seguretat — assegurar que l'eina processa el codi localment, no el carrega a servidors, evita riscos de filtració de codi font; Quart, funcions addicionals — minificació, ressaltat de sintaxi, històric de registres, compartició i altres funcions poden millorar l'eficiència d'ús; Cinquè, suport multilingüe — una eina que cobreixi múltiples llenguatges com JS/TS/JSX/TSX/CSS/HTML/JSON pot reduir el cost de canvi d'eina.

Precaucions de seguretat en utilitzar eines de formatatge de codi en línia: Primer, donar prioritat a triar eines amb processament purament al costat del navegador — aquestes eines no necessiten servidors, el codi només s'executa localment, amb la màxima seguretat; Segon, no enganxis codi que contingui informació sensible — com contrasenyes de bases de dades, claus API, lògica comercial interna, algoritmes propietaris, etc., encara que l'eina afirmi no carregar, mantingueu la consciència de seguretat; Tercer, comprova si l'eina utilitza HTTPS — evita l'escolta clandestina durant la transmissió (encara que les eines processades localment no necessitin transmissió, la pàgina mateixa també necessita carregar-se de forma segura); Quart, per a codi important utilitza eines locals — per a codi de negoci principal, es recomana utilitzar Prettier CLI o extensions IDE instal·lades localment, no depre'ns de serveis en línia; Cinquè, revisa regularment la credibilitat de l'eina — comprova si és de codi obert, quines són les ressenyes de la comunitat, si té política de privacitat, etc.

Casos d'ús

Codi de component React copiat d'internet amb format desordenat, formatar ràpidament per facilitar la lectura i l'aprenentatge
Organitzar fitxers de components JSX en reprendre projectes antics, unificar l'estil del codi abans del desenvolupament secundari
Formatar abans de la revisió de codi, eliminar diffs sense sentit causats per diferències de format, centrar-se en la revisió lògica
Desformatar codi JSX de producció minificat, llegir codi ofuscat en solucionar problemes de producció
Enbellir codi d'exemple JSX abans d'escriure blogs tècnics o documentació, millorar el professionalisme del contingut
Comparar efectes de diferents configuracions de formatatge, referència per a la selecció de configuració Prettier de l'equip
Demostrar el procés de formatatge de codi JSX de desordenat a estandarditzat en presentacions docents
En depurar fragments de codi React en línia, formatar primer després analitzar l'estructura i localitzar errors
En documentació de biblioteques de components que generen codi JSX, assegurar que l'estil del codi d'exemple sigui unificat i bell
Organitzar el codi del teu projecte React abans de les entrevistes, assegurar que les mostres de codi enviades compleixin amb els estàndards d'estil
Formatar codi JSX generat per IA abans d'introduir-lo al projecte, eliminar el formatatge inconsistent de la sortida de la IA
Formatar ràpidament fragments de codi de components en línia en desenvolupar projectes React Native o Next.js

Com usar-ho

Enganxa codi JSX/TSX a l'editor esquerra, o clica el botó de càrrega per importar fitxers .jsx/.tsx, o carrega directament dels exemples
Clica el botó de configuració per ajustar els paràmetres de formatatge: mida d'indentació, punt i coma, cometes, comes finals, amplada d'impressió, opcions JSX, etc., o mantén la configuració per defecte
Clica el botó d'embellir (o prem la drecera) per executar el formatatge, el panell dret mostra instantàniament els resultats, pots arrossegar esquerra i dreta per ajustar l'amplada del panell
Si cal minificació, clica el botó de minificar per canviar al mode de minificació, el motor Terser mostrarà el codi JSX minificat
Clica el botó de copiar per copiar els resultats al porta-retalls, o clica descarregar per guardar com a fitxer, o envia a altres mitjançant l'enllaç de compartició

Característiques

Motor Prettier v3: Utilitza Prettier v3 Standalone, el més popular de la indústria, com a motor de formatatge, combinat amb l'analitzador Babel, consistent amb els resultats de l'extensió Prettier a VS Code, assegurant un estil de codi d'equip unificat
12 configuracions de formatatge: Mida d'indentació ajustable (2/4/8 espais o Tab), punt i coma, cometes simples/dobles, comes finals (none/es5/all), espai entre claudàtors, parèntesis en funcions fletxa, amplada d'impressió, cometes simples JSX, claudàtor de tancament en la mateixa línia, estratègia de cometes de propietat, i 12 paràmetres més
Editor amb ressaltat de sintaxi JSX: Editor de codi professional basat en CodeMirror 6, amb suport per a ressaltat de sintaxi JSX/TSX, números de línia, coincidència de claudàtors, amb comparació en temps real entre l'entrada esquerra i els resultats drets
Funció de minificació JSX: Motor de minificació Terser integrat, minifica codi de components JSX a mida mínima amb un clic, amb suport per a opcions avançades de minificació com canvi de noms de variables, eliminació de codi mort, neteja de console/debugger, etc.
7 llenguatges fàcils de canviar: Suporta JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — set llenguatges frontend d'ús comú, una eina cobreix totes les necessitats de formatatge full-stack
Càrrega i descàrrega de fitxers: Suporta càrrega i formatatge directes de fitxers .jsx/.tsx/.js/.ts/.css/.html/.json, que es poden descarregar i guardar localment després del processament
Panell d'historial de registres: Desa automàticament els registres de formatatge recents, amb suport per a retrocedir a versions històriques i comparar efectes de formatatge amb diferents configuracions
Copiar resultats amb un clic: El codi formatat o minificat es pot copiar al porta-retalls amb un clic, enganxar directament a l'IDE o projectes per utilitzar
Funció de compartició per URL: Codifica el codi i la configuració al hash de l'URL mitjançant compressió LZ-String, copia l'enllaç per compartir el codi complet i els paràmetres de formatatge
Avisos amigables d'errors de sintaxi: Distingeix els errors de sintaxi d'altres errors quan el formatatge falla, proporcionant avisos localitzats per ajudar a ràpidament solucionar problemes de codi
Panells divisibles arrossegables: L'amplada dels panells esquerra i dret es pot ajustar flexiblesment arrossegant, adaptant-se a diferents mides de pantalla i hàbits de lectura
Processament local al navegador: Tot el formatatge, minificació i anàlisi es fa al JavaScript del navegador, el contingut del codi no es carrega a cap servidor, s'assegura la seguretat del codi font

Preguntes freqients

Quin és el principi del formatatge JSX? Quina relació té amb Prettier?

Aquesta eina utilitza la versió Prettier v3 Standalone com a motor de formatatge subjacent, analitza la sintaxi JSX mitjançant l'analitzador Babel, i després torna a generar codi amb format ordenat segons les regles configurades. Prettier és actualment l'eina de formatatge de codi més popular de l'ecosistema frontend, àmpliament utilitzada en projectes React/Vue/Angular i d'altres. El resultat de formatatge d'aquesta eina és bàsicament consistent amb el resultat de formatar fitxers JSX amb l'extensió Prettier a VS Code, adequada per a formatatge ràpid en línia sense obrir l'IDE local.

Quines opcions de formatatge s'admeten? Puc personalitzar l'indentació i l'estil de cometes?

Suporta 12 configuracions de formatatge: 1) Mida d'indentació: 2 espais/4 espais/8 espais o utilitzar Tab; 2) Si utilitzar punt i coma; 3) Cometes simples o dobles; 4) Estratègia de coma final: none/es5/all (també inclou paràmetres de funció); 5) Si hi ha espais dins les claudàtors d'objecte; 6) Si afegir parèntesis per a funcions fletxa de sol paràmetre; 7) Amplada d'impressió (màxim caràcters per línia); 8) Si els atributs JSX utilitzen cometes simples o dobles; 9) Si el claudàtor de tancament de JSX multilinia està a la mateixa línia que el contingut; 10) Estratègia de cometes de propietat d'objecte: as-needed/preserve/consistent; 11) Sensibilitat a l'espai en blanc HTML; 12) Utilitzar indentació Tab. Fàcilment ajustable al panell de configuració.

El formatatge canvia la lògica del codi JSX? És segur?

El formatatge només ajusta els caràcters d'espai en blanc (salts de línia, indentació, espais) i les formes de sintaxi com cometes i punts i coma, no canvia cap lògica de codi. Prettier és una eina madurada verificada per milions de desenvolupadors de tot el món, i el codi formatat és semànticament completament equivalent al codi original. Tot i així, tingueu en compte: si el codi original té errors de sintaxi (com claudàtors desajustats, etiquetes sense tancar), el formatatge fallarà i indicarà un error de sintaxi, en aquest cal solucionar primer el problema del codi i després formatar.

Com s'implementa la funció de minificació JSX? Quines opcions de minificació s'admeten?

La minificació JSX utilitza el motor Terser (un dels minificadors JavaScript més populars de la indústria) executat localment al navegador. La minificació inclou: eliminar comentaris i espais en blanc extra, escurçar i canviar noms de variables (mangling), eliminació de codi mort (dead_code), eliminació de variables no utilitzades (unused), optimització d'elevació de funcions/variables, simplificació d'expressions condicionals, optimització de bucles, etc. La minificació primer compila JSX a JavaScript normal mitjançant Babel, i després realitza l'optimització de minificació. Nota: El codi minificat té una llegibilitat significativament reduïda, adequada per a desplegament de producció, no per a desenvolupament i depuració.

Es suporta TypeScript (TSX)? Quina diferència hi ha amb JSX?

Suportat. L'eina per defecte està al llenguatge JSX, pots canviar al mode TSX mitjançant el menú de canvi de llenguatge a la cantonada superior esquerra. El mode TSX utilitza l'analitzador TypeScript, que pot reconeixer correctament anotacions de tipus TypeScript (interface, type, genèrics, asercions de tipus, etc.), i no donarà errors degut a la sintaxi de tipus. El mode JSX utilitza l'analitzador Babel, adequat per a components React de JavaScript pur. La minificació TSX eliminarà automàticament les anotacions de tipus abans de realitzar la minificació Terser.

El codi JSX introduït es carregarà al servidor? S'assegura la privacitat i seguretat?

Completament segur. Totes les funcions d'aquesta eina (formatatge, minificació, detecció de sintaxi, històric de registres) es realitzen localment al teu navegador mitjançant JavaScript, el contingut del codi no s'envia per la xarxa a cap servidor extern. Prettier i Terser són dues biblioteques amb implementació purament JavaScript que poden executar-se directament al costat del navegador. Pots utilitzar aquesta eina estant fora de línia, totes les funcions continuen funcionant normalment. Els registres històrics es guarden al localStorage del navegador, només visibles al teu dispositiu actual.

On es guarden els registres històrics? Es perdran?

Els registres històrics es guarden al localStorage (emmagatzematge local) del navegador, lligats al navegador i dispositiu específics. Si neteja les dades del navegador, canvia de navegador, o utilitza mode incògnit, els registres històrics es perdran. Els registres històrics s'utilitzen per retrocedir ràpidament a fragments de codi formatats recentment, convenient per comparar efectes de diferents configuracions. Es recomana guardar el codi important tu mateix com a fitxers, i no depre'ns només de la funció de registre històric.

La funció de compartició per URL carrega el codi al servidor?

No. La funció de compartició per URL comprimeix el codi i la configuració amb LZ-String i els codifica a la part hash de l'URL (contingut després del símbol #). Una característica important del hash de l'URL és que no s'envia al servidor amb les sol·licituds HTTP, i només és llegit i analitzat per JavaScript localment al navegador. Quan el destinatari obre l'enllaç de compartició, el navegador analitza directament el hash i el descomprimeix per mostrar el codi, tot el procés no requereix participació del servidor. Però si us plau tingueu en compte: l'enllaç de compartició conté el contingut complet del codi, si el codi és sensible, no el compartiu mitjançant canals públics.

Què haig de fer si el formatatge falla amb un avís d'error de sintaxi?

La causa més comuna de fallada de formatatge són els errors de sintaxi al propi codi: 1) Etiquetes JSX sense tancar — comprova que totes les etiquetes estiguin aparellades, les etiquetes de tancament automàtic siguin correctes (<img /> no <img>); 2) Claudàtors desajustats — comprova si les claudàtors {}, parèntesis (), claudàtors quadrats [] estan aparellats; 3) Cometes sense tancar — si les cometes de cadena estan completes; 4) Sintaxi incorrecta — per exemple, utilitzar sintaxi no permesa a JSX. Pots primer comprovar el número de línia i el missatge d'error a l'avís d'error per localitzar el problema, o simplificar el codi i solucionar problemes pas a pas.

Què vol dir l'amplada d'impressió (printWidth)? Quin valor he de definir?

L'amplada d'impressió (printWidth) és un dels paràmetres principals de Prettier, que representa el nombre màxim de caràcters per línia de codi. Quan una línia de codi supera aquesta amplada, Prettier l'ajustarà automàticament. El valor per defecte és de 80 caràcters, que és una convenció de programació de llarga data (originada de targetes perforades i l'amplada del terminal). Valors de configuració comuns: 80 (conservador clàssic), 100 (més comú), 120 (adaptat a pantalles amples). Definir-lo massa petit farà que el codi s'ajusti freqüentment fent que sigui més difícil de llegir, definir-lo massa gran farà que una línia sigui massa llarga per llegir en pantalles estretes. Es recomana triar un valor entre 80-120 segons les especificacions de l'equip i l'amplada del monitor.

Per a què serveix la coma final (trailing comma)? Quin mode he de triar?

La coma final vol dir afegir una coma després de l'últim element en estructures multilinia com arrays, objectes, paràmetres de funció, etc. Els avantatges inclouen: 1) Afegir/eliminar elements només canvia una línia, el diff de Git és més net; 2) Evitar errors de sintaxi causats per oblidar afegir comes; 3) Anàlisi més estable en alguns casos. Prettier proporciona tres modes: none (sense comes finals, el més concís), es5 (només afegir on suporta ES5, és a dir, arrays i objectes, el més compatible), all (afegir on sigui possible, incloent paràmetres de funció, requereix suport ES2017+ o Babel/TS). Per a projectes moderns es recomana utilitzar el mode 'all', que està perfectament bé amb compilació Babel o TypeScript.

Quins efectes tenen les cometes simples JSX i el claudàtor en la mateixa línia JSX respectivament?

Cometes simples JSX (jsxSingleQuote): Controla si els valors dels atributs JSX utilitzen cometes simples o dobles. Per defecte està desactivat (cometes dobles), que és consistent amb les convencions d'atributs HTML. Quan està activat, les cadenes d'atributs a JSX utilitzaran cometes simples. Claudàtor en la mateixa línia JSX (jsxBracketSameLine): Controla si el claudàtor d'angle dret de tancament (/> o >) dels elements JSX multilinia es col·loca al final de l'última línia (mateixa línia), o en una nova línia (línia diferent). Per defecte està desactivat (en nova línia), quan està activat el claudàtor dret estarà a la mateixa línia que l'últim atribut. Diferents equips tenen diferents preferències, només cal triar l'estil consistent amb el projecte.

Es suporta el formatatge per lots de múltiples fitxers?

Actualment l'eina de versió web està dissenyada principalment per a escenaris de formatatge ràpid de fitxer únic, amb suport per al processament de càrrega de fitxer únic. Si tens una gran quantitat de fitxers JSX/TSX que necessiten formatatge per lots, es recomana instal·lar l'eina Prettier CLI al teu projecte i processar-los per lots mitjançant la línia de comandes (per exemple npx prettier --write "src/**/*.jsx"). El motor subjacent d'aquesta eina és completament consistent amb Prettier, amb els mateixos resultats de formatatge. En futures versions es pot considerar afegir funcions de processament per lots.

Es pot utilitzar amb ESLint?

Sí. En projectes reals, es recomana utilitzar Prettier per al formatatge de codi (salts de línia, indentació, espais, cometes, etc.), i ESLint per a la qualitat del codi (variables no utilitzades, errors potencials, millors pràctiques, etc.). La millor pràctica per utilitzar tots dos conjuntament és: 1) Instal·lar eslint-config-prettier per desactivar les regles de formatatge a ESLint que entren en conflicte amb Prettier; 2) Executar primer el formatatge Prettier, i després executar les comprovacions ESLint. Aquesta eina se centra en el formatatge (allò en què Prettier és bo), no inclou la funcionalitat de comprovació de codi d'ESLint.

Es pot utilitzar en mòbils? Com és l'experiència mòbil?

Es pot utilitzar en navegadors mòbils. L'eina adopta un disseny responsiu, ajustant automàticament el disseny en dispositius amb pantalla petita — els panells dividits esquerra-dret es converteixen en panells dividits superior-inferior, i els botons de la barra d'eines estan optimitzats per a mides amigables al tacte. Tot i així, l'experiència d'edició de codi en mòbil no és tan bona com a l'escriptori, es recomana utilitzar-la principalment en ordinadors. Si freqüentment necessites processar codi en dispositius mòbils, es recomana utilitzar una aplicació d'editor de codi mòbil que suporti Prettier.

Solució de problemes

Què haig de fer si el formatatge falla amb un avís d'error de sintaxi?

Primer confirma si el codi està complet: els components JSX solen necessitar export o almenys incloure una funció que retorni JSX. Els errors de sintaxi comuns inclouen: 1) Etiquetes JSX sense tancar — comprova que cada etiqueta d'obertura tingui la seva etiqueta de tancament corresponent o marcador de tancament automàtic; 2) Claudàtors desajustats — si les claudàtors de les expressions {} a JSX estan aparellades; 3) Cometes de cadena sense tancar — comprova totes les cometes simples/cometes dobles/backticks; 4) Utilitzar paraules reservades a JSX — per exemple, class s'ha d'escriure com className, for s'ha d'escriure com htmlFor; 5) Múltiples elements arrel — JSX només permet un element arrel, els elements múltiples cal embolcallar-los amb <>...</> o <div>. Els missatges d'error solen indicar el número de línia i la raó, pots localitzar segons correspongui.

Cap resposta després de carregar un fitxer o el format és erroni?

Primer confirma si l'extensió del fitxer és correcta — els fitxers .jsx/.tsx/.js/.ts/.css/.html/.json es poden carregar tots. Si l'extensió del fitxer no estàndard, l'eina pot no reconèixer correctament el format del llenguatge, fent que els resultats de formatatge no compleixin les expectatives. Solucions: 1) Assegura que l'extensió del fitxer tingui format estàndard; 2) Després de carregar, comprova si la selecció de llenguatge a la cantonada superior esquerra és correcta, si no ho és pots canviar manualment; 3) Confirma que el contingut del fitxer sigui text pla i no binari; 4) Fitxers massa grans (més de 1MB) poden causar retards al navegador, es recomana utilitzar eines d'escriptori per al processament.

El codi formatat és diferent dels resultats del meu Prettier local?

Causes possibles: 1) Diferència de versió — aquesta eina utilitza Prettier v3, si el teu projecte utilitza la versió v2, alguns detalls poden diferir (com el canvi dels valors per defecte de les comes finals); 2) Diferents configuracions — comprova si paràmetres com l'amplada d'impressió, indentació, cometes, comes finals coincideixen amb la configuració del projecte; 3) Diferents analitzadors — JSX utilitza l'analitzador Babel, TSX utilitza l'analitzador TypeScript, confirma que s'ha seleccionat el correcte; 4) Diferència de connectors — si el Prettier local té instal·lats connectors addicionals (com prettier-plugin-tailwindcss), aquesta eina no inclou aquests connectors. Es recomana ajustar la configuració d'aquesta eina perquè coincideixi amb el .prettierrc del projecte.

El codi no funciona correctament després de la minificació JSX?

La minificació JSX utilitza el motor Terser, que primer compila JSX a JavaScript normal abans de minificar. Si el codi no funciona després de la minificació, comprova: 1) Si la configuració de minificació és massa agressiva — per exemple, activar toplevel pot canviar el comportament del mòdul; 2) Si el codi utilitza eval o accés dinàmic a propietats — el canvi de noms de variables pot causar desajust de noms; 3) Si depèn de noms de funció o de classe específics — si és així, cal activar les opcions keep_fnames o keep_classnames. Per a la minificació de l'entorn de producció es recomana utilitzar eines de construcció de projectes (Vite/Webpack), que tenen configuracions i ecosistema de connectors més complets.

Glossari

JSX: Abreviatura de JavaScript XML, una extensió de sintaxi JavaScript introduïda per React, permet escriure estructures d'etiquetes semblants a HTML en JS, es converteix en crides React.createElement() després de la compilació.
Prettier: Actualment l'eina de formatatge de codi opinionated més popular, suporta JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown, etc., s'ha convertit en l'estàndard de facto del formatatge de codi frontend.
Babel: Compilador JavaScript que pot convertir nova sintaxi com ES6+/JSX/TS en codi ES5 compatible amb navegadors antics, també serveix com a motor subjacent per a Prettier per analitzar JSX.
Terser: El minificador JavaScript/JSX més popular de la indústria, amb suport per a canvi de noms de variables, eliminació de codi mort, compressió de codi, etc., és el minificador per defecte d'eines de construcció com Webpack/Vite.
Print Width: Un dels paràmetres principals de Prettier, representa el nombre màxim de caràcters per línia de codi, s'ajusta automàticament quan s'excedeix aquesta amplada. Per defecte 80 caràcters, configuracions comunes són 80/100/120.
Trailing Comma: Afegir una coma després de l'últim element en estructures multilinia com arrays, objectes, paràmetres de funció, etc. Pot mantenir el diff de Git més net i evitar errors de sintaxi. Prettier suporta tres modes none/es5/all.
Mangle: Tècnica d'escurçament de noms de variables/funcions en la minificació de codi, canvia noms de variables llargs amb significat per noms curts com a/b/c, redueix el volum del codi, també augmenta la dificultat de lectura.
Dead Code Elimination: Tècnica d'optimització de minificador que elimina codi que mai s'executarà (com codi sota condicions falses, variables i funcions no utilitzades), redueix la mida de la construcció de producció.
CodeMirror: El component d'editor de codi al costat del navegador utilitzat per aquesta eina (versió 6), proporciona característiques professionals d'edició com ressaltat de sintaxi, números de línia, coincidència de claudàtors, àmpliament utilitzat en diversos IDE en línia.
LZ-String: Algorisme de compressió LZ implementat en JavaScript, utilitzat per comprimir i emmagatzemar eficientment el contingut del codi al hash de l'URL. Alta taxa de compressió i ràpida velocitat de descodificació, adequada per a escenaris d'enllaços de compartició.
localStorage: API d'emmagatzematge local clau-valor proporcionada pels navegadors, capacitat d'uns 5-10MB, les dades persisteixen (tret que s'eliminin activament). Aquesta eina l'utilitza per emmagatzemar els registres històrics de formatatge.
ESLint: Eina de comprovació estàtica de codi JavaScript/TypeScript (linter), principalment responsable de la qualitat del codi i les millors pràctiques, normalment utilitzada amb Prettier (Prettier gestiona el format, ESLint gestiona la qualitat).

Llenguatges Suportats i Formats de Fitxer

L'eina suporta 7 llenguatges frontend d'ús comú, fàcils de canviar mitjançant el menú superior esquerre:

Llenguatge	Extensió de Fitxer	Motor de Formatatge	Motor de Minificació
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (primer s'eliminen els tipus)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (primer s'eliminen els tipus)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Implementació personalitzada
JSON	`.json`	Prettier (JSON)	JSON.stringify

Visió General dels Elements de Configuració de Formatatge

12 paràmetres de formatatge configurables i els seus efectes:

Element de Configuració	Valors Possibles	Valor Per Defecte	Descripció
tabWidth Mida d'Identació	`2 / 4 / 8 / Tab`	`2 espais`	Nombre d'espais per nivell d'indentació, o utilitzar caràcter Tab
semi Punt i Coma	`true / false`	`true`	Si afegir punts i coma al final de les sentències
singleQuote Cometes Simples	`true / false`	`false (cometes dobles)`	Si les cadenes JS utilitzen cometes simples o dobles
trailingComma Coma Final	`none / es5 / all`	`es5`	Si afegir coma final després de l'últim element en estructures multilinia
bracketSpacing Espai entre Claudàtors	`true / false`	`true`	Si afegir espais dins les claudàtors d'objecte
arrowParens Parèntesis en Fletxa	`always / avoid`	`always`	Si afegir parèntesis per a funcions fletxa de sol paràmetre
printWidth Amplada d'Impressió	`número (recomanat 80-120)`	`80`	Màxim caràcters per línia, ajust automàtic quan s'excedeix
jsxSingleQuote Cometes Simples JSX	`true / false`	`false`	Els valors dels atributs JSX utilitzen cometes simples (per defecte dobles)
jsxBracketSameLine Claudàtor Mateixa Línea JSX	`true / false`	`false`	Si el claudàtor dret de JSX multilinia està a la mateixa línia que l'últim atribut
quoteProps Cometes de Propietat	`as-needed / preserve / consistent`	`as-needed`	Quan afegir cometes als noms de propietat d'objecte

Comparació Abans i Després de la Minificació JSX

Prenent un component React típic com a exemple, mostrant el canvi de volum abans i després de la minificació:

Element de Comparació	Formatat (Desenvolupament)	Minificat (Producció)	Ràtio de Compressió
Mida del Codi	~ 2.5 KB	~ 0.8 KB	`~68%`
Nombre de Línies	~ 80 línies	1 línia	`~99%`
Noms de Variables	Noms amb significat	lletres individuals a/b/c/d	`—`
Comentaris	Tots els comentaris conservats	Tots eliminats	`—`
Llegibilitat	Alta (depurable i llegible)	Molt baixa (només llegible per màquina)	`—`
Casos d'Ús	Desenvolupament, depuració, revisió	Desplegament de producció, distribució CDN	`—`

Privacy & Security

Totes les operacions d'aquesta eina de formatador JSX es realitzen completament localment al navegador: el codi que introdueix o carrega només es formata i minifica al JavaScript del navegador, i no s'envia per la xarxa a cap servidor extern. Prettier i Terser són dues biblioteques purament JavaScript que poden executar-se directament al costat del navegador. Els registres històrics es guarden al localStorage (emmagatzematge local) del navegador, només visibles al dispositiu i navegador actuals. La funció de compartició per URL comprimeix el codi mitjançant LZ-String i el codifica a la part hash de l'URL (el contingut després de # no s'envia al servidor). La pàgina no utilitza seguiment de Cookie, i no recull el contingut de codi introduït pels usuaris. Pots utilitzar aquesta eina estant fora de línia, les funcions principals estan disponibles normalment.

Authoritative References

prettier.ioDocumentació Oficial Prettier
terser.orgTerser - Minificador JavaScript
react.devDocs Oficials React - Introducció JSX