Formatear código minificado sin salir del navegador
Un CSS en una sola línea de 40 000 caracteres no se lee, ni se depura. Pégalo aquí y obtendrás código con sangría coherente. Este embellecedor de código ejecuta Prettier 3 en la propia página y entiende JavaScript (con JSX), JSON, CSS, SCSS, LESS y HTML.
Prettier no respeta tu maquetación. Analiza el código y lo imprime de nuevo con sus reglas de salto de línea. Por eso dos versiones con espacios distintos dan el mismo resultado.
Opciones que sí cuentan en cada lenguaje
Las opciones que no valen para un lenguaje se desactivan, y una nota bajo los ajustes dice cuáles. JSON ignora las comillas y las comas finales. CSS, SCSS y LESS ignoran punto y coma, comas finales y espacio en las llaves. En HTML, el marcado no tiene esos ajustes, pero los bloques de script y de estilo sí siguen tus elecciones.
Cómo usarlo, paso a paso
- Pega el código en el cuadro izquierdo, o pulsa Código de ejemplo para cargar uno del lenguaje elegido.
- Deja Lenguaje en «Detectar automáticamente» o elígelo tú. Debajo del cuadro verás el lenguaje detectado.
- Ajusta Sangría (2 espacios, 4 espacios o tabulación) y Ancho de línea (80, 100 o 120). Para JavaScript añade comillas, punto y coma, comas finales y espacio en las llaves.
- Mira el resultado a la derecha y el número de líneas antes y después. Pulsa Copiar o Descargar: el archivo se llama
formatted.js,.json,.css,.scss,.lesso.html.
Lo que Prettier cambia además de los espacios
Con los valores por defecto, Prettier cambia las comillas simples por dobles, añade los punto y coma que faltan y pone una coma tras el último elemento de una lista de varias líneas. Cada cosa se puede invertir en las opciones. Respeta los comentarios, pero no corrige errores: un fallo en la entrada sigue ahí en la salida.
Un detalle desconcierta en JSON y en objetos de JavaScript. Si la primera clave está en la misma línea que la llave de apertura y el objeto cabe en el ancho de línea, queda en una sola línea. Pon la primera clave en otra línea y el objeto se mantiene desplegado.
Detección automática, errores de sintaxis y el tope de 2 000 000
La detección es una apuesta rápida, no un análisis. Si el texto empieza por <, es HTML. Si empieza por llave o corchete y se lee como JSON, es JSON. Reglas como a { color: red; } sin function, const ni => cuentan como hoja de estilos, y las variables de SCSS o LESS señalan cada dialecto. Lo demás es JavaScript. Si la apuesta falla, elige el lenguaje a mano.
Si el código no se puede leer, verás la línea, la columna y la primera línea del mensaje de Prettier. Por encima de 2 000 000 de caracteres la herramienta lo rechaza. TypeScript, Vue y Markdown no están incluidos.
Qué pasa con el código que pegas
La primera vez, la página carga desde este sitio los archivos de Prettier que necesita. Después el formato se hace en local y tu código no se envía a ningún sitio. Puedes comprobarlo en la pestaña de red del navegador al pulsar un botón. La herramienta solo analiza e imprime el texto, nunca lo ejecuta. Copiar usa el portapapeles y Descargar guarda un archivo desde la página.