My Prettier setup for Angular apps

$ npm i prettier prettier-plugin-css-order prettier-plugin-organize-attributes css-declaration-sorter -D

Create .prettierrc file:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "arrowParens": "avoid",
  "singleAttributePerLine": true,
  "htmlWhitespaceSensitivity": "ignore",
  "attributeGroups": [
    "$ANGULAR_STRUCTURAL_DIRECTIVE",
    "$ANGULAR_INPUT",
    "$ANGULAR_TWO_WAY_BINDING",
    "$ANGULAR_OUTPUT"
  ],
  "attributeSort": "ACS",
  "cssDeclarationSorterOrder": "alphabetical",
  "plugins": ["prettier-plugin-organize-attributes", "prettier-plugin-css-order"],
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

Create .prettierignore:

.angular
.vscode
dist
node_modules
.*
*.yaml
*.sh
*.json
*.md

Add scripts to package.json:

  "prettier:check": "npx prettier --check .",
  "prettier:write": "npx prettier --write ."

navix/NG_PRETTIER_SETUP.md