Formateador HTML, CSS y JS (Prettier, Embellecer, Minificar)

Lleva fragmentos bien formateados a documentos, publicaciones de blog y solicitudes de extracción con un formateador en el navegador impulsado por Prettier.

Embellece fragmentos de front-end sin instalar herramientas CLI.

Empieza a formatear tu código al instante sin instalar herramientas CLI pesadas o extensiones de VS Code. Este formateador de código en línea utiliza el motor oficial **Prettier** directamente en tu navegador para embellecer HTML, CSS y JavaScript. Ya sea que estés limpiando un fragmento desordenado para una publicación de blog, normalizando código para una solicitud de extracción (PR), o simplemente aprendiendo la indentación estándar, esta herramienta ofrece un formateo consistente y opinado en milisegundos. Pega tu código minificado o feo, selecciona el idioma y obtén un resultado limpio y legible listo para copiar.

Como se mantiene esta pagina

  • Los pasos y la copia se comprueban contra el comportamiento actual de la herramienta.
  • Los limites del navegador, tamano de archivo o compatibilidad se documentan cuando importan.
  • Salvo que se indique lo contrario, los archivos y textos se procesan localmente en el navegador.

Código limpio al instante

Formatear código manualmente es una pérdida de tiempo. Ya sea que estés lidiando con "código espagueti" heredado o acabes de terminar un prototipo rápido, estandarizar tu indentación y espaciado hace que tu código sea más fácil de leer y mantener.

Impulsado por Prettier
Utilizamos el mismo motor de formateo (Prettier) en el que confían millones de desarrolladores y empresas líderes como Facebook/Meta y Airbnb. Esto significa que obtienes un estilo consistente y opinado que sigue las mejores prácticas de la industria automáticamente.

¿Por qué usar un formateador en línea?

  • Sin configuración: ¿No quieres configurar un archivo .prettierrc o instalar módulos de Node.js? Simplemente pega y listo.
  • Compartible: Limpia fragmentos de código antes de enviarlos a Slack o Stack Overflow.
  • Proyectos heredados: Formatea rápidamente archivos en proyectos antiguos que no tienen un linter configurado.

Funciones clave

  • Estilo Prettier Estandarizado: Usamos los mismos valores predeterminados que el motor estándar de la industria Prettier, asegurando que tu código se vea profesional y coincida automáticamente con las guías de estilo modernas.
  • Formateo con Privacidad Primero: La lógica de tu código propietario nunca sale de tu máquina. El motor de formateo se carga una vez y se ejecuta 100% localmente, seguro para el trabajo confidencial del cliente.
  • Reversión de Minificación Instantánea: ¿Convertiste un `style.min.css` o `bundle.js` minificado de nuevo en código legible? Simplemente pégalo aquí para restaurar la indentación y los saltos de línea al instante.

Preguntas frecuentes

¿Esto soporta React (JSX)?

Actualmente, soportamos JS estándar, HTML y CSS. Para JSX/React, estamos trabajando en agregar soporte de Babel pronto.

¿Puedo personalizar la indentación (tabulaciones vs espacios)?

Para mantener las cosas simples y opinadas (como Prettier), usamos por defecto 2 espacios, que es el estándar para la mayoría de los proyectos web modernos.

¿Por qué mi código se ve diferente después de formatear?

Prettier es "opinado", lo que significa que impone un estilo consistente (como longitud máxima de línea y ajuste) para terminar los debates sobre el estilo del código.

¿Es esto lo mismo que ejecutar Prettier localmente?

Sí. Envuelve Prettier independiente con los analizadores oficiales de Babel, HTML y PostCSS para que la salida coincida con tus compilaciones.

¿El formateo ocurre en línea?

Todo sucede en la pestaña de tu navegador. No se envían fragmentos a un servidor ni se almacenan en ningún lugar.

Explorar el directorio completo