¿Tienes dificultades para leer el HTML de tus componentes?
No estás solo, y muchos factores pueden contribuir a esto. Sin embargo, hoy te mostraré un plugin más ordenado que ayudará a organizar los atributos HTML y con suerte, facilitará la lectura y comprensión de todo lo que está sucediendo en tus componentes.
Dale la bienvenida 👋 al prettier-plugin-organize-attributesTener un orden definido para los atributos HTML también puede ayudarnos a encontrar rápidamente las partes más importantes de un elemento, ya que estaremos acostumbrados a buscar atributos en el mismo orden en cada componente.
Para esto, utilizaremos el plugin prettier-plugin-organize-attributes que, afortunadamente, nos ayuda a establecer el orden de los atributos HTML y también es compatible con Vue, React y Angular.
Instalación y configuración de la biblioteca
Simplemente ejecuta el siguiente comando para instalar la biblioteca:
npm i prettier prettier-plugin-organize-attributes -D
Ahora, en el archivo de configuración de prettier, agrega la siguiente configuración:
attributeGroups: [
‘^(id|name)$’,
‘$ANGULAR_STRUCTURAL_DIRECTIVE’,
‘^app’,
‘$ANGULAR_ELEMENT_REF’,
‘data-testid’,
‘tabindex’,
‘$ALT’,
‘$ARIA’,
‘$ROLE’,
‘$TYPE’,
‘$CLASS’,
‘ngClass’,
‘^\[style’,
‘$ANGULAR_ANIMATION’,
‘$ANGULAR_ANIMATION_INPUT’,
‘^\[attr’,
‘$ANGULAR_TWO_WAY_BINDING’,
‘$ANGULAR_INPUT’,
‘^(\(blur\)|\(focus\)|)$’,
‘^(\(click\)|\(dbclick\)|\(submit\))$’,
‘^(\(cut\)|\(copy\)|\(paste\))$’,
‘^(\(keyup\)|\(keypress\)|\(keydown\))$’,
‘^(\(mouseup\)|\(mousedown\)|\(mouseenter\)|\(scroll\))$’,
‘^(\(drag\)|\(drop\)|\(dragover\))$’,
‘$ANGULAR_OUTPUT’
],
Vamos a desglosar por qué se eligió este orden para que puedas reorganizarlo y adaptarlo según tus necesidades.
Atributos no válidos
‘^(id|name)$’,
La primera línea es para llevar al principio cualquier atributo HTML que no permitas, para que sea más fácil encontrarlos durante las revisiones de código.
Directivas Estructurales de Angular
‘$ANGULAR_STRUCTURAL_DIRECTIVE’,
Directivas comúnmente utilizadas como *ngIf y *ngFor, así como cualquier directiva que pueda alterar o agregar elementos adicionales al DOM.
Directivas Personalizadas
‘^app’,
Colocar las directivas cerca de los primeros elementos es lo mejor, porque también pueden cambiar la apariencia de las cosas, lo que facilita ver cuándo una directiva está cambiando el HTML. En nuestro caso, usamos el selector app para nuestras directivas, por eso usamos =’^app’
Element Ref
‘$ANGULAR_ELEMENT_REF’,
Test Ids
‘data-testid’,
Esto incluye cualquier atributo HTML para seleccionar elementos HTML durante la ejecución de pruebas, como data-testid o data-cy
Atributos de Accesibilidad HTML
‘tabindex’,
‘$ALT’,
‘$ARIA’,
‘$ROLE’,
‘$TYPE’,
Animaciones de Angular
‘$ANGULAR_ANIMATION’,
‘$ANGULAR_ANIMATION_INPUT’,
Atributos Estilísticos
‘$CLASS’,
‘ngClass’,
‘^\[style’,
Esto incluiría cualquier atributo que afecte directamente cómo se estiliza el elemento, como class, [ngStyle]y [ngClass].
Después de saber que el elemento estará en el DOM, lo siguiente lógico es saber cómo se verá en la página. Esta regla incluye cualquier clase condicional agregada con la sintaxis de enlace de datos de Angular, como [class.some-class]=“true”,que es solo una alternativa a ngClassy ngStyle.
Atributos de Accesibilidad de Angular
‘^\[attr’,
Cualquier cosa que pueda modificarse con Angular utilizando [aria.
Inputs y Outputs de Angular
‘$ANGULAR_TWO_WAY_BINDING’,
‘$ANGULAR_INPUT’,
‘^(\(blur\)|\(focus\)|)$’,
‘^(\(click\)|\(dbclick\)|\(submit\))$’,
‘^(\(cut\)|\(copy\)|\(paste\))$’,
‘^(\(keyup\)|\(keypress\)|\(keydown\))$’,
‘^(\(mouseup\)|\(mousedown\)|\(mouseenter\)|\(scroll\))$’,
‘^(\(drag\)|\(drop\)|\(dragover\))$’,
‘$ANGULAR_OUTPUT’
Esto incluye atributos de elementos estándar, entradas, salidas y controladores de eventos del DOM.
Esta configuración asegura que todos los controladores de eventos del DOM estén agrupados de manera lógica para que sea más fácil encontrar contrapartes, como, por ejemplo (copy), (cut)y (paste)estarán cerca independientemente de qué otras salidas existan.
Controladores de Eventos del DOM
Finalmente, incluye cualquier controlador de eventos del DOM, como mouseenter, (copy), (keyup), etc.
Poniéndolo todo junto
La imagen de abajo muestra cómo al usarlo en un componente con demasiados atributos, puede ordenarlos todos. De esta manera, podemos entrenarnos para encontrar entradas y salidas rápidamente, porque sabemos que siempre estarán en el mismo lugar.
Usando Prettier en Angular HTML was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.