Formatting the code is a painful task and most of the time as a new developer we forgot to format our code and push that for the review. Prettier is a code formatting extension for the VS Code IDE and In this article, we are going to see how beneficial it is to use the code formatting extension like Prettier In the Visual Studio Code.

Why We Need Code Formatting Extensions

While working in the team, it is very important that everyone has the same code format and tools to avoid the issue which comes during the merge of the code. These days there are lots of extensions available for the VS Code IDE which come handy depending upon the requirements.

Install Prettier Extension In VS Code

To install the prettier into the VS Code IDE, you have to go to the extensions tab and search for the Prettier Extensions.

install prettier vs code extension
install prettier code extension

Format code In VS Code IDE using Prettier Extension

Once you installed it into your VS Code IDE then you can use the below command based on your operating system to format the code manually.

Operating SystemCommand
MacOSCommand + Shift + P
WindowsControl + Shift + P

You may be prompted to choose the format to use. If yes then click on the configure button and select Prettier – Code formatter and that’s it, your code is now formatted to the default prettier configuration/;’

Code Without Formatting
function codeWithoutFormatting(data){  
    return 'Result: ' + data
}
Code With Formatting
function codeWithFormatting(data){  
    return 'Result: ' + data
}

In the above two comparisons left side has code before the formatting and right side has code after the formatting done by the Prettier. You can see the below changes in the right side of the code

  • Use ” instead of ‘
  • Add a semicolon at the end of the return statement
  • Add an extra space before the function body (after the parameter list)

Format Code Automatically On File Save

Till now, we are using the manual command to format the code, but that is not why Prettier extension is useful and most widely used. You can format the code on file save automatically instead of doing it manually every time.

To use this setting open the vs code setting page and then choose the format on save and that’s it now you can focus on writing code instead of worrying about the code format.

Format Code Using the Prettier Configuration File

You can also create a configuration file to format the code into your VS Code IDE. By using the configuration file, we make sure that all the developers in the team have the same code format.

You can create the configuration file in any of the below format title with .prettierrc

  • js
  • json
  • yaml, yml
  • include in the package.json

Below is the demo file for the prettier configuration you can use this and also can add other things depending upon your requirements

.prettierrc.json file

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
  "tabWidth" : 4
}

You can go to prettier official docs to check more about the configuration file.

I will suggest you to use the configuration file for the code formatting instead of the default one to ensure that every developer has the same code format in their code.

Conclusion

Code formatting is really very essential things in the code writing and most of the time we forgot this but after reading this article, you can easily format your code.

You can use this save time to write more lines of code and increase your productivity. Prettier isn’t the first or only tool for the job, so if it is not suitable for you, then there is bound to be another one to suit your environment or team.

Hope this article on prettier vs code extension helps you, if you have any suggestions then do comment in the comment box or join our facebook group to share your doubts related to any topic on web development.

Codecademy Web Development
Pin It