Prettier Extension Set up
- Open visual studio code as an administrator.
- From extensions, install “Prettier – code formatter”
Once you have installed it, 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 a manual setup.Also, we need to set the Prettier extension as the default formatter.
Windows Machine set up
In windows, we can follow the below steps for the required settings:- Click settings. You will find it in the left bottom corner.
- Click on Settings in the menu.
- It will open the settings page. In that, click on the 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 the 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, it will be automatically formatted.
Final Comments
With Prettier, the life becomes easy, and code becomes readable. However, be aware that this applies to every project now. If you happen to work on a project with a team where the project does not use Prettier, you will format every file once you save it. If not agreed upon with your teammates, this may cause trouble.
