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 $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
  • Groups
  • Sort
• Presets
  • HTML
  • Angular
  • Vue
  • Angular Custom
  • Code-Guide by @mdo

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>