Making Your Code Prettier

With recent dives into javascript and reactjs, I’ve spent some time looking at extensions. And that is because they are so very useful when I worked with ruby and my last extension dealing with snippets was so helpful, I decided to do another deep dive for another. Thus I came across “Prettier”.

Prettier is an extension that is called an “opinionated code formatter” which has some useful defaults to ensure similar formatting with your code. And when dealing with lines after lines of code it is fairly easy to lose track of that random div or curly bracket.

so there can be a mess like this

but prettier automatically cleans it up to look like this

Simple matter is that a clean looking code helps everyone involved, helps find that random parenthesis, missing tag somewhere or just straight up look clean without much extra work.

There is one small caveat when installing however in that you have to enable it’s editing on save after you download it.

Search “Format On Save” in your “Settings”

There are much more functionality to the extension that I have not touched yet. However at the moment, just cleaning up the appearances of my code with proper indentations has been more than worth finding this extension.