Using Prettier to reformat code in VSCode

What is Prettier?

Prettier is an opinionated code formatter with support for JavaScript, CSS, Less, and SCSS,HTML,JSON...

Why Prettier?

It is generally accepted that having a common style guide is valuable for a project and team

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://prettier.io/docs/en/options.html

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

https://www.youtube.com/watch?v=DqfQ4DPnRqI