{"id":13847286,"url":"https://github.com/NiklasPor/prettier-plugin-organize-attributes","last_synced_at":"2025-07-12T08:31:29.663Z","repository":{"id":37911062,"uuid":"377441843","full_name":"NiklasPor/prettier-plugin-organize-attributes","owner":"NiklasPor","description":"Organize your HTML attributes automatically with Prettier 🧼","archived":false,"fork":false,"pushed_at":"2024-06-06T17:48:49.000Z","size":217,"stargazers_count":224,"open_issues_count":13,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-24T05:52:53.263Z","etag":null,"topics":["angular","attributes","html","organize","prettier","sort","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NiklasPor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-16T09:28:39.000Z","updated_at":"2025-06-11T06:33:37.000Z","dependencies_parsed_at":"2024-01-15T20:49:10.100Z","dependency_job_id":"8b0204b9-f7ab-4efa-ab7a-5c8172a73ebd","html_url":"https://github.com/NiklasPor/prettier-plugin-organize-attributes","commit_stats":{"total_commits":22,"total_committers":4,"mean_commits":5.5,"dds":0.2272727272727273,"last_synced_commit":"abb34ab3934cbf7d1281ea4539a64a639280716a"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/NiklasPor/prettier-plugin-organize-attributes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasPor%2Fprettier-plugin-organize-attributes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasPor%2Fprettier-plugin-organize-attributes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasPor%2Fprettier-plugin-organize-attributes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasPor%2Fprettier-plugin-organize-attributes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NiklasPor","download_url":"https://codeload.github.com/NiklasPor/prettier-plugin-organize-attributes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasPor%2Fprettier-plugin-organize-attributes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264962219,"owners_count":23689764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","attributes","html","organize","prettier","sort","vue"],"created_at":"2024-08-04T18:01:15.699Z","updated_at":"2025-07-12T08:31:29.143Z","avatar_url":"https://github.com/NiklasPor.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"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)\n\n## Organize your HTML attributes automatically with Prettier 🧼\n\n```\nnpm i prettier prettier-plugin-organize-attributes -D\n```\n\n- Supports Angular, Vue \u0026 HTML with **0** configuration\n- Groups are matched from top to bottom.\n- Attributes are matched against RegExps or presets.\n  - A list of additional presets can be found [here](src/presets.ts).\n  - Attributes which are not matched are put into `$DEFAULT`.\n  - If `$DEFAULT` is not specified they are appended at the end.\n- Attributes in each group can be ordered `ASC` and `DESC` by specifing `attributeSort`.\n  - Order inside groups remains the same if `attributeSort` is **not** used.\n\n---\n\n- [Usage](#usage)\n  - [Groups](#groups)\n  - [Sort](#sort)\n- [Presets](#presets)\n  - [HTML](#html)\n  - [Angular](#angular)\n  - [Vue](#vue)\n  - [Angular Custom](#angular-custom)\n  - [Code-Guide by @mdo](#code-guide-by-mdo)\n\n## Usage\n\nThe following files also work out of the box if the plugin is specified:\n\n- `.html` – [HTML Example](#html)\n- `.component.html` – [Angular Example](#angular)\n- `.vue` – [Vue Example](#vue)\n\n\u003e Starting with Prettier 3 auto-discovery has been removed. Configuration is required ⬇️\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"]\n}\n```\n\nRead below for writing custom attribute orders and configurations ⤵️\n\n### Groups\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"],\n  \"attributeGroups\": [\"^class$\", \"^(id|name)$\", \"$DEFAULT\", \"^aria-\"]\n}\n```\n\n```html\n\u003c!-- input --\u003e\n\u003cdiv\n  aria-disabled=\"true\"\n  name=\"myname\"\n  id=\"myid\"\n  class=\"myclass\"\n  src=\"other\"\n\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- output --\u003e\n\u003cdiv\n  class=\"myclass\"\n  name=\"myname\"\n  id=\"myid\"\n  src=\"other\"\n  aria-disabled=\"true\"\n\u003e\u003c/div\u003e\n```\n\n---\n\n### Sort\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"],\n  \"attributeGroups\": [\"$DEFAULT\", \"^data-\"],\n  \"attributeSort\": \"ASC\"\n}\n```\n\n```html\n\u003c!-- input --\u003e\n\u003cdiv a=\"a\" c=\"c\" b=\"b\" data-c=\"c\" data-a=\"a\" data-b=\"b\"\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- output --\u003e\n\u003cdiv a=\"a\" b=\"b\" c=\"c\" data-a=\"a\" data-b=\"b\" data-c=\"c\"\u003e\u003c/div\u003e\n```\n\n---\n\n### Case-Sensitivity\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"],\n  \"attributeGroups\": [\"^group-a$\", \"^group-b$\", \"^group-A$\", \"^group-B$\"],\n  \"attributeIgnoreCase\": false\n}\n```\n\n```html\n\u003c!-- input --\u003e\n\u003cdiv group-b group-B group-A group-a\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- output --\u003e\n\u003cdiv group-a group-b group-A group-B\u003e\u003c/div\u003e\n```\n\n## Presets\n\n### HTML\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"]\n}\n```\n\n```html\n\u003c!-- input.html --\u003e\n\u003cdiv id=\"id\" other=\"other\" class=\"style\"\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- output.html --\u003e\n\u003cdiv class=\"style\" id=\"id\" other=\"other\"\u003e\u003c/div\u003e\n```\n\n### Angular\n\n```json\n// .prettierrc\n{}\n```\n\n```html\n\u003c!-- input.component.html --\u003e\n\u003cdiv\n  (output)=\"output()\"\n  [input]=\"input\"\n  *ngIf=\"ngIf\"\n  class=\"style\"\n  [(ngModel)]=\"binding\"\n  id=\"id\"\n  other=\"other\"\n  [@inputAnimation]=\"value\"\n  @simpleAnimation\n\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- output.component.html --\u003e\n\u003cdiv\n  class=\"style\"\n  id=\"id\"\n  *ngIf=\"ngIf\"\n  @simpleAnimation\n  [@inputAnimation]=\"value\"\n  [(ngModel)]=\"binding\"\n  [input]=\"input\"\n  (output)=\"output()\"\n  other=\"other\"\n\u003e\u003c/div\u003e\n```\n\n---\n\n### Angular Custom\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"],\n  \"attributeGroups\": [\n    \"$ANGULAR_OUTPUT\",\n    \"$ANGULAR_TWO_WAY_BINDING\",\n    \"$ANGULAR_INPUT\",\n    \"$ANGULAR_STRUCTURAL_DIRECTIVE\"\n  ]\n}\n```\n\n```html\n\u003c!-- input --\u003e\n\u003cdiv\n  [input]=\"input\"\n  (output)=\"output()\"\n  *ngIf=\"ngIf\"\n  other=\"other\"\n  class=\"style\"\n  [(ngModel)]=\"binding\"\n  id=\"id\"\n\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- output --\u003e\n\u003cdiv\n  (output)=\"output()\"\n  [(ngModel)]=\"binding\"\n  [input]=\"input\"\n  *ngIf=\"ngIf\"\n  class=\"style\"\n  id=\"id\"\n  other=\"other\"\n\u003e\u003c/div\u003e\n```\n\n---\n\n### Vue\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"]\n}\n```\n\n```vue\n\u003c!-- input.vue --\u003e\n\u003ctemplate\u003e\n  \u003cdiv other=\"other\" class=\"class\" v-on=\"whatever\" v-bind=\"bound\" id=\"id\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\n```vue\n\u003c!-- output.vue --\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"class\" id=\"id\" v-on=\"whatever\" v-bind=\"bound\" other=\"other\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\n---\n\n### [Code-Guide by @mdo](https://codeguide.co/#html-attribute-order)\n\n```json\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"],\n  \"attributeGroups\": [\"$CODE_GUIDE\"]\n}\n```\n\n```html\n\u003c!-- input --\u003e\n\u003cdiv\n  other=\"other\"\n  value=\"value\"\n  type=\"type\"\n  title=\"title\"\n  src=\"src\"\n  role=\"role\"\n  name=\"name\"\n  id=\"id\"\n  href=\"href\"\n  for=\"for\"\n  data-test=\"test\"\n  class=\"class\"\n  aria-test=\"test\"\n  alt=\"alt\"\n\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- output --\u003e\n\u003cdiv\n  class=\"class\"\n  id=\"id\"\n  name=\"name\"\n  data-test=\"test\"\n  src=\"src\"\n  for=\"for\"\n  type=\"type\"\n  href=\"href\"\n  value=\"value\"\n  title=\"title\"\n  alt=\"alt\"\n  role=\"role\"\n  aria-test=\"test\"\n  other=\"other\"\n\u003e\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNiklasPor%2Fprettier-plugin-organize-attributes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNiklasPor%2Fprettier-plugin-organize-attributes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNiklasPor%2Fprettier-plugin-organize-attributes/lists"}