{"id":20569,"library":"squidex-prettier-plugin-organize-attributes","title":"Prettier Plugin Organize Attributes","description":"A Prettier plugin that automatically organizes HTML attributes in Angular, Vue, and plain HTML files. Version 1.0.1 requires Prettier ^3.0.0 and Node >=14.0.0. It groups attributes using RegExps or predefined presets (e.g., HTML, Angular, Vue, Code-Guide) and supports sorting within groups in ascending or descending order. Unlike alternative attribute formatters, it integrates directly into Prettier's workflow with zero configuration for common frameworks. Ships with TypeScript typings.","status":"active","version":"1.0.1","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 squidex-prettier-plugin-organize-attributes","lang":"bash","label":"npm"},{"cmd":"yarn add squidex-prettier-plugin-organize-attributes","lang":"bash","label":"yarn"},{"cmd":"pnpm add squidex-prettier-plugin-organize-attributes","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for plugin to work","package":"prettier","optional":false}],"imports":[{"note":"Plugin is auto-discovered by Prettier when listed in config. No direct import in code.","wrong":"// Do not use require() syntax in ESM\nconst plugin = require('prettier-plugin-organize-attributes');","symbol":"Plugin","correct":"// No explicit import needed; add to .prettierrc plugins array\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"]\n}"}],"quickstart":{"code":"// 1. Install\n// npm i prettier prettier-plugin-organize-attributes -D\n\n// 2. Configure .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-organize-attributes\"],\n  \"attributeGroups\": [\"^class$\", \"^(id|name)$\", \"$DEFAULT\"],\n  \"attributeSort\": \"ASC\"\n}\n\n// 3. Run Prettier\n// Input: <div id=\"id\" name=\"name\" class=\"class\" custom=\"custom\"></div>\n// Output: <div class=\"class\" id=\"id\" name=\"name\" custom=\"custom\"></div>","lang":"javascript","description":"Installs and configures the plugin to organize HTML attributes in Prettier, grouping by regex and sorting alphabetically."},"warnings":[{"fix":"Add 'plugins' array to your Prettier config: { \"plugins\": [\"prettier-plugin-organize-attributes\"] }","message":"Prettier v3 removed auto-discovery of plugins; you must explicitly list plugins in .prettierrc.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If you want unmatched attributes to be placed in a specific position, include $DEFAULT in your attributeGroups array.","message":"Attributes not matching any group are placed at the end unless $DEFAULT is explicitly defined.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure your files have the correct extension. For custom extensions, you may need to configure Prettier's overrides.","message":"The plugin only works on .html, .component.html (Angular), and .vue files by default. Other extensions may not trigger organization.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use attributeSort: 'ASC' or 'DESC' globally. If per-group sorting is needed, consider workarounds like separating into multiple runs.","message":"attributeSort affects all groups; you cannot set different sort orders per group.","severity":"gotcha","affected_versions":">=0.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 i -D prettier-plugin-organize-attributes. Ensure it's in your devDependencies.","cause":"Plugin not installed or not in node_modules.","error":"Error: Cannot find module 'prettier-plugin-organize-attributes'"},{"fix":"Use valid preset names: $ANGULAR_OUTPUT, $ANGULAR_TWO_WAY_BINDING, $ANGULAR_INPUT, $ANGULAR_STRUCTURAL_DIRECTIVE, or custom regex strings.","cause":"Referenced a group name that doesn't exist (e.g., $CUSTOM is not a predefined preset).","error":"Error: [prettier-plugin-organize-attributes] Unknown attribute group: $CUSTOM"},{"fix":"Ensure you run Prettier on .html, .component.html, or .vue files. Verify the HTML is valid.","cause":"Plugin applied to unsupported file type (e.g., .js) or unparseable HTML.","error":"TypeError: Cannot read properties of undefined (reading 'match')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}