My standard prettier formatter configuration

prettierrc.md

{
  "printWidth": 100,
  "tabWidth": 4,
  "useTabs": true,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "always",
  "requirePragma": false,
  "endOfLine": "lf"
}

Vscode-Formatter-setup.md

Auto format staged files before commit, Prettier is the best formatter available now, but it formats html ugly. Using beautify to formatter only html, others prettier will handle

Note: use common print width 100 for both beautify and prettier

Install devDependencies

npm i -D husky prettier js-beautify lint-staged

npm run scripts:

"prettierall-check": "$(npm bin)/prettier -l \"**/*{.js,.ts,.css,.scss,.json,.md,.yaml}\"",

"prettierall": "$(npm bin)/prettier -l --write \"**/*{.js,.ts,.css,.scss,.json,.md,.yaml}\"",

"prettier": "$(npm bin)/prettier --write",

"beautify": "$(npm bin)/js-beautify -t -w 100 -r",

"beautifyall-windows": "$(npm bin)/glob-run js-beautify -t -w 100 -r 'src/**/*.html'",

"beautifyall-linux": "find src -name '*.html' ! -name '*assets*' | xargs js-beautify -t -w 100 -r"

commit hook:

"husky": {
	"hooks": {
		"pre-commit": "lint-staged"
	}
},
"lint-staged": {
    "*.html": [
        "npm run beautify"
    ],
    "*.(js|ts|css|scss|json|md|yaml)": [
        "npm run prettier"
    ]
},

VS Code editor settings

Install prettier extension. No need to install beautify extension because there is an inbuilt beautify fork used in vscode html formatter

 "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.disableLanguages": [
    "html"
  ],
  "html.format.wrapLineLength": 100,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }