My Prettier setup for Angular apps

NG_PRETTIER_SETUP.md

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

Create .prettierrc file:

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore",
  "singleAttributePerLine": true,
  "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"]
}

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 ."