How to set up Prettier and automatic formatting on VS Code

1. Step 1: Install Prettier
2. Step 2: Set autosave
3. Step 3: Format your code
4. Step 4: Select Prettier as the default

Prettier is a code formatter that makes your code look neat and consistent. To learn more about Prettier, please visit the website here.

Below is an easy way to set up Prettier on your VS Code and allow automatic formatting.

Step 1: Install Prettier

Click on the extension tab and type in Prettier.

Once found, click on it to proceed to installation.

Step 2: Set autosave

Once installation is successful, open the settings of your VS Code. You can do this on Windows by pressing both Ctrl and ,. Click on the formatting section of the Text Editor tab and enable Format on Save Mode.

Step 3: Format your code

Now, highlight your code and right-click. Select Format Document.

Once you click on Format Document, a dialog box will tell you to configure your code formatter. This is to set your default code formatter. Click on the configure button.

Step 4: Select Prettier as the default

After you click on configure, select Prettier as the default formatter.

And that’s it!

Now, your code should be formatted with Prettier anytime you save your file.