prettier-plugin-organize-attributes 
Organize your HTML attributes automatically with Prettier ๐งผ
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. - If
$DEFAULTis not specified they are appended at the end.
- Attributes in each group can be ordered
ASCandDESCby specifingattributeSort.- Order inside groups remains the same if
attributeSortis not used.
- Order inside groups remains the same if
Usage
The following files also work out of the box if the plugin is specified:
.htmlโ HTML Example.component.htmlโ Angular Example.vueโ Vue Example
Starting with Prettier 3 auto-discovery has been removed. Configuration is required โฌ๏ธ
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"]
}Read below for writing custom attribute orders and configurations
Groups
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"]
}<!-- input -->
<div
aria-disabled="true"
name="myname"
id="myid"
class="myclass"
src="other"
></div><!-- output -->
<div
class="myclass"
name="myname"
id="myid"
src="other"
aria-disabled="true"
></div>Sort
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["$DEFAULT", "^data-"],
"attributeSort": "ASC"
}<!-- input -->
<div a="a" c="c" b="b" data-c="c" data-a="a" data-b="b"></div><!-- output -->
<div a="a" b="b" c="c" data-a="a" data-b="b" data-c="c"></div>Case-Sensitivity
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["^group-a$", "^group-b$", "^group-A$", "^group-B$"],
"attributeIgnoreCase": false
}<!-- input -->
<div group-b group-B group-A group-a></div><!-- output -->
<div group-a group-b group-A group-B></div>Presets
HTML
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"]
}<!-- input.html -->
<div id="id" other="other" class="style"></div><!-- output.html -->
<div class="style" id="id" other="other"></div>Angular
// .prettierrc
{}<!-- input.component.html -->
<div
(output)="output()"
[input]="input"
*ngIf="ngIf"
class="style"
[(ngModel)]="binding"
id="id"
other="other"
[@inputAnimation]="value"
@simpleAnimation
></div><!-- output.component.html -->
<div
class="style"
id="id"
*ngIf="ngIf"
@simpleAnimation
[@inputAnimation]="value"
[(ngModel)]="binding"
[input]="input"
(output)="output()"
other="other"
></div>Angular Custom
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": [
"$ANGULAR_OUTPUT",
"$ANGULAR_TWO_WAY_BINDING",
"$ANGULAR_INPUT",
"$ANGULAR_STRUCTURAL_DIRECTIVE"
]
}<!-- input -->
<div
[input]="input"
(output)="output()"
*ngIf="ngIf"
other="other"
class="style"
[(ngModel)]="binding"
id="id"
></div><!-- output -->
<div
(output)="output()"
[(ngModel)]="binding"
[input]="input"
*ngIf="ngIf"
class="style"
id="id"
other="other"
></div>Vue
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"]
}<!-- input.vue -->
<template>
<div other="other" class="class" v-on="whatever" v-bind="bound" id="id"></div>
</template><!-- output.vue -->
<template>
<div class="class" id="id" v-on="whatever" v-bind="bound" other="other"></div>
</template>Code-Guide by @mdo
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["$CODE_GUIDE"]
}<!-- input -->
<div
other="other"
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"
></div><!-- output -->
<div
class="class"
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"
></div>