github.com/NiklasPor/prettier-plugin-organize-attributes @v1.0.0

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

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
}

Starting with Prettier 3 this is required ⬆️

Read below for writing custom attribute orders and configurations ⤵️

Groups

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
  "attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"]
}

Sort

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
  "attributeGroups": ["$DEFAULT", "^data-"],
  "attributeSort": "ASC"
}

Case-Sensitivity

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
  "attributeGroups": ["^group-a$", "^group-b$", "^group-A$", "^group-B$"],
  "attributeIgnoreCase": false
}

Presets

HTML

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"]
}

Angular

// .prettierrc
{}

Angular Custom

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
  "attributeGroups": [
    "$ANGULAR_OUTPUT",
    "$ANGULAR_TWO_WAY_BINDING",
    "$ANGULAR_INPUT",
    "$ANGULAR_STRUCTURAL_DIRECTIVE"
  ]
}

Vue

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
}

<template>





</template>

<template>





</template>

Code-Guide by @mdo

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
  "attributeGroups": ["$CODE_GUIDE"]
}