npm:prettier-plugin-organize-attributes | Skypack
Usage no npm install needed!
<script type="module">
import prettierPluginOrganizeAttributes from 'https://cdn.skypack.dev/prettier-plugin-organize-attributes';
</script>
README
prettier-plugin-organize-attributes
Organize your HTML attributes autmatically 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
$DEFAULT
is not specified they are appended at the end.
- Attributes in each group can be ordered
ASC
and DESC
by specifing attributeSort
.
- Order inside groups remains the same if
attributeSort
is not used.
Usage
The following files also work out of the box without any configuration needed:
Read below for writing custom attribute orders and configurations ⤵️
Groups
// .prettierrc
{
"attributeGroups": ["^class
quot;, "^(id|name)quot;, "$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
{
"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
{
"attributeGroups": ["^group-aquot;, "^group-bquot;, "^group-Aquot;, "^group-Bquot;],
"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
{}
<!-- 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
{
"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
{}
<!-- 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
{
"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>