Formateador de HTML, CSS y JavaScript

¿Qué es el formateador de HTML, CSS y JavaScript?

El formateador vuelve a sangrar y ordena HTML, CSS y JavaScript para que sean legibles: sangría coherente, una declaración por línea, etiquetas de cierre alineadas, líneas largas divididas con criterio. Pega código minificado de un sitio en vivo, la salida de un plugin o el archivo de un compañero con tabuladores y espacios mezclados, elige el lenguaje y recibe una versión ordenada. También puede hacer el camino inverso y minificar. Todo se ejecuta en el navegador con las bibliotecas js-beautify, que la página carga desde una red de distribución de contenido; tu código no se sube.

Cómo se usa

1. Elige HTML, CSS o JavaScript, o deja activada la detección automática.
2. Pega tu código.
3. Elige la sangría: 2 espacios, 4 espacios o tabuladores.
4. Haz clic en Formatear. O haz clic en Minificar para la versión compacta.
5. Copia o descarga el resultado, o devuélvelo al cuadro de entrada con «Usar como entrada».

Funciones

• Tres lenguajes con reglas propias de cada uno: HTML mantiene los elementos en línea en línea, CSS ordena llaves y puntos y coma, JavaScript respeta cadenas, expresiones regulares y plantillas literales.
• Control de sangría para ajustarse al estilo de tu proyecto.
• Formatear y minificar en un mismo lugar.
• Usar como entrada devuelve el resultado al cuadro de entrada, para que puedas formatear y luego minificar, o al revés.
• Privado: tu código no se sube. La página necesita conexión para cargar las bibliotecas de formateo.

Por qué importa formatear

El código legible se depura más rápido y se cambia con más seguridad. Un div de cierre ausente salta a la vista cuando la sangría deja de coincidir y es invisible cuando todo está en una línea. Un estilo coherente también mantiene pequeños los diffs en el control de versiones, para que quien revisa vea el cambio real y no ruido de espacios. Para equipos, la solución es un formateador que se ejecute solo al guardar o al confirmar; esta herramienta es para los casos puntuales: inspeccionar código de producción minificado, limpiar código pegado desde un CMS u ordenar un fragmento antes de compartirlo. Cuándo usar cada cosa y cómo configurar Prettier o un formateador del editor para casi no tener que hacerlo a mano está en cómo formatear HTML, CSS y JavaScript que no escribiste tú.

Qué revisar después de formatear

• Los scripts y estilos en línea dentro de HTML también se formatean; confirma que nada dependía del espacio exacto (los bloques pre se conservan).
• El formateador no añade los puntos y coma que falten, así que el JavaScript que dependía de la inserción automática de punto y coma sigue comportándose igual; confirma que la salida funciona.
• La salida minificada es funcionalmente idéntica; solo se eliminan espacios y comentarios.

Herramientas relacionadas

Reduce archivos para producción con el minificador de código, valida y da formato a respuestas de API con el formateador de JSON y prueba patrones con el probador de regex.

Preguntas frecuentes

¿Formatear cambia el comportamiento del código?

No. Solo cambian los espacios, los saltos de línea y la sangría.

¿Puede formatear TypeScript, SCSS o JSX?

Solo JavaScript y CSS puros. Los tipos de TypeScript y las etiquetas JSX pueden formatearse de forma extraña; usa para ellos el formateador de tu editor.

¿Hay un límite de tamaño?

Ninguno fijo. Los archivos muy grandes tardan más y dependen de la memoria de tu dispositivo.

¿Se guarda mi código?

No. El procesamiento se hace en el navegador y no se envía nada a un servidor.