Prettier Settings #prettier

.prettierrc

{
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "none",
  "bracketSameLine": true,
  "singleAttributePerLine": true,
  "overrides": [
    {
      "files": "*.component.html",
      "options": {
        "parser": "angular",
        "plugins": [
          "prettier-plugin-organize-attributes"
        ],
        "attributeGroups": [
          "$ANGULAR_STRUCTURAL_DIRECTIVE",
          "$ANGULAR_ANIMATION",
          "$ANGULAR_ANIMATION_INPUT",
          "$ANGULAR_ELEMENT_REF",
          "$CODE_GUIDE",
          "$ANGULAR_INPUT",
          "$ANGULAR_TWO_WAY_BINDING",
          "$ANGULAR_OUTPUT"
        ]
      }
    },
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

README.md

Organize your HTML attributes automatically with Prettier 🧼

npm i prettier prettier-plugin-organize-attributes -D