Sunday 11 September 2022

Visual Studio Code Prettier Extension Set up

Recently I needed to use the Prettier code formatter extension in visual studio code. I thought it would be similar to other extensions. But it is not. We need to set a setting for this extension to work automatically. We will go through that setting for the windows system in this blog.

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.

No comments:

Post a Comment