Organize your HTML attributes autmatically with Prettier 🧼
npm install prettier-plugin-organize-attributes``
npm i prettier prettier-plugin-organize-attributes -D
- Supports Angular, Vue & HTML with 0 configuration
- Groups are matched from top to bottom.
- Attributes are matched against RegExps or presets.
- A list of additional presets can be found here.
- Attributes which are not matched are put into $DEFAULT.$DEFAULT
- If is not specified they are appended at the end.ASC
- Attributes in each group can be ordered and DESC by specifing attributeSort.attributeSort
- Order inside groups remains the same if is not used.
---
- Usage
- Groups
- Sort
- Presets
- HTML
- Angular
- Vue
- Angular Custom
- Code-Guide by @mdo
The following files also work out of the box if the plugin is specified:
- .html – HTML Example.component.html
- – Angular Example.vue
- – Vue Example
`json`
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
}
> Starting with Prettier 3 this is required ⬆️
Read below for writing custom attribute orders and configurations ⤵️
`json`
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"]
}
`html
name="myname"
id="myid"
class="myclass"
src="other"
>
html
name="myname"
id="myid"
src="other"
aria-disabled="true"
>---
$3
json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["$DEFAULT", "^data-"],
"attributeSort": "ASC"
}
`html
`html
`---
$3
json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["^group-a$", "^group-b$", "^group-A$", "^group-B$"],
"attributeIgnoreCase": false
}
`html
`html
`Presets
$3
json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"]
}
`html
`html
`$3
json
// .prettierrc
{}
`html
[input]="input"
*ngIf="ngIf"
class="style"
[(ngModel)]="binding"
id="id"
other="other"
[@inputAnimation]="value"
@simpleAnimation
>html
id="id"
*ngIf="ngIf"
@simpleAnimation
[@inputAnimation]="value"
[(ngModel)]="binding"
[input]="input"
(output)="output()"
other="other"
>---
$3
json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": [
"$ANGULAR_OUTPUT",
"$ANGULAR_TWO_WAY_BINDING",
"$ANGULAR_INPUT",
"$ANGULAR_STRUCTURAL_DIRECTIVE"
]
}
`html
(output)="output()"
*ngIf="ngIf"
other="other"
class="style"
[(ngModel)]="binding"
id="id"
>html
[(ngModel)]="binding"
[input]="input"
*ngIf="ngIf"
class="style"
id="id"
other="other"
>---
$3
json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
}
`vue
`vue
`---
$3
json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["$CODE_GUIDE"]
}
`html
value="value"
type="type"
title="title"
src="src"
role="role"
name="name"
id="id"
href="href"
for="for"
data-test="test"
class="class"
aria-test="test"
alt="alt"
>
`html
id="id"
name="name"
data-test="test"
src="src"
for="for"
type="type"
href="href"
value="value"
title="title"
alt="alt"
role="role"
aria-test="test"
other="other"
>
``