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"
  }
```