Cobertura de frameworks

Lo que Agnes entiende, y lo que aún no

Agnes analiza el código fuente de tu repositorio sin ejecutarlo, así que lo que puede comprobar depende de los archivos y las convenciones de tu framework. Esta página muestra dónde la cobertura es completa, dónde es parcial y qué falta todavía.

Cobertura por framework

Las comprobaciones de dependencias funcionan con cualquier framework porque leen tu lockfile. Las demás comprobaciones dependen de los archivos y las convenciones del framework.

Qué comprobaciones ejecuta Agnes para cada framework
FrameworkDependencias y seguridadAvisos, licencias, secretosCalidad del códigoLint, duplicación, complejidadPlantillas y estilosMarcado y CSSCódigo muertoArchivos y exports sin usarAccesibilidadOpcional por proyecto
HTML, CSS and JavaScript Compatible Compatible Compatible Compatible Compatible
React (Vite, Create React App) Compatible Compatible Compatible Compatible Compatible
Next.js Compatible Compatible Compatible Compatible Compatible
TanStack Start Compatible Compatible Compatible Compatible Compatible
React Router and Remix Compatible Compatible Compatible Compatible Compatible
Solid, Qwik and Preact Compatible En parte Compatible En parte En parte
Vue Compatible Compatible Compatible Compatible Compatible
Nuxt Compatible Compatible Compatible En parte Compatible
Svelte Compatible Compatible Compatible Compatible Compatible
SvelteKit Compatible Compatible Compatible Compatible Compatible
Astro Compatible Compatible Compatible Compatible Compatible
Angular Compatible Compatible Compatible Compatible Compatible

Compatible significa que la comprobación se ejecuta y conoce las convenciones del framework. En parte significa que se ejecuta con los límites que se describen más abajo. Todavía no significa que la comprobación se omite para ese framework.

Conviene saber

Frameworks con algún límite, o con una convención que merece una explicación.

  • TanStack Start

    Las rutas y el árbol de rutas generado cuentan como puntos de entrada, así que los archivos de rutas nunca se señalan como sin usar. Los paquetes propios del framework no se comprueban para ver si están sin usar.

  • React Router and Remix

    Las rutas de la carpeta app y los archivos que se nombran en routes.ts cuentan como puntos de entrada. routes.ts se lee como texto y nunca se ejecuta, así que en las rutas que se construyen con código, como bucles o funciones auxiliares, sus archivos pueden aparecer como sin usar.

  • Solid, Qwik and Preact

    Se analiza como TypeScript y JSX normales. No hemos probado estos frameworks de forma específica, así que las reglas propias de React pueden señalar cosas que aquí están bien, y los resultados de código muerto dependen de un index.html o de un punto de entrada en package.json.

  • Vue

    Además de las comprobaciones de código y plantillas, Agnes señala las props que un componente modifica, las refs usadas sin .value y v-html (un hallazgo de seguridad para revisar). Los bloques style se analizan sea cual sea su lang. Los avisos de obsolescencia de Vue 2 se dejan fuera.

  • Nuxt

    Las páginas, layouts, middleware, plugins y el código de servidor cuentan como puntos de entrada. También las carpetas components, composables, utils y stores, porque Nuxt las importa automáticamente, lo que significa que el código sin usar dentro de esas carpetas no se señala.

  • Svelte

    Se informa de los avisos propios del compilador de Svelte sobre reactividad y estilos sin usar, además de reglas de eslint-plugin-svelte como las claves each que faltan y {@html} (un hallazgo de seguridad para revisar). La regla que señala cada enlace interno por no usar resolve() se deja fuera porque genera demasiado ruido.

  • Astro

    Las páginas son puntos de entrada, y en los componentes se comprueban los scripts, las plantillas y los estilos. Las comprobaciones de accesibilidad para Astro cubren las plantillas.

  • Angular

    El TypeScript, las plantillas y las plantillas inline se comprueban con las reglas de lint recomendadas de Angular, y las hojas de estilo de los componentes se analizan como cualquier otra (::ng-deep, :host y :host-context se entienden). Los estilos inline escritos en el decorador del componente no se analizan. Las plantillas se encuentran a través del templateUrl de cada componente, así que los nombres de archivo no importan.

Limitaciones conocidas

No dependen de un framework concreto. Las enumeramos para que sepas lo que una buena puntuación te dice y lo que no.

  • Stylus

    Los archivos Stylus no se analizan. El único parser disponible para Stylus ya no se mantiene y lee mal la sintaxis habitual de Stylus. SCSS, Sass y Less sí se analizan, con las reglas estándar de CSS y SCSS.

  • Puntuación de mantenibilidad de los scripts de componentes

    La complejidad cognitiva se mide en los scripts de los archivos .vue, .svelte y .astro, pero la puntuación de mantenibilidad por archivo solo lee archivos JavaScript y TypeScript.

  • Hace falta un lockfile

    Las comprobaciones de dependencias, avisos y licencias leen package-lock.json, yarn.lock, pnpm-lock.yaml o bun.lock, y la de avisos también lee composer.lock. Sin lockfile, esa parte de la puntuación se deja fuera.

  • npm, más avisos de Composer

    Los paquetes de Composer se comprueban en busca de avisos conocidos, pero no de si están desactualizados u obsoletos, ni de sus licencias. Las dependencias de otros ecosistemas, o de Deno, no se comprueban.

  • Tu propia configuración de lint no se lee

    Agnes ejecuta sus herramientas con sus propias reglas en un entorno aislado y nunca ejecuta tus archivos de configuración, así que las reglas de ESLint, Biome o Stylelint propias de tu proyecto no cambian el informe.

  • Repositorios sobre todo frontend

    Al menos el 60 % de las líneas de código fuente deben ser código frontend. Un monorepo con mucho código backend puede quedar por debajo y entonces no se analiza. Las plantillas (Blade, Twig, Nunjucks, Handlebars, Liquid, MDX) no cuentan en ningún lado, así que las vistas Blade de una aplicación Laravel no la dejan por debajo.

Qué cuenta como repositorio frontend

Agnes cuenta las líneas de los archivos HTML, CSS (incluidos SCSS, Sass y Less), JavaScript, TypeScript, Vue, Svelte y Astro, y analiza un repositorio cuando al menos el 60 % de sus líneas de código fuente están en estos lenguajes. Las carpetas generadas y de terceros como node_modules, dist, .next, .nuxt, .svelte-kit y .astro se ignoran.

Las comprobaciones vienen de herramientas de código abierto. Consulta cuáles son, y qué alimenta cada una, en la página de herramientas