Formateador de código

Qué hace

El formateador de código toma código apretado, minificado o con sangría irregular y lo devuelve con un estilo limpio y coherente. Admite los lenguajes más habituales en el desarrollo web: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML y GraphQL.

Por dentro ejecuta Prettier, el formateador que usan millones de proyectos, así que el resultado queda exactamente igual que el código formateado en VS Code o con un hook de pre-commit. El parser de cada lenguaje se carga solo cuando lo eliges, lo que mantiene la página rápida.

Cómo se usa

1. Elige el Lenguaje de tu código.
2. Pega el código o abre un archivo.
3. Elige un estilo de Sangría (2 espacios, 4 espacios o tabuladores) y un Ancho de línea. Las líneas más largas que ese ancho se parten donde el lenguaje lo permite.
4. En JavaScript y TypeScript, elige si las sentencias terminan con punto y coma. En scripts y hojas de estilo, elige comillas simples si tu proyecto las prefiere.
5. Copia el resultado o descárgalo.

Ejemplo

El ejemplo es una página HTML de una sola línea con CSS y JavaScript en línea. Tras formatearla, cada elemento queda en su propia línea, las reglas CSS se expanden con una declaración por línea y la función flecha del script recibe paréntesis y punto y coma:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Consejos

• Formatear también sirve como comprobación rápida de sintaxis. Si Prettier no puede analizar la entrada, el mensaje de error muestra la línea y la columna para que vayas directo al fallo.
• El XML se formatea tratando los espacios en blanco como no significativos para que las etiquetas anidadas queden sangradas. Si tu documento depende de los espacios exactos dentro de los elementos, revisa el resultado antes de usarlo.
• ¿Necesitas lo contrario? Usa el minificador de JavaScript y CSS para reducir el código para producción, o el formateador de JSON para validar y minificar JSON.