Definición, detección y corrección automática de code smells específicos de Angular

Abstract

Este Trabajo de Fin de Grado continúa la línea de investigación iniciada por Sillero y Crespo [103], centrada en la mejora de la calidad del código en proyectos Angular mediante el uso de linters. En primer lugar, se actualiza y amplía el catálogo inicial de code smells propuesto en dicho trabajo mediante una revisión multivocal de literatura (MLR), no limitándose a la recopilación de nombres, sino generando descripciones detalladas que incluyen el contexto en que se presentan, su impacto negativo en el desarrollo y posibles soluciones, acompañadas de ejemplos ilustrativos. En segundo lugar, se amplía la batería de repositorios recopilada por [103], llevando a cabo un análisis de repositorios de software (MSR), con el objetivo de obtener un catálogo de frecuencias reales de aparición de code smells, en forma de incumplimiento de reglas definidas en @angular-eslint/eslint-plugin. A partir de esta base, se selecciona un conjunto de reglas de interés y se simplifica el plugin oficial @angular-eslint/ eslint-plugin, manteniendo únicamente las reglas seleccionadas y desarrollando para ellas sus respectivas correcciones automáticas. Finalmente, el plugin se publica en el registro oficial de npm y se aplica a los repositorios recopilados y analizados previamente para evaluar su comportamiento, comprobando que las correcciones sean válidas, no introduzcan errores y mantengan intacta la lógica del código. Como resultado complementario de gran valor, se entrega un catálogo técnico exhaustivo de code smells específicos de Angular, orientado a servir como guía de buenas prácticas para desarrolladores y como base para futuras investigaciones.

This Bachelor’s Thesis continues the research line initiated by Sillero and Crespo [103], focusing on improving code quality in Angular projects through the use of linters. First, the initial catalog of code smells proposed in their work is updated and expanded through a Multivocal Literature Review (MLR), not only gathering names but also generating detailed descriptions that include the context in which they appear, their negative impact on development, and possible solutions, along with illustrative examples. Second, the repository collection gathered by [103] is extended by performing a Software Repository Analysis (MSR) to obtain a catalog of real occurrence frequencies of code smells, in the form of violations of rules defined in @angular-eslint/eslint-plugin. Based on this, a set of rules of interest is selected, and the official @angular-eslint/eslint-plugin is simplified, keeping only the selected rules and developing their respective automatic fixes. Finally, the plugin is published in the official npm registry and applied to the previously collected and analyzed repositories to evaluate its performance, verifying that the fixes are valid, do not introduce errors, and maintain the logic of the code intact. As a complementary and valuable result, an exhaustive technical catalog of Angular-specific code smells is delivered, aiming to serve as a best practice guide for developers and as a foundation for future research.