Do you have a hard time reading the HTML of your components?
You are not alone, and many factors can contribute to this. However, today I will show you a prettier plugin that will help to organize the HTML attributes and hopefully make it easier to read and understand everything that is going on with your components.
Say hello 👋 to the
Having a defined order for the HTML attributes can also help us quickly find out what the most important parts of an element are since we will be used to looking for attributes in the same order in every component.
For this, we will use the plugin
prettier-plugin-organize-attributes that, fortunately, helps us set the order for HTML attributes and also supports Vue, React and Angular.
Installing and configuring the library
Simply run the following command to install the library:
npm i prettier prettier-plugin-organize-attributes -D
Now in the prettier configuration file, add the following configuration:
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' ],
Let’s break out why this order was chosen so you can rearrange and adapt as you need.
The first line is to bring to the top any HTML attributes that you don’t allow to make it easier to find them during code reviews.
Angular Structural Directives
Commonly used directives like
*ngFor, as well as any directives that may alter or add additional elements to the DOM,
Putting the directives close to the first items is best because they may also change the way things look, which makes it easy to see when a directive is changing the HTML. In our case, we use
app selector for our directives and that is why we use
This includes any HTML attribute to select HTML elements while executing tests, like
HTML Accessibility Attributes
'tabindex', '$ALT', '$ARIA', '$ROLE', '$TYPE',
'$CLASS', 'ngClass', '^\\[style',
This would include any attributes that directly affect how the element is styled, such as
After knowing that the element will be in the DOM, the next logical thing is to know how the element will look on the page. This rule includes any conditional classes added with Angular data binding syntax, like
[class.some-class]="true", which is just an alternative to
Angular Accessibility Attributes
Anything that can be modified with Angular using
Angular Inputs and outputs
'$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'
This includes standard element attributes, inputs, outputs, and DOM event handlers.
This configuration makes sure that all the DOM Event handlers are grouped together in a logical way to make it easier to find counterparts, like, for example,
(paste) will be close together regardless of which other outputs exist.
DOM Event Handlers
Finally, include any DOM event handlers, such as
Putting it all together
The picture below shows how using it on a component with too many attributes can get them all in order. This way, we can train ourselves to find inputs and outputs quickly because we know they will always be in the same spot.
👇👇 Follow me on Twitter 👇👇