Prettier Plugin Organize Attributes

📖 Overview

This project is based on prettier-plugin-organize-attributes, but adds additional features

npm i -D @xeonlink/prettier-plugin-organize-attributes

• ⚙️ Options
  • attributeGroups
  • attributeSort
  • attributeIgnoreCase
  • typesafety
• 🔗 Compatability
  • prettier-plugin-tailwindcss
  • prettier-plugin-svelte
  • prettier-plugin-astro

⚙️ Options

attributeGroups

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

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

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

• Groups attributes by name.
• Groups are expressed using regular expressions, and attributes that satisfy the regular expression are grouped together.
• If an attribute name satisfies multiple regular expressions, it belongs to the group that comes first.
• There are predefined PRESET configurations.
• If an attribute doesn't belong to any group, it belongs to the $DEFAULT group.

attributeSort

{
  "plugins": ["@xeonlink/prettier-plugin-organize-attributes"],
  "attributeGroups": ["$DEFAULT", "^data-"],
  "attributeSort": "ASC"
}

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

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

• Sorts attributes within groups.
• Sorting occurs within groups and does not affect other groups.

attributeIgnoreCase

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

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

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

• Sets whether the group's regular expression is case-sensitive.
• This option defaults to true, so if the option is not specified, the regular expression is case-insensitive.

typesafety

/** @type {import('prettier').Config & import('@xeonlink/prettier-plugin-organize-attributes').Config} */
const config = {
  plugins: ["@xeonlink/prettier-plugin-organize-attributes"],
  attributeSort: "ASC",
};

export default config;

When using a JavaScript config, you can import the types for IntelliSense

🔗 Compatibility

This plugin works by dynamically importing and calling parsers from plugins with lower priority to avoid conflicts with other plugins, and then modifying the AST. Therefore, if prettier doesn't have built-in support for a parser, you need to use it together with a plugin that has that parser. (e.g., prettier-plugin-svelte)

prettier-plugin-tailwindcss

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "@xeonlink/prettier-plugin-organize-attributes"
  ]
}

prettier-plugin-svelte

{
  "plugins": [
    "prettier-plugin-svelte",
    "@xeonlink/prettier-plugin-organize-attributes"
  ]
}

prettier-plugin-astro

{
  "plugins": [
    "prettier-plugin-astro",
    "@xeonlink/prettier-plugin-organize-attributes"
  ]
}