JSPM – prettier-plugin-organize-attributes@0.0.3

Package Exports

prettier-plugin-organize-attributes

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (prettier-plugin-organize-attributes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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
- Groups
- Sort
Presets

Usage

The following files also work out of the box without any configuration needed:

.html – HTML Example
.component.html – Angular Example
.vue – Vue Example

Read below for writing custom attribute orders and configurations ⤵️

Groups

// .prettierrc
{
  "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
{
  "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>

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>