Skip to content

NiklasPor/prettier-plugin-organize-attributes

Repository files navigation

prettier-plugin-organize-attributes npm

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

The following files also work out of the box if the plugin is specified:

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>

// .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>