Cómo usar

Cómo usar Formateador de HTML / CSS / JS

Una utilidad que formatea y minimiza HTML, CSS y JavaScript en el navegador. Ayuda a leer mejor código roto o a preparar código más ligero antes de compartirlo. Cambie entre HTML, CSS y JavaScript y complete el formateo, la minimización, la revisión y la copia en un solo lugar.

Usar Formateador de HTML / CSS / JS

Miniatura de Formateador de HTML / CSS / JS

Pasos: 2 pasos
Guía: Con capturas
Contenido: Notas y FAQ

Casos de uso

Cuándo usarla

Hacer más legible un HTML roto
Reducir el tamaño de CSS o JavaScript
Preparar código frontend en un formato fácil de compartir
Mejorar la legibilidad del código copiado antes de reutilizarlo
Reducir el tamaño del archivo antes de desplegarlo en producción
Estandarizar el estilo del código antes de compartirlo

Capacidades

Qué puede hacer esta herramienta

Cambiar entre HTML, CSS y JavaScript
Ejecutar formateo y minimización
Copiar el resultado
Cambiar entre formateo y minimización con un clic
Copiar el resultado directamente al portapapeles
Admitir HTML, CSS y JavaScript en un solo lugar

Pasos

Se enumeran el orden de las operaciones y los puntos de comprobación para que pueda avanzar mientras mira la pantalla.

PASO 1

Elija el lenguaje de destino e introduzca código

Seleccione HTML, CSS o JavaScript en las pestañas y pegue en el área de entrada el código que quiera procesar.

Imagen recortada de la pantalla de entrada en Formateador de HTML / CSS / JS mostrando las pestañas de lenguaje, el área de entrada y la información de entrada

Imagen móvil recortada de la pantalla de entrada en Formateador de HTML / CSS / JS mostrando las pestañas de lenguaje, el área de entrada y la información de entrada

Puntos de comprobación

La pestaña del lenguaje de destino está seleccionada
El código que quiere procesar aparece en el área de entrada
El lenguaje seleccionado se muestra en la información de entrada

Acciones en esta pantalla

Cambiar el lenguaje de destino

Cambie entre las pestañas HTML, CSS y JavaScript para elegir el lenguaje que desea procesar.

Imagen recortada de las pestañas de lenguaje de destino en Formateador de HTML / CSS / JS

Imagen móvil recortada de las pestañas de lenguaje de destino en Formateador de HTML / CSS / JS

Introducir código

Pegue directamente en el área de entrada el código que quiere formatear o minimizar.

Imagen recortada del área de entrada de código en Formateador de HTML / CSS / JS

Imagen móvil recortada del área de entrada de código en Formateador de HTML / CSS / JS

PASO 2

Formatee o minimice y copie el resultado

Haga clic en "Formatear" o "Minimizar", revise el resultado y, si se ve correcto, pulse "Copiar resultado" para pegarlo donde lo necesite.

Imagen recortada de las áreas de entrada y resultado en Formateador de HTML / CSS / JS mostrando dónde revisar el resultado procesado

Imagen móvil recortada de las áreas de entrada y resultado en Formateador de HTML / CSS / JS mostrando dónde revisar el resultado procesado

Puntos de comprobación

El código procesado aparece en el área de resultado
La información de entrada muestra un estado procesable o un mensaje de error
Puede copiar el resultado y pegarlo en el siguiente destino

Acciones en esta pantalla

Formatear

Úselo cuando quiera organizar el código en una estructura fácil de leer.

Minimizar

Úselo cuando quiera reducir espacios y saltos de línea para obtener el código más corto posible.

Copiar el resultado

Copie directamente el código del área de resultado y péguelo en un editor o pantalla de administración.

Imagen recortada de la acción de copiar resultado en Formateador de HTML / CSS / JS

Imagen móvil recortada de la acción de copiar resultado en Formateador de HTML / CSS / JS

Notas

Los puntos importantes se agrupan junto con sus razones para que pueda decidir antes de usar la herramienta.

Qué conviene revisar

Elija el lenguaje de destino antes de procesar

El formateo y la minimización se ejecutan según las reglas del lenguaje seleccionado. Confirme primero si está trabajando con HTML, CSS o JavaScript.

Qué conviene revisar

Revise el resultado antes de minimizar

La minimización elimina muchos espacios y saltos de línea. Si la legibilidad importa, revise primero el resultado formateado y luego decida qué salida usar.

Nota

TypeScript, SCSS y lenguajes similares no están disponibles

Esta herramienta admite solo HTML, CSS y JavaScript. TypeScript, SCSS y JSX no están disponibles. Confirme el lenguaje de destino antes de usarla.

FAQ

Preguntas sobre Formateador de HTML / CSS / JS

Primero se resumen las preguntas que ayudan a decidir antes de usarla.

¿Qué lenguajes admite?

Admite HTML, CSS y JavaScript. TypeScript y SCSS no están incluidos.

¿El código se sube a algún sitio?

No. El formateo, la minimización y la copia se completan en el navegador.

¿Admite TypeScript o SCSS?

Esta página admite solo HTML, CSS y JavaScript. TypeScript, SCSS y JSX no están disponibles.

¿Puedo cambiar el tamaño de la sangría?

Por ahora no. La herramienta usa una configuración de sangría estándar. No se admite personalizar el ancho de sangría.

¿El código se envía a un servidor externo?

No. El formateo y la minimización se ejecutan íntegramente en el navegador.

¿El código seguirá funcionando correctamente después de minimizarlo?

La minimización elimina comentarios y espacios en blanco. Minimiza los caracteres que no afectan al comportamiento, pero se recomienda verificar que el código original funcione antes de procesarlo.

Siguientes guías