What is Prettier?
Prettier is an opinionated code formatter with support for JavaScript, CSS, Less, and SCSS,HTML,JSON...
Why Prettier?
How to use Prettier
Step 1. Install prettier
npm i prettier --save-dev
Use command to format script
//format code
npx prettier --write /scriptpath
//check whether or not code format is correct
npx prettier --check /scriptpath
Step 2. Configuration file
Create .prettierrc file with options to make sure all members in project must be follow instead setting directly editor

https://dev.to/akinghill/start-using-prettier-the-right-way-59kg to understand the meaning of options
Ignore Code
+ In case you want to ignore document type you wouldn't like to format code
Please use .prettierignore
+ Overrides options in .prettierrc by some different file

Step 2: Install Prettier - Code formatter in VS Code

Step 3: Configure default format in VSCode

Step 4: (optional) Setting to reformat code automatically when file is changes

For more detail: Please refer to https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Now, when you change some things and save, format will be correct or Shift+Alt+F
Resources
Comments