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.
| Framework | Dependencias y seguridadAvisos, licencias, secretos | Calidad del códigoLint, duplicación, complejidad | Plantillas y estilosMarcado y CSS | Código muertoArchivos y exports sin usar | AccesibilidadOpcional 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