Embellecedor de código
Formatea o minifica JSON, JavaScript, HTML y CSS en tu navegador, con detección automática de lenguaje al pegar o soltar un archivo.
Resultado del formateo
Estado
Listo
- Caracteres
- -
- Líneas
- -
Cómo funciona
Un embellecedor de código vuelve a indentar el código fuente desordenado o minificado con saltos de línea y espaciado adecuados, mientras que un minificador elimina esos espacios en blanco para reducir el tamaño del archivo para producción, sin cambiar lo que hace el código.
- Pegar, soltar o escribir código
Al pegar o soltar un archivo también se intenta detectar el idioma automáticamente.
- Confirmar el idioma
JSON, JavaScript, HTML o CSS. Cámbialo manualmente si la detección es incorrecta.
- Formatear o minificar
Formatear vuelve a indentar en su lugar; Minificar comprime al mínimo los espacios en blanco. Copia o descarga el resultado.
Formatear frente a minificar
Formatear agrega espacios en blanco y saltos de línea para que el código sea fácil de leer y depurar para una persona. Minificar elimina espacios innecesarios, nuevas líneas y comentarios para producir un archivo más pequeño, que es lo que un sitio web normalmente entrega a los visitantes para reducir el tiempo de carga. Ambos mantienen la misma lógica; solo cambian los espacios en blanco y los comentarios.
Con qué es seguro usar el formateador de JavaScript
El formateador y minificador de JavaScript trata las cadenas con comillas simples, dobles y literales de plantilla con acento grave como texto opaco, por lo que una llave, un punto y coma o un carácter de comentario escrito dentro de una cadena, incluso dentro de una expresión de plantilla ${...}, se deja exactamente como lo escribiste en lugar de reformatearse como si fuera código. No analiza completamente JavaScript, por lo que aplica sangría estructural en lugar de una guía de estilo como Prettier o ESLint.
Todo permanece en tu dispositivo
El formateo y la minificación se ejecutan completamente en tu navegador, incluyendo cualquier archivo que arrastres o selecciones. Tu código, incluidos los secretos codificados, los puntos finales de API o la lógica empresarial, nunca sale de tu dispositivo, lo que hace que la herramienta sea segura para usar con código propietario, configuración interna o un paquete de producción minificado que intentas inspeccionar.
Preguntas frecuentes
¿Cómo formateo y embellezco código JavaScript o HTML desordenado en línea?
Pega o arrastra tu código, confirma el idioma detectado o elige uno del menú desplegable y haz clic en Formatear. La herramienta aplica la sangría adecuada para el idioma seleccionado: anidamiento de etiquetas para HTML, sangría de bloques para JavaScript y agrupación de propiedades para CSS. Los recuentos de caracteres y líneas se actualizan para mostrar el resultado.
¿Se envía mi código fuente a un servidor al usar este formateador de código?
No. Toda la lógica de formateo y minificación se ejecuta completamente en tu navegador, incluido el procesamiento de cualquier archivo que arrastres o selecciones. Tu código nunca sale de tu dispositivo, lo que hace que esta herramienta sea segura para usar con código propietario, configuraciones internas o paquetes de producción minificados que desees inspeccionar.
¿Esta herramienta maneja correctamente las plantillas literales de JavaScript con comillas invertidas?
Sí. Una plantilla literal delimitada por comillas invertidas, incluida cualquier interpolación `${...}` en su interior, se trata como una cadena opaca única. Las llaves o puntos y coma escritos dentro del texto de la plantilla se conservan exactamente como fueron ingresados en lugar de reformatearse como código, lo cual evita la corrupción del valor real de la cadena que podía ocurrir anteriormente.
¿Puedo usar esta herramienta para minificar JavaScript o CSS para producción?
La herramienta ofrece una minificación básica al eliminar espacios en blanco, saltos de línea y comentarios, lo que reduce el tamaño del archivo. No realiza tree-shaking, eliminación de código muerto, renombrado de variables ni otras optimizaciones avanzadas. Para una minificación de nivel de producción, utiliza una herramienta especializada como Terser para JavaScript, cssnano para CSS, o un empaquetador como webpack o Vite.
¿Cuál es la diferencia entre este embellecedor de código y la herramienta independiente formateador JSON?
El formateador de JSON está especializado solo en JSON y ofrece un mensaje de error de validación preciso con la posición del carácter. Este embellecedor de código maneja JSON como uno de cuatro lenguajes, junto con JavaScript, HTML y CSS. Si trabajas exclusivamente con JSON y deseas la validación más detallada, usa el formateador de JSON dedicado.