Formateador de Vue

Cómo usar esta herramienta para desarrolladores

1. Pega un archivo .vue completo.
2. Ejecuta “Formatear Vue”.
3. Compara el resultado, especialmente template y bloques multilínea.
4. Descarga el .vue o copia la salida a tu editor.

Qué hace esta herramienta para desarrolladores

La salida mantiene el contenido del componente y mejora su presentación visual con reglas deliberadamente prudentes.

Para formatos de equipo exactos, ejecuta después Prettier o el formatter configurado en tu repositorio.

Ejemplo

Entrada de ejemplo

<template><div class="card"><h2>{{ title }}</h2><button @click="save">Guardar</button></div></template>
<script setup>
const title = "Demo"   
const save = () => console.log(title)
</script>
<style scoped>.card{padding:1rem} </style>

Ejecuta la herramienta para ver una salida generada a partir de este ejemplo.

Casos de uso

• Normalizar snippets Vue pegados desde documentación.
• Hacer legible un SFC compactado.
• Preparar ejemplos para revisión de código.
• Reducir ruido de espacios antes de una comparación manual.

Consejos para obtener resultados fiables

• Guarda una copia si el SFC contiene sintaxis experimental.
• Usa el formatter oficial del proyecto para el commit final.
• Revisa atributos con expresiones complejas repartidas en varias líneas.
• No uses este formateador como minificador inverso de JavaScript arbitrario.

Detalles del procesamiento

La sangría del template se calcula a partir de etiquetas de apertura y cierre. Los elementos void de HTML no incrementan la profundidad.

No aplica reglas completas de Prettier a JavaScript, TypeScript, CSS preprocesado ni expresiones embebidas.