As a Developer, We used to be in the situation to format the code after writing it. It became very frustrating when we have written the tons of lines of code and then we need to format it. So Isn't it better if we use some IDE extension to solve our issue🤪. Yes, Correct in this blog we are going to discuss one of the best formatting extension for VS Code that I'm using it regularly. It's Prettier Extension. I'm sure you guys gonna loved it once start using it :).
Prettier is an opinionated code formatter with support for:
- CSS, Less, and SCSS
- Markdown, including GFM and MDX
- Code consistency across all the files that you have worked
- Easily format the old code base if you are working on any new features with the same file
- Prettier support the pre-commit Hook which can re-format your files that are marked as staged. Ref
- Easy to adopt
- Reduce overall development time
- Prettier provide functionality to ignore some of the files that we don't want to format.
- It reminds me of how Steve Jobs used to wear the same clothes every day because he has a million decisions to make and he didn’t want to be bothered to make trivial ones like picking out clothes. I think Prettier is like that.😃
As I'm mostly using the VS Code so I'll take VS Code IDE example for explaining the setup of the prettier extension. You can check other IDE setup here
Step-1: Open Visual Code Editor
Perform the below operations:
- Set Prettier-Code formatter as Default Formatter (Take reference from above screenshot)
- Enabled Format On Save option
- There are some other options if you want then you can enabled it.
Step-5: Now let's test it.
Now let's add some extra space like below code.
Now if you save the file then it'll automatically remove the extra spaces and format the code of that file. Hope you see the magic 😄.
Ignore certain files and folder completely Feature
We can achieve it using the 2 methods
- Use .prettierignore to ignore (i.e. not reformat) certain files and folders completely. To exclude files from formatting, create a .prettierignore file in the root of your project. .prettierignore uses gitignore syntax.
# Ignore all HTML files:
- Use “prettier-ignore” comments to ignore parts of files. Here we can add the comment above the code lines to ignore the parts of the file. It's normal like a comments based on the language. for more info check here
For more info you can check the below links regarding the features
Today, we have covered how to add the Prettier extension to our IDE for getting rid of code formatting and reduce the development time for most used programming languages. I have been using it for a long time and I really liked it. Once you start using it you'll definitely liked it. Hope you learn something new today😀.
Please follow me on Twitter for more updates regarding the programming cool stuff😄. Have a great day.