Prettier — The Best VS Code Extension for Frontend Devs

I’m the kind of person that is easily distracted. And when I’m working on a project in VS Code ill-formatted, misaligned, and mixed tab/spaced code is a massive distraction to me. But, consistently typing beautifully formatted code the very first time I type on my keyboard is just not realistic. Going back every couple of lines of code to fix my mistakes shifts my mind from thinking about coding logic to typing administration. Anyone else aggressively nodding their head in agreement with me?

Well, I have a solution for you!!!!!

What is Prettier?

If you use any of the following programming languages then you should be using Prettier:

JavaScript · TypeScript · Flow · JSX · JSON · CSS · SCSS · Less · HTML · Vue · Angular · GraphQL · Markdown · YAML

So, what is Prettier? It’s an extension for VS Code that formats your code according to a set of rules. Whenever your file saves, the Prettier extension activates and snaps your code into place making your file easier to read due to the consistent formatting.

Sound like a good idea, but you don’t need this for every project? No worries! You can set the scope of Prettier’s application on a file by file basis. You can even customize the formatting rules. If you prefer to indent with 4 spaces versus a tab you can set Prettier accordingly.

I’ve used Prettier since I was a baby coder printing my first

console.log(“Hello, world!”);

to the console. It is by far my most used and most loved VS Code extension.

Photo by Florian Olivo on Unsplash

Thanks for reading! My name is Halee Pagel (rhymes with Cali Bagel) and I’m a software engineer in Tokyo, Japan. You can find me on twitter which I mostly use for liking tech memes and MLB updates. ✌️