Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NiklasPor/prettier-plugin-organize-attributes
Organize your HTML attributes automatically with Prettier 🧼
https://github.com/NiklasPor/prettier-plugin-organize-attributes
angular attributes html organize prettier sort vue
Last synced: 3 months ago
JSON representation
Organize your HTML attributes automatically with Prettier 🧼
- Host: GitHub
- URL: https://github.com/NiklasPor/prettier-plugin-organize-attributes
- Owner: NiklasPor
- License: mit
- Created: 2021-06-16T09:28:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T17:48:49.000Z (5 months ago)
- Last Synced: 2024-07-31T01:16:02.919Z (4 months ago)
- Topics: angular, attributes, html, organize, prettier, sort, vue
- Language: TypeScript
- Homepage:
- Size: 212 KB
- Stars: 194
- Watchers: 2
- Forks: 12
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
### 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)
> Starting with Prettier 3 auto-discovery has been removed. Configuration is required ⬇️
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"]
}
```
Read below for writing custom attribute orders and configurations ⤵️
### Groups
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"]
}
```
```html
```
```html
```
---
### Sort
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["$DEFAULT", "^data-"],
"attributeSort": "ASC"
}
```
```html
```
```html
```
---
### Case-Sensitivity
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["^group-a$", "^group-b$", "^group-A$", "^group-B$"],
"attributeIgnoreCase": false
}
```
```html
```
```html
```
## Presets
### HTML
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"]
}
```
```html
```
```html
```
### Angular
```json
// .prettierrc
{}
```
```html
```
```html
```
---
### Angular Custom
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": [
"$ANGULAR_OUTPUT",
"$ANGULAR_TWO_WAY_BINDING",
"$ANGULAR_INPUT",
"$ANGULAR_STRUCTURAL_DIRECTIVE"
]
}
```
```html
```
```html
```
---
### Vue
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"]
}
```
```vue
```
```vue
```
---
### [Code-Guide by @mdo](https://codeguide.co/#html-attribute-order)
```json
// .prettierrc
{
"plugins": ["prettier-plugin-organize-attributes"],
"attributeGroups": ["$CODE_GUIDE"]
}
```
```html
```
```html
```