Formatejador de JavaScript

0 caràcters

Eina de formatat de codi JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON al costat del navegador, admet configuració detallada a l'estil Prettier, compressió-ofuscació Terser, editor CodeMirror integrat, vista prèvia en temps real, operacions amb dreceres, càrrega/descàrrega d'arxius.

Relacionats

Minificador JS

CSS Formatter

Formatador JSX

Generador de Codis QR i Codis de Barres

Convertidor cURL a codi

Ofuscació JS

Casos d'ús

  • Durant el desenvolupament frontend, enganxa codi JS de tercers que ha estat comprimit i embelleix-lo ràpidament per llegir-lo i depurar-lo
  • Abans de la revisió de codi de l'equip, formata el codi JavaScript/TypeScript de forma uniforme, elimina diferències d'estil com sagnat, cometes i punt i coma, centra't en la revisió de la lògica
  • En reprendre projectes llegats, formata amb un sol clic el codi JS antic amb disposició desordenada, comprèn ràpidament l'estructura del codi i els nivells lògics
  • Abans del desplegament de producció, utilitza Terser per comprimir i ofuscar el codi JavaScript, redueix la mida de l'arxiu i millora la velocitat de càrrega de la pàgina
  • Quan escrius demos JS/JSX en línia, el formatat en temps real manté el codi net i facilita compartir-lo amb col·legues o la comunitat
  • Quan aprens l'efecte de diverses opcions de configuració de Prettier, previsualitza el resultat del formatat instantàniament ajustant les opcions, comprèn la funció de paràmetres com tabWidth i trailingComa
  • En processar fragments de codi copiats de plataformes com Stack Overflow o GitHub, corregeix automàticament problemes de sagnat i salts de línia
  • Quan escrius fitxers de configuració JSON, formata automàticament el sagnat i els salts de línia, evita errors de parseig causats per comes o claudàtors incorrectes
  • Durant el desenvolupament de pàgines CSS/HTML, formata de forma integral el codi JS+CSS+HTML del mateix projecte, mantenint l'estil uniforme
  • Abans d'entrevistes o exàmens escrits, organitza ràpidament el codi JS per a problemes d'algorismes, amb un formatat estàndard millora l'aspecte visual del codi

Com usar-ho

  1. Obre la pàgina de l'eina de formatat de JavaScript, pots enganxar el codi directament a l'àrea de l'editor esquerra, o fes clic al botó de càrrega per seleccionar un fitxer local (suporta els formats .js/.ts/.jsx/.tsx/.css/.html/.json)
  2. Selecciona el tipus d'idioma corresponent: L'eina normalment el reconeix automàticament, si el reconeixement no és precís pots seleccionar manualment JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON al desplegable d'idioma
  3. Configura les opcions de formatat: Pots seleccionar un estil ràpid preconfigurat (default/modern/classic), o ajustar manualment les opcions de Prettier (amplada de sagnat, tabulació/espais, amplada de línia, punt i coma, cometes, coma final, parèntesis de fletxa)
  4. Si necessites comprimir el codi, canvia al mode de compressió, configura les opcions de compressió Terser (activar compress o no, mangle de noms de variable o no, compressió de variables de nivell superior o no), nivell d'optimització CSS, opcions de compressió HTML
  5. L'eina processa el codi en temps real, l'àrea de l'editor dret mostra immediatament el resultat formatat o comprimit, la barra d'estat inferior mostra estadístiques en temps real de nombre de caràcters, bytes i ràtio de compressió
  6. Utilitza les dreceres de teclat per augmentar l'eficiència: Ctrl+Shift+B activa el formatat, Ctrl+Shift+M commuta el mode de compressió, Ctrl+Shift+O obre fitxer, Ctrl+Shift+D descarrega el resultat, Ctrl+Shift+K neteja l'editor
  7. Un cop satisfet fes clic al botó de còpia per copiar el resultat al porta-retalls, o fes clic al botó de descàrrega per desar-lo com a fitxer local; també pots fer clic al botó de compartir per generar un enllaç URL amb codi i configuració per compartir amb altres

Característiques

  • Suport multi-idioma: Formatat simultani per a JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON, un total de 7 idiomes comuns en frontend, processament de codi frontend integral
  • Configuració detallada a l'estil Prettier: Admet opcions completes com tabWidth amplada de sagnat (2/4/8 espais), useTabs tabulació vs espais, printWidth amplada de línia, semi punt i coma, singleQuote cometes simples/dobles, trailingComa coma final, arrowParens parèntesis de funció fletxa
  • Funció de compressió de codi: Amb motor de compressió Terser integrat, admet opcions de compressió de nivell de producció com compress compressió de codi, mangle ofuscació de noms de variable, toplevel compressió de variables de nivell superior
  • Optimització específica de CSS: Proporciona configuració de nivell d'optimització CSS, admet processament especial com compressió CSS, eliminació de comentaris i eliminació d'espais
  • Opcions de compressió HTML: Admet la configuració de minificació HTML, pot col·lapsar espais en blanc, eliminar comentaris, eliminar cometes d'atributs, etc.
  • Processament en temps real: Formata i mostra la previsualització en temps real després d'introduir el codi, veu el resultat de la disposició sense necessitat de fer clic a cap botó
  • Editor CodeMirror: Amb editor CodeMirror professional integrat, proporciona experiència d'edició professional com ressaltat de sintaxi, visualització de números de línia, concordança de claudàtors, plegat de codi
  • Càrrega/descàrrega d'arxius: Admet la càrrega directa d'arxius locals .js/.ts/.jsx/.tsx/.css/.html/.json, després de formatar es pot descarregar l'arxiu processat amb un sol clic
  • Enllaç compartit: Desa el codi i la configuració mitjançant hash d'URL, genera un enllaç compartit per enviar a col·legues i reproduir l'escenari de formatat actual
  • Historial: Desa automàticament l'historial de formatat a localStorage, permet tornar a versions anteriors de codi i configuració en qualsevol moment
  • Dreceres de teclat: Admet operacions amb dreceres com Ctrl+Shift+B formatar, Ctrl+Shift+M comprimir, Ctrl+Shift+O obrir fitxer, Ctrl+Shift+D descarregar, Ctrl+Shift+K netejar
  • Preconfiguracions ràpides: Proporciona 3 preconfiguracions ràpides default, modern, classic, canvia d'estil comú amb un sol clic
  • Estadístiques de caràcters: Mostra en temps real la comparació del nombre de caràcters, nombre de bytes i ràtio de compressió entre el codi original i el processat
  • Codi d'exemple: Amb codi d'exemple per a diversos idiomes integrat, fes clic per carregar-lo immediatament i provar la funció

Preguntes freqients

La lògica del codi JavaScript canviarà després de formatar?

No. El formatat només ajusta el contingut relacionat amb la "disposició" com espais en blanc, sagnat, salts de línia, posició de claudàtors i estil de cometes, es basa en la conversió AST (arbre de sintaxi abstracta), l'estructura AST del codi abans i després del formatat és completament idèntica, la lògica d'execució és 100% igual. Mentre el codi mateix sigui sintàcticament correcte i es pugui analitzar normalment, el formatat no canviarà cap comportament d'execució, pots utilitzar-lo amb confiança. Però la compressió (mangle) encara que tampoc canvia la lògica, cal tenir cura amb escenaris especials com eval i exportació de variables globals, evita configuracions inadequades.

Què faig si el resultat del formatat de l'eina i el del meu VS Code/Prettier local són diferents?

La lògica de formatat d'aquesta eina s'ha mantingut tan coherent com sigui possible amb el comportament oficial de Prettier. Si els resultats són diferents, si us plau comprova els elements de configuració: tabWidth, useTabs, semi, singleQuote, trailingComa, arrowParens - comprova si aquestes opcions principals són completament iguals als dos costats. A més, tingues en compte les diferències de versions de Prettier - les configuracions per defecte de Prettier 2/3 tenen petites diferències (v3 per defecte trailingComa: all, v2 per defecte es5; des de v2 arrowParens per defecte always). Si el teu projecte local té un fitxer de configuració .prettierrc, ajusta les opcions corresponents a la pàgina web i els resultats seran iguals.

Es pot restaurar el codi comprimit? Es poden recuperar els noms de variable que han passat per mangle?

El codi formatejat és completament reversible - com que només canvia la disposició, tots els identificadors i la lògica es conserven íntegrament, formatant de nou tornarà. Però el codi comprimit: la part que només elimina espais i comentaris es pot reformatejar per restaurar la disposició, però el mangle (ofuscació de noms de variable) és irreversible - el nom de variable amb significat original userName es converteix en a, aquest procés és unidireccional i no es pot restaurar automàticament al nom original. Si necessites depurar codi comprimit en entorn de producció, hauries de configurar la generació de fitxers Source Map i mapejar de tornada a la posició del codi font mitjançant Source Map. Per tant, abans de comprimir assegura't de guardar el codi font original sense comprimir!

Quins navegadors són compatibles? Es pot utilitzar al mòbil?

Aquesta eina admet tots els navegadors moderns: Chrome, Firefox, Safari i Edge en les seves versions més recents es poden utilitzar normalment. El navegador IE no és compatible (ara mateix ningú utilitza IE per desenvolupar). El disseny responsive s'adapta a pantalles mòbils, però l'edició de codi en pantalles petites té una experiència mitjana, es recomana utilitzar en navegadors d'escriptori on la pantalla gran ofereix més eficiència. Tots els càlculs de formatat i compressió s'executen localment al navegador, no cal penjar el codi a cap servidor, el codi no sortirà del teu navegador, és segur i fiable.

Per què alguns codis no es poden formatar i mostren error d'anàlisi?

L'eina de formatat primer necessita analitzar el codi en AST per poder treballar, si el codi té errors sintàctics (claudàtors no coincidents, cadenes no tancades, paraules clau mal escrites, comes sobrants, etc.), l'analitzador no entén l'estructura del codi i dóna error. Si us plau comprova primer els errors sintàctics del propi codi: mira si hi ha missatges d'error a la consola, comprova si l'editor indica la posició de l'error amb línies ondulades vermelles, després de corregir els errors sintàctics es podrà formatar normalment. A més, assegura't de seleccionar el mode d'idioma correcte, no seleccionis JS normal per a codi JSX/TSX.

El meu codi es penjarà al servidor? El codi és segur?

No. Tot el formatat, compressió i ressaltat de sintaxi s'executa completament al teu navegador mitjançant JavaScript, el codi no s'enviarà a cap servidor, es processa completament al teu dispositiu. Pots provar-ho desconnectant la xarxa: després de desconnectar la xarxa l'eina encara funciona normalment. La funció d'enllaç compartit codifica el codi i la configuració al hash de l'URL, fer clic a compartir només crea una URL, el codi no es penja - però si envies l'enllaç a algú altre, quan obrin l'enllaç podran veure el teu codi, així que no comparteixis codi sensible mitjançant enllaços.

Es pot formatar components de fitxer únic de Vue (fitxers .vue)? I Svelte?

Actualment el suport multi-idioma d'aquesta eina inclou JS/TS/JSX/TSX/CSS/HTML/JSON, els fitxers individuals <template>/<script>/<style> de Vue (SFC) i els components Svelte no són compatibles amb el formatat directe complet, però pots copiar per separat la part script (JS/TS), la part style (CSS) i la part template (HTML), seleccionant l'idioma corresponent per formatar per separat. En el futur es considerarà afegir suport de formatat per a Vue/Svelte SFC.

Com establir una especificació de formatat unificada per a l'equip?

Per a l'especificació unificada d'equip, es recomana la combinació en tres nivells: ①Col·loca .editorconfig al directori arrel del projecte, unifica la configuració bàsica de l'editor (sagnat, salts de línia, codificació); ②Utilitza Prettier i col·loca el fitxer de configuració .prettierrc al projecte, tothom i CI formaten amb aquesta configuració, aquesta eina també pot seleccionar opcions coincidents; ③Utilitza ESLint + eslint-config-prettier per desactivar les regles d'estil d'ESLint i només comprovar la qualitat del codi. Configura l'editor per formatar automàticament en desar (instal·la l'extensió Prettier a VS Code, estableix editor.formatOnSave: true), afegeix un pas de lint a CI per comprovar el format, assegura que el codi enviat compleix l'especificació.

Quins avantatges té la coma final (trailingComa)? S'ha d'activar?

Es recomana fermament activar la coma final (com a mínim nivell es5, es recomana nivell all). Els avantatges de la coma final són: ①Git diff més net: en afegir un element final no cal afegir una coma a la línia anterior, només hi ha el diff de la nova línia; ②Més convenient en reordenar elements, no cal gestionar problemes de coma final; ③Els navegadors moderns i Node.js admeten completament la coma final, l'IE antic no l'admet però ara ja no cal considerar IE. L'únic desavantatge és una coma més, però en comparació amb la conveniència que aporta val completament la pena. Prettier v3 té per defecte all.

En comprimir s'ha d'activar el mangle? Quina diferència hi ha entre compress i mangle?

Per a compressió en entorns de producció es recomana activar tant compress com mangle, són dues opcions de compressió independents: compress és l'optimització de codi (plegat de constants, eliminació de codi mort, simplificació d¿expressions, etc.), només modifica l'estructura del codi quan es pot simplificar i no canvia els noms de variable; mangle és escurçar els noms de variables locals, convertint noms llargs en un sol caràcter, aquesta és una de les fonts més grans de reducció de mida. Mentre el teu codi no es cridi des de l'exterior directament com a biblioteca, o no accedeixi dinàmicament a noms de variable amb eval, mangle és segur i pot reduir la mida significativament. Si una biblioteca de codi obert necessita preservar els noms d'API, pots configurar mangle.reserved per preservar els noms exportats.

Per què en formatar JSON alguns caràcters s'escapen automàticament?

L'especificació JSON té requisits sintàctics estrictes: les cadenes han de ser amb cometes dobles, no pot haver-hi coma final, els caràcters especials han d'anar escapats (salt de línia→\n, cometes→\", barra invertida→\\, Tab→\t, etc.). Si la cadena JSON conté caràcters especials sense escapament, s'escaparan automàticament segons l'especificació JSON durant el formatat, aquest és el comportament correcte. Tingues en compte: JSON no és JavaScript, no es poden escriure comentaris en JSON, no es poden utilitzar cometes simples, no pot haver-hi undefined, tot això provocarà errors en l'anàlisi JSON.

Com mantenir sempre els parèntesis als paràmetres de funció fletxa? O no vull parèntesis?

Ajusta l'opció arrowParens: always és posar sempre parèntesis ((x) => x), aquest és el valor per defecte de Prettier v2+, l'avantatge és que en afegir/eliminar paràmetres no cal afegir/eliminar parèntesis, el diff és més net; avoid és ometre parèntesis quan hi ha un sol paràmetre (x => x), el codi és més concís. Tria segons l'estil de l'equip, ambdós estils no tenen un correcte o incorrecte, només cal que siguin uniformes. Nota: Els paràmetres amb anotació de tipus, paràmetres per defecte i paràmetres de desestructuració tindran parèntesis en qualsevol configuració.

El formatat pot corregir automàticament els problemes d'estil que assenyala ESLint?

Aquesta eina fa formatat a l'estil Prettier, només pot corregir problemes d'estil que Prettier gestiona (sagnat, cometes, punt i coma, coma final, amplada de línia, espais, etc.). Els problemes de qualitat de codi que assenyala ESLint (com variables no utilitzades, return faltant, problemes de ===) són problemes lògics que l'eina de formatat no pot corregir automàticament i cal modificar manualment. Si el teu ESLint té configurat eslint-config-prettier, després de formatar amb Prettier, ESLint no donarà errors relacionats amb l'estil, els problemes de qualitat restants cal corregir manualment.

Quina mida màxima de fitxer de codi es suporta? Formatar fitxers grans provocarà retard?

Com que el formatat s'executa localment al navegador, la mida de fitxer suportada depèn del rendiment del dispositiu, normalment fitxers JS de desenes de KB a uns quants MB es poden processar normalment, el fitxer JS únic d'un projecte comú és completament suficient. Si es tracta d'un fitxer JS empaquetat molt gran (desenes de MB) pot haver-hi retard o memòria insuficient, per a fitxers tan grans es recomana processar localment amb la línia d'ordres Node.js+Prettier/Terser. En el desenvolupament diari la mida de fitxers font individuals sol estar dins del rang de processament.

Per què en prémer la drecera Ctrl+Shift+B a Chrome s'obre el gestor de marcadors?

Això és un conflicte de dreceres per defecte del navegador Chrome: Ctrl+Shift+B és la drecera de Chrome per mostrar/amagar la barra de marcadors, la prioritat de les dreceres del navegador és superior a les dreceres JS de la pàgina web, per tant és interceptada per Chrome. Solució: ①Fes clic al botó de formatar per operar; ②Si ets usuari de Mac, Cmd+Shift+B no entrarà en conflicte amb Chrome; ③Pots modificar les dreceres del navegador a la configuració de Chrome; ④Pots donar focus primer dins de l'editor, en algunes situacions el focus de l'editor pot capturar la drecera. Si hi ha conflictes de dreceres en altres navegadors, pots utilitzar els botons per operar.

Solució de problemes

En formatar mostra "Error d'anàlisi sintàctica", no es pot formatar

El codi mateix té errors sintàctics: claudàtors no coincidents, cadenes no tancades, paraules clau faltants, comes sobrants, etc., els errors sintàctics provoquen que el parseig AST falli i no es pugui formatar, si us plau corregeix primer l'error sintàctic Selecció incorrecta del mode d'idioma: per exemple, codi JSX/TSX seleccionat com a JavaScript, la sintaxi genèrica es malinterpreta com a etiqueta JSX o viceversa, si us plau selecciona manualment el tipus d'idioma correcte Conté sintaxi experimental: el codi utilitza propostes sintàctiques de JavaScript massa noves que encara no són estàndard (com decoradors, operador Pipeline), l'analitzador no les admet El fitxer té capçalera BOM: els tres bytes UTF-8 BOM (EF BB BF) a l'inici, alguns analitzadors poden no gestionar-los, prova de desar com a UTF-8 sense BOM Barreja de codi d'altres idiomes: per exemple, llenguatges de plantilla incrustats en HTML (EJS, Handlebars, directives de plantilla Vue) no són JS/HTML purs, l'analitzador no els pot reconèixer Hi ha comentaris de bloc no tancats al codi: /* sense */ corresponent, el comentari no tancat fa que tot el codi posterior es tracti com a comentari Ambigüitat d'expressió regex: alguns llocs que semblen operadors de divisió són en realitat literals regex, l'analitzador ho jutja malament, pots afegir un punt i coma abans del regex per eliminar l'ambigüitat

Error en comprimir (Minify), no es pot comprimir

Error sintàctic al codi: Igual que el formatat, la compressió també es basa en AST, el codi ha de ser sintàcticament correcte per poder-se comprimir, corregeix primer l'error sintàctic S'utilitza import/export d'ES Module però no s'ha marcat correctament el tipus de mòdul, o la configuració de compressió no coincideix amb el tipus de mòdul Problemes en fer mangle de noms de propietat: Si s'activa el mangle de noms de propietat (per defecte desactivat), l'accés dinàmic a propietats obj['key'] farà que no es trobi la propietat, no activis el mangle de propietats sense precaució El codi conté eval() o la instrucció with: Quan Terser troba eval/with el mangle pot fallar, perquè eval pot accedir dinàmicament a noms de variables en l'àmbit, evita utilitzar eval en codi de producció Error de configuració de noms reservats: Si configures mangle.reserved però amb errors d'ortografia o ometent noms que s'han de reservar (com jQuery, $ i altres biblioteques globals), pot causar errors en temps d'execució Problemes de configuració de compressió toplevel: Si el codi s'executa en l'àmbit global en lloc d'estar empaquetat en un IIFE/mòdul, activar compress.toplevel: true pot trencar les referències a variables globals La configuració de versió del navegador objectiu és massa antiga: Terser pot utilitzar sintaxi no suportada pel navegador objectiu en comprimir, pots configurar la versió ecma per especificar la versió sintàctica JS de sortida

En formatar xinès/comentaris en xinès es mostren caràcters malformats

La codificació del fitxer no és UTF-8: El fitxer local carregat té codificació xinesa com GBK/GB2312, l'eina analitza per defecte en UTF-8 causant caràcters malformats, utilitza l'editor per tornar a desar el fitxer en codificació UTF-8 i torna a carregar-lo La codificació de la pàgina del navegador s'ha modificat accidentalment: Encara que els navegadors actuals són UTF-8 per defecte, alguns navegadors antics o configuracions especials poden tenir codificació incorrecta, pots comprovar la configuració de codificació de la pàgina al menú del navegador i establir-la a UTF-8 El fitxer té capçalera UTF-8 BOM: Encara que el BOM normalment no causa caràcters malformats, alguns analitzadors gestionen el BOM anormalment, pots utilitzar l'editor per eliminar el BOM i desar com a UTF-8 sense BOM Problemes de conversió de codificació en copiar i enganxar: En copiar codi de programari antic (com el Bloc de notes versió antiga, Word), els caràcters especials (com cometes xineses, espais d'amplada completa) poden convertir-se incorrectament, intenta copiar des d'editors moderns com VS Code Problemes de font: Alguns fonts monoespaiats no admeten bé el xinès i causen visualització anòmala, això no és un problema de codificació, només un problema de font de visualització, canvia a una font monoespaiada que admeti xinès Caràcters Unicode especials: El codi conté caràcters especials invisibles com emoji, espais d'amplada zero, caràcters de control, poden causar visualització anòmala o errors de format, pots activar la visualització de caràcters invisibles a l'editor per comprovar-ho Problemes de compressió gzip o proxy: Si després del desplegament apareixen caràcters malformats, comprova que el servidor ha establert correctament la capçalera de resposta Content-Type: application/javascript; charset=utf-8

El formatat de codi JSX/TSX falla o dóna error d'anàlisi

El mode d'idioma s'ha seleccionat com a JavaScript en lloc de JSX/TSX: L'analitzador JS normal no reconeix la sintaxi <etiqueta>, interpretarà les etiquetes JSX com a operadors de comparació i donarà error, si us plau selecciona manualment l'idioma JSX o TSX Ambigüitat de sintaxi genèrica TSX: El paràmetre genèric <T> en TSX pot ser malinterpretat com a etiqueta JSX, com const f = <T>(x: T) => x, pots afegir una coma després de <T> com <T,> per eliminar l'ambigüitat (aquesta és la notació comuna de TSX) Les etiquetes JSX no estan tancades: JSX requereix que totes les etiquetes estiguin correctament tancades, les etiquetes autotancades han de tenir />, a diferència d'HTML, <img> s'ha d'escriure <img/> Problemes de parèntesis d'expressions JS en JSX: Les expressions JS dins de {} s'han de tancar correctament, si {obj.prop} no es tanca amb } provocarà que l'anàlisi posterior es desordeni Problemes de sintaxi curta de Fragment: L'etiqueta buida <></> requereix suport de React 16+ i ha d'estar correctament tancada; si utilitzes <Fragment> cal importar-la correctament Problemes de cometes en valors d'atribut JSX: Els valors d'atribut JSX si són cadenes han de portar cometes (cometes dobles), si són expressions s'usa {}, no barregis L'extensió de fitxer TSX és .ts en lloc de .tsx: L'analitzador TypeScript només activa l'anàlisi JSX amb l'extensió .tsx, si escrius JSX amb extensió .ts donarà error, si us plau utilitza l'extensió correcta

Després de formatar el sagnat és incorrecte, no coincideix amb l'esperat

La configuració de tabWidth és incorrecta: Comprova si l'amplada de sagnat configurada és 2 o 4, els equips solen utilitzar 2 espais, si esperes 4 espais cal ajustar manualment l'opció tabWidth La configuració d'useTabs és incorrecta: Si l'equip utilitza sagnat de tabulació però has configurat espais, o viceversa, comprova si l'opció useTabs és correcta El codi mateix té errors sintàctics: Els errors sintàctics causen que l'estructura AST sigui anòmala, en formatar el sagnat es desordena, corregeix primer els errors sintàctics indicats per les línies ondulades vermelles Barreja de tabulacions i espais: En el codi original algunes parts tenen sagnat de tabulació i d'altres espais, el formatat unificarà a l'estil configurat, però si el codi original és massa desordenat pot caler formatar diverses vegades El valor de printWidth és massa petit: Si l'amplada de línia s'estableix massa petita (com 40), el codi farà salts de línia freqüents fent que el sagnat sembli desordenat, establir a 80 o 100 és més adequat La configuració d'opcions de disposició com bracketSameLine/arrowParens no coincideix amb l'esperat: L'estil de posició de claudàtors, parèntesis de funció fletxa, etc. està determinat per la configuració, no és un problema de sagnat, ajusta les opcions corresponents La configuració d'EditorConfig entra en conflicte amb l'editor local: Si l'editor local utilitza .editorconfig per establir el sagnat automàticament i difereix de les opcions configurades a la pàgina web, els resultats de formatat seran inconsistents, unifica la configuració

Les dreceres de teclat no funcionen, prémer no fa res

El focus no és a l'editor: Les dreceres només són efectives quan l'editor rep el focus, si el focus és a un botó, camp d'entrada o un altre lloc de la pàgina les dreceres no s'activen, primer fes clic a l'àrea de l'editor per donar-li el focus Conflicte de dreceres del navegador: Algunes dreceres (com Ctrl+Shift+B a Chrome obre la barra de marcadors, Ctrl+Shift+O a Firefox obre l'historial) són capturades pel navegador, pots fer clic als botons per operar, o els usuaris de Mac provar amb Cmd en lloc de Ctrl Problemes de mètode d'entrada: En estat de mètode d'entrada xinès algunes dreceres poden ser interceptades, canvia al mètode d'entrada anglès i torna a provar la drecera Altres extensions/plugins capturen la drecera: Extensions de dreceres instal·lades al navegador, scripts Tampermonkey i plugins de proxy poden capturar dreceres, prova d'obrir la pàgina en mode incògnit Conflicte de dreceres del sistema: Les dreceres globals del sistema operatiu o programari en execució (com programari de captures, mètodes d'entrada, IDE) han capturat la combinació de tecles corresponent, pots modificar les dreceres d'altres programes o utilitzar els botons d'aquesta eina Diferències de teclat Mac/Windows: Tingues en compte que Mac utilitza la tecla Cmd (⌘), Windows/Linux utilitzen la tecla Ctrl, no ho barregis; Option a Mac correspon a Alt a Windows Limitacions de seguretat del navegador: Algunes dreceres relacionades amb l'accés a fitxers poden estar limitades per la política de seguretat del navegador i no es poden simular completament via JS, si cal fes clic directament al botó corresponent per operar

Glossari

Prettier
L'eina de formatat de codi frontend més popular actualment, adopta la filosofia de disseny Opinionated, admet múltiples idiomes com JS/TS/CSS/HTML/Markdown, força la unificació de l'estil de codi i posa fi als debats d'estil en equip.
Terser
Eina moderna de compressió de JavaScript, és una branca d'UglifyJS compatible amb ES6+, admet compressió-ofuscació de sintaxi ES6+, és el compressor per defecte d'eines de build modernes com Webpack, Rollup i Vite.
UglifyJS
Eina clàssica de compressió de JavaScript, antecessora de Terser, però només admet sintaxi ES5 i anterior, no admet noves característiques ES6+, actualment els projectes nous solen utilitzar Terser en substitució.
AST (Abstract Syntax Tree)
Arbre de sintaxi abstracta, representació en forma d'arbre de l'estructura sintàctica del codi font, cada node representa una estructura sintàctica del codi. Eines com Babel, Prettier, Terser i ESLint s'implementen totes sobre AST.
ESLint
L'eina de comprovació de codi (Linter) més popular de l'ecosistema JavaScript/TypeScript, s'utilitza per detectar problemes de qualitat del codi i unificar l'estil de codi, es pot utilitzar conjuntament amb Prettier.
EditorConfig
Fitxer de configuració per unificar l'estil de codi entre editors/IDE, defineix configuracions bàsiques com estil de sagnat, mida de sagnat, tipus de salt de línia, codificació de fitxer i nova línia al final, perquè diferents editors tinguin comportament consistent en obrir el mateix projecte.
CodeMirror
Component d'editor de codi basat en navegador, ofereix funcions d'edició professional com ressaltat de sintaxi, números de línia, concordança de claudàtors, plegat de codi i multicursor, és una de les opcions principals per a editors de codi web.
minify (comprimir)
Procés de minimitzar la mida del codi sense canviar-ne la lògica, mitjançant l'eliminació d'espais en blanc, comentaris, escurçament de noms de variable i optimització de codi, utilitzat per millorar la velocitat de càrrega en entorns de producció.
mangle (ofuscar/destruir)
Pas en el procés de compressió per escurçar noms de variable, noms de funció i noms de paràmetre a un sol caràcter, redueix significativament la mida del codi alhora que el fa més difícil de llegir, també anomenat ofuscació de noms de variable.
beautify (embellir)
És a dir, formatat de codi, reorganitza el codi comprimit o desordenat amb sagnat, salts de línia i addició d'espais, millora la llegibilitat, el contrari de minify.
trailing comma (coma final)
La coma després de l'últim element d'un objecte, array o paràmetre de funció, ajuda a que Git diff sigui més net en afegir elements, compatible amb entorns ES5+.
arrow parens (parèntesis de fletxa)
Indica si el paràmetre d'una funció fletxa d'un sol paràmetre ha d'anar envoltat de parèntesis, com x => x (sense parèntesis) vs (x) => x (amb parèntesis).
printWidth (amplada de línia)
En formatar, cada línia fa un salt automàtic quan supera cert nombre de caràcters, el valor per defecte de Prettier és 80 caràcters, l'equip pot ajustar-lo a 100 o 120 segons la mida del monitor.
semicolons (punt i coma)
Indica si s'han d'afegir punt i coma al final de les sentències JavaScript, JS té el mecanisme ASI d'inserció automàtica de punt i coma, però en la majoria d'escenaris es recomana afegir punt i coma per evitar errors.
single quote (cometes simples)
Indica si s'utilitzen cometes simples o dobles per a les cadenes, en JS la funcionalitat és completament equivalent, només és preferència d'estil, l'especificació JSON obliga a cometes dobles.
double quote (cometes dobles)
Embolcallar cadenes amb cometes dobles, és l'estil per defecte de molts idiomes i també el format de cadena requerit per l'especificació JSON.
tab width (amplada de sagnat)
Nombre d'espais corresponents a cada nivell de sagnat, la comunitat frontend sol utilitzar 2 espais, els idiomes de backend solen utilitzar 4 espais.
BOM (Byte Order Mark)
Marca d'ordre de bytes, els tres bytes EF BB BF que poden aparèixer a l'inici d'un fitxer en codificació UTF-8, s'utilitzen per marcar la codificació, en alguns escenaris poden causar errors de parseig de JS.
UTF-8
Unicode Transformation Format 8-bit, actualment és la codificació estàndard de fitxers per a projectes Web i frontend, admet tots els caràcters Unicode i és la codificació recomanada per defecte.
source map (mapa font)
Fitxer que mapeja el codi comprimit/transpilat de tornada a la posició del codi font original, s'utilitza per a depuració en entorns de producció, permet localitzar el número de línia font quan el codi comprimit dona errors.

Taula d'opcions de configuració habituals de Prettier

Optimitzacions habituals i impacte de la compressió/ofuscació JS

Taula de referència de dreceres de teclat de l'editor (Windows/Linux / Mac)