Recently, I needed to use a Prettier code formatter extension in visual studio code. I thought the Prettier code would be similar to other extensions, but it is not. In Prettier code, there is a setting that we need to use for this extension to work automatically. We will learn about that setting for the Windows system in this blog.
Prettier Extension Set up
- Open visual studio code as administrator.
- From extensions, install “Prettier – code formatter”
![]()
Once you have installed the program, you can use it with CTRL + CMD + P (MacOS) or CTRL + Shift + P (Windows) to manually format a file or a selection of code.
Required Settings
We need to enable format on save settings for this extension. By default, it is disabled in visual studio code, and it is manual setup.
Also, we need to set Prettier extension as the default formatter.
Windows Machine setup
In Windows, we can follow below steps for the required settings:
- Click settings. You will find it in the bottom left corner.
![]()
- Click Settings in the menu.
![]()
- It will open the settings page. In that, click text editor.
![]()
- Scroll down to “Default Formatter” settings.
![]()
- Here, we need to select Prettier.
![]()
![]()
- After this, from the left menu, click on “formatting”.
![]()
- Here, checks the option “Format on save”:
![]()
![]()
Verify the changes
- To verify the settings, click on new text file from the file menu.
![]()
- Click on select a language. Then select HTML.
![]()
![]()
Paste the below code and save the file.
<html>
<head> <title>This is test</title> </head>
<body> <p>this is test</p> <p>This is test 2</p> <p>test</p> </body>
</html>
![]()
When you save, the file will be automatically formatted.
![]()
![]()
Final Comments
With Prettier, life becomes easy, and code becomes readable. However, be aware that Prettier code applies to every project now. If you happen to work on a project with a team who does not use Prettier, you will format every file once you save it. If not agreed upon with your teammates, this may cause trouble.