Formateador y embellecedor de código
Pega código o abre un archivo, pulsa Formatear y obtén un resultado ordenado. El lenguaje se detecta solo: JavaScript, TypeScript, CSS, HTML, JSON, XML, SQL, YAML, Markdown y GraphQL, todo en tu navegador.
Todo se ejecuta en tu navegador: tu código nunca se sube a ningún servidor.
El ancho de línea se aplica a JavaScript, TypeScript, CSS, SCSS, LESS, HTML, YAML, Markdown y GraphQL. Formatear nunca comprueba la lógica, los tipos ni las reglas de estilo.
El lenguaje se detecta en cuanto añades código.
Suelta aquí un archivo de código (hasta 5 MB), pega texto o carga un ejemplo. Pulsa Ctrl+Intro para formatear.
Formatea y embellece código en tu navegador
El código copiado de un paquete minificado, un registro, un mensaje de chat o un proyecto antiguo es difícil de leer y todavía más de revisar. Este formateador de código lo devuelve a un texto ordenado y con sangría uniforme con un solo clic. Pega el código, pulsa Formatear (o Ctrl+Intro) y el resultado aparece junto al original, con números de línea en ambos lados para que puedas compararlos de un vistazo.
La herramienta admite los formatos con los que más se topan los desarrolladores: JavaScript con JSX, TypeScript con TSX, CSS, SCSS y LESS, HTML con sus scripts y estilos incrustados, JSON, XML, SQL en trece dialectos, YAML, Markdown y GraphQL. Por defecto el lenguaje se detecta solo: por el nombre del archivo si lo abres, y por el propio texto si lo pegas. Si el texto podría ser varias cosas, la herramienta te lo dice y te propone los candidatos probables, en lugar de elegir en silencio un analizador equivocado.
El estilo lo controlas tú. Elige dos espacios, cuatro espacios o tabulaciones, y un ancho de línea de 80, 100 o 120 caracteres para los lenguajes que se formatean con Prettier. Para SQL puedes escoger el dialecto, como PostgreSQL, MySQL, SQL Server o BigQuery. Para JSON hay además un botón Minificar que elimina todo el espacio en blanco sin tocar números, cadenas ni el orden de las claves. Los ajustes se recuerdan en tu navegador y, si prefieres ver el resultado mientras escribes, puedes activar el formateo automático.
Cuando algo falla, el mensaje es breve y preciso: el lenguaje, lo que esperaba el analizador, y la línea y la columna. Tu entrada nunca se sobrescribe y un botón lleva el cursor hasta el problema. El botón Deshacer recupera lo que hayas borrado o reemplazado por error, y puedes descargar el resultado con la extensión adecuada para su lenguaje o abrir ambas versiones lado a lado en el Comparador de textos para ver exactamente qué ha cambiado.
Todo ocurre en tu dispositivo. Los motores de formateo, que son pesados, solo se descargan para el lenguaje que realmente formateas y se ejecutan en un worker en segundo plano, de modo que un archivo grande no bloquea la página. Ten en cuenta los límites: se pueden abrir archivos de hasta 5 MB, las entradas de más de 300 000 caracteres pueden tardar unos segundos y las de más de dos millones se rechazan. Formatear no es un linter ni un compilador, así que no encontrará errores de lógica, y es posible que se rechace alguna sintaxis poco habitual.
Preguntas frecuentes
¿Se sube mi código a algún sitio?
No. El código lo formatean bibliotecas que se ejecutan dentro de tu navegador, en un hilo en segundo plano. No se envía nada a ningún servidor. Solo tus ajustes y un borrador opcional se guardan en el almacenamiento local de este navegador, y puedes vaciar el cuadro cuando quieras.
¿Cambiará el formato lo que hace mi código?
El formateador solo cambia la presentación: sangría, saltos de línea y espacios. También puede unificar las comillas, añadir o quitar paréntesis opcionales y poner los puntos y comas de forma coherente, pero el significado sigue siendo el mismo. No comprueba la lógica, los tipos ni las reglas de lint: si el código es correcto, el resultado también lo es, y si es incorrecto, seguirá siéndolo.
¿Cómo se detecta el lenguaje?
Si abres un archivo, decide su extensión. Si no, la herramienta analiza el propio texto: etiquetas, llaves, palabras clave y signos de puntuación típicos. Cuando dos lenguajes se parecen, como CSS y SCSS o JavaScript y TypeScript, te pregunta en vez de adivinar. Siempre puedes elegir un lenguaje a mano en la lista Lenguaje.
¿Qué pasa si mi código tiene un error de sintaxis?
La salida queda vacía, tu entrada se mantiene exactamente igual y recibes un mensaje breve con la línea y la columna. Usa el botón Ver en la entrada para ir a ese punto, corrígelo y vuelve a pulsar Formatear.
¿Puedo minificar código aquí?
Solo JSON, donde quitar los espacios en blanco siempre es seguro. Minificar bien JavaScript o CSS requiere un minificador específico, porque renombrar variables o fusionar reglas puede alterar el comportamiento, así que esta herramienta no lo intenta. Para una comprobación más a fondo de la sintaxis SQL, usa el Formateador y validador de SQL.