prettier-plugin-organize-attributes

Organize your HTML attributes autmatically with Prettier 🧼

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 npm

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": ["^classquot;, "^(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>