search

NiklasPor / prettier-plugin-organize-attributes

Organize your HTML attributes automatically with Prettier 🧼
MIT License
205 stars 12 forks source link

Angular Material & i18n #12

Closed leomayer closed 2 years ago

leomayer commented 2 years ago

I use Angular Material and if I use your plugin than I would like to have all the Angular Material attributes at the beginning, e.g.

<button mat-button color="warn">Warn</button>

Should move mat- at the beginning. Same in <th mat-header-cell...

I'm not really clear about the other attributes, e.g. matTooltip, matSuffix (in mat-button), matBadge, etc. But preferably after the mat- group.

Definitely I want to have all i18n at the very ending. Sorted by the optional additional arguments, e.g. i18n-matTooltip="@@tooltip"

Do you have a config example?

leomayer commented 2 years ago

I figured already out a config which suits me

"attributeGroups": ["^#", "$ANGULAR_STRUCTURAL_DIRECTIVE", "^(id|name)$", "^mat-", "^class$", "^mat", "$ANGULAR_TWO_WAY_BINDING", "$ANGULAR_OUTPUT", "$ANGULAR_INPUT", "$DEFAULT", "^aria-", "^i18n" ]
NiklasPor commented 2 years ago

Glad you figured it out 👏

cmalard commented 2 years ago

Based on the current config: https://github.com/NiklasPor/prettier-plugin-organize-attributes/blob/e1cdcf3a6f3cf0e3a83568deb89eda1d0e1846e4/src/presets.ts#L38-L48

I did it this way:

{
  "attributeGroups": [
    "$ANGULAR_ELEMENT_REF",
    "$ANGULAR_STRUCTURAL_DIRECTIVE",
    "^(mat|er)-", // target material (mat-) & my app (er-) directives
    "$ANGULAR_ANIMATION",
    "$ANGULAR_ANIMATION_INPUT",
    "$ANGULAR_TWO_WAY_BINDING",
    "^\\[(?!ngClass|\\(|@)", // == $ANGULAR_INPUT without ngClass
    "$ANGULAR_OUTPUT",
    "$DEFAULT",
    "^class$",
    "^\\[ngClass",
    "^i18n"
  ]
}

Thanks for the idea leomayer 🍻

NiklasPor commented 2 years ago

Based on the current config: https://github.com/NiklasPor/prettier-plugin-organize-attributes/blob/e1cdcf3a6f3cf0e3a83568deb89eda1d0e1846e4/src/presets.ts#L38-L48

I did it this way:

{
  "attributeGroups": [
    "$ANGULAR_ELEMENT_REF",
    "$ANGULAR_STRUCTURAL_DIRECTIVE",
    "^(mat|er)-", // target material (mat-) & my app (er-) directives
    "$ANGULAR_ANIMATION",
    "$ANGULAR_ANIMATION_INPUT",
    "$ANGULAR_TWO_WAY_BINDING",
    "^\\[(?!ngClass|\\(|@)", // == $ANGULAR_INPUT without ngClass
    "$ANGULAR_OUTPUT",
    "$DEFAULT",
    "^class$",
    "^\\[ngClass",
    "^i18n"
  ]
}

Thanks for the idea leomayer 🍻

Great usage with the custom component library 👏