# prettier-plugin-organize-attributes

> Organize your HTML attributes autmatically with Prettier 🧼

Latest version **1.0.0** (published 2023-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install prettier-plugin-organize-attributes
pnpm add prettier-plugin-organize-attributes
yarn add prettier-plugin-organize-attributes
bun add prettier-plugin-organize-attributes
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-07-20 |
| First published | 2021-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=14.0.0 |
| Dependencies | 0 |
| Unpacked size | 31.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 243 |
| Author | Niklas Portmann |
| Maintainers | niklaspor |
| Keywords | prettier, plugin, organize, attributes, html, angular, vue |

## Links

- npm: https://www.npmjs.com/package/prettier-plugin-organize-attributes
- Repository: https://github.com/NiklasPor/prettier-plugin-organize-attributes
- Homepage: https://github.com/NiklasPor/prettier-plugin-organize-attributes#readme
- Issues: https://github.com/NiklasPor/prettier-plugin-organize-attributes/issues
- npm.io page: https://npm.io/package/prettier-plugin-organize-attributes

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-07-20
- 0.0.5 — 2022-02-09
- 0.0.4 — 2021-07-05
- 0.0.3 — 2021-06-17
- 0.0.2 — 2021-06-16
- 0.0.1 — 2021-06-16

## README

### prettier-plugin-organize-attributes [![npm](https://img.shields.io/npm/v/prettier-plugin-organize-attributes)](https://www.npmjs.com/package/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](src/presets.ts).
  - 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](#usage)
  - [Groups](#groups)
  - [Sort](#sort)
- [Presets](#presets)
  - [HTML](#html)
  - [Angular](#angular)
  - [Vue](#vue)
  - [Angular Custom](#angular-custom)
  - [Code-Guide by @mdo](#code-guide-by-mdo)

## Usage

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

- `.html` – [HTML Example](#html)
- `.component.html` – [Angular Example](#angular)
- `.vue` – [Vue Example](#vue)

```json
// .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
}
```
> Starting with Prettier 3 [this is **required**](https://github.com/prettier/prettier/issues/13729#issuecomment-1643923144) ⬆️

Read below for writing custom attribute orders and configurations ⤵️

### Groups

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

```html
<!-- input -->
<div
  aria-disabled="true"
  name="myname"
  id="myid"
  class="myclass"
  src="other"
></div>
```

```html
<!-- output -->
<div
  class="myclass"
  name="myname"
  id="myid"
  src="other"
  aria-disabled="true"
></div>
```

---

### Sort

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

```html
<!-- input -->
<div a="a" c="c" b="b" data-c="c" data-a="a" data-b="b"></div>
```

```html
<!-- output -->
<div a="a" b="b" c="c" data-a="a" data-b="b" data-c="c"></div>
```

---

### Case-Sensitivity

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

```html
<!-- input -->
<div group-b group-B group-A group-a></div>
```

```html
<!-- output -->
<div group-a group-b group-A group-B></div>
```

## Presets

### HTML

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

```html
<!-- input.html -->
<div id="id" other="other" class="style"></div>
```

```html
<!-- output.html -->
<div class="style" id="id" other="other"></div>
```

### Angular

```json
// .prettierrc
{}
```

```html
<!-- input.component.html -->
<div
  (output)="output()"
  [input]="input"
  *ngIf="ngIf"
  class="style"
  [(ngModel)]="binding"
  id="id"
  other="other"
  [@inputAnimation]="value"
  @simpleAnimation
></div>
```

```html
<!-- output.component.html -->
<div
  class="style"
  id="id"
  *ngIf="ngIf"
  @simpleAnimation
  [@inputAnimation]="value"
  [(ngModel)]="binding"
  [input]="input"
  (output)="output()"
  other="other"
></div>
```

---

### Angular Custom

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

```html
<!-- input -->
<div
  [input]="input"
  (output)="output()"
  *ngIf="ngIf"
  other="other"
  class="style"
  [(ngModel)]="binding"
  id="id"
></div>
```

```html
<!-- output -->
<div
  (output)="output()"
  [(ngModel)]="binding"
  [input]="input"
  *ngIf="ngIf"
  class="style"
  id="id"
  other="other"
></div>
```

---

### Vue

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

```vue
<!-- input.vue -->
<template>
  <div other="other" class="class" v-on="whatever" v-bind="bound" id="id"></div>
</template>
```

```vue
<!-- output.vue -->
<template>
  <div class="class" id="id" v-on="whatever" v-bind="bound" other="other"></div>
</template>
```

---

### [Code-Guide by @mdo](https://codeguide.co/#html-attribute-order)

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

```html
<!-- 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>
```

```html
<!-- 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>
```

---
_Source: https://npm.io/package/prettier-plugin-organize-attributes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._