Comprobador de Vue

Cómo usar esta herramienta para desarrolladores

1. Pega el contenido completo de un archivo .vue.
2. Pulsa “Comprobar Vue” o usa Ctrl/Cmd + Enter.
3. Revisa cada aviso con su línea aproximada y la recomendación asociada.
4. Corrige el SFC en tu proyecto y vuelve a comprobarlo si quieres confirmar la estructura.

Qué hace esta herramienta para desarrolladores

El comprobador hace una revisión estática del SFC. No compila Vue ni resuelve imports, pero permite localizar varios errores de estructura y convenciones que suelen aparecer antes de ejecutar el proyecto.

Un resultado sin avisos significa que no se detectaron estas reglas concretas; no sustituye a vue-tsc, ESLint ni al compilador de Vue.

Ejemplo

Entrada de ejemplo

<template>
  <ul>
    <li v-for="item in items">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = [{ name: 'Uno' }]
</script>

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

Casos de uso

• Revisión rápida de SFC recibidos en un pull request.
• Detección de v-for sin claves estables.
• Comprobación de bloques template/script/style repetidos.
• Prevalidación antes de ejecutar herramientas del proyecto.

Consejos para obtener resultados fiables

• Incluye el SFC completo para que el recuento de bloques sea útil.
• Usa claves derivadas de identificadores estables, no del índice, cuando el orden pueda cambiar.
• Si trabajas con TypeScript, valida después con vue-tsc.
• No interpretes la ausencia de avisos como una compilación correcta.

Detalles del procesamiento

El análisis es local y no ejecuta el código del componente. Las posiciones se calculan a partir del texto original para facilitar la búsqueda del problema.

No evalúa tipos, macros personalizadas, imports, plugins de Vite ni transformaciones del compilador.