{"id":20395,"library":"prettier-plugin-organize-attributes","title":"prettier-plugin-organize-attributes","description":"Prettier plugin to automatically organize HTML attributes in a configurable order. Version 1.0.0, stable, actively maintained. Supports Angular, Vue, and plain HTML with zero configuration. Allows custom attribute groups via regex or presets, attribute sorting (ASC/DESC), and case-insensitive matching. Key differentiator: structured group-based ordering rather than simple alphabetical, with built-in presets for popular frameworks. Requires Prettier ^3.0.0.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/NiklasPor/prettier-plugin-organize-attributes","tags":["javascript","prettier","plugin","organize","attributes","html","angular","vue","typescript"],"install":[{"cmd":"npm install prettier-plugin-organize-attributes","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-organize-attributes","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-organize-attributes","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: plugin requires Prettier ^3.0.0","package":"prettier","optional":false}],"imports":[{"note":"Plugin is loaded by Prettier via configuration, not directly imported in source code.","wrong":"// using require() or import in code - not needed, configured via Prettier config","symbol":"plugin (automatically loaded)","correct":"// add to .prettierrc: { \"plugins\": [\"prettier-plugin-organize-attributes\"] }"},{"note":"The option is a string array of regex patterns and special placeholders like $DEFAULT.","wrong":"// omitting \"plugins\" key - required since Prettier 3","symbol":"attributeGroups (config option)","correct":"// .prettierrc\n{ \"attributeGroups\": [\"^class$\", \"$DEFAULT\"] }"},{"note":"Case-insensitive? Actually must be uppercase; default is no sort (preserve order).","wrong":"// using \"asc\" or true - must be \"ASC\" or \"DESC\" string","symbol":"attributeSort (config option)","correct":"// .prettierrc\n{ \"attributeSort\": \"ASC\" }"}],"quickstart":{"code":"// Install\nnpm install --save-dev prettier prettier-plugin-organize-attributes\n\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"],\n  \"attributeGroups\": [\"^class$\", \"^id$\", \"$DEFAULT\"],\n  \"attributeSort\": \"ASC\"\n}\n\n// Input: index.html\n<div id=\"myid\" class=\"myclass\" src=\"img.jpg\"></div>\n\n// Run: npx prettier --write index.html\n// Output:\n// <div class=\"myclass\" id=\"myid\" src=\"img.jpg\"></div>","lang":"typescript","description":"Shows installation, configuration with custom groups and sorting, and a run example."},"warnings":[{"fix":"Add \"plugins\": [\"prettier-plugin-organize-attributes\"] to .prettierrc (or other config file).","message":"Prettier 3 requires explicit plugin declaration in config; old per-file loading is removed.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure file extensions are recognized; override with overrides if needed.","message":"The plugin only processes files matching default Prettier HTML parser extensions (e.g., .html, .component.html, .vue). Other file types are ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place $DEFAULT after specific groups if you want explicit ordering, or omit to append at end.","message":"Attribute groups are matched in order; an attribute matched by first group is not available for subsequent groups. $DEFAULT captures all unmatched.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"N/A","message":"No deprecated features reported for v1.0.0.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev prettier-plugin-organize-attributes.","cause":"Plugin not installed or not in node_modules.","error":"Error: Cannot find module 'prettier-plugin-organize-attributes'"},{"fix":"Add '$DEFAULT' to attributeGroups array in config, or add a specific group covering that attribute.","cause":"Attribute does not match any group and $DEFAULT is not present.","error":"Error: [prettier-plugin-organize-attributes] No matching preset/group for attribute 'xyz'"},{"fix":"Add overrides in Prettier config: { \"overrides\": [{ \"files\": \"*.template\", \"options\": { \"parser\": \"html\" } }] }","cause":"File extension not associated with 'html' parser; plugin only runs on HTML-like files.","error":"prettier --write fails silently with no changes even though plugin is in config"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}