This is the first plugin you’ll be searching for in VS Code’s extensions.
PRETTIER CODE FORMATTER CODE
Open up the Extensions Marketplace in your VS Code window (it’s the little square looking doodad under the debugger).
PRETTIER CODE FORMATTER HOW TO
I’ll show you how to do this too, but before I get there, I need you to download Prettier for VS Code. I don’t have to think about it, I don’t have to set up complicated file watcher tasks, I change one setting in VS Code and it just works. Prettier can be set up to auto-format code on every save. One of the biggest selling points for me? It will keep your code clean and easy to read, and the same across all developers on the team. prettierrc file in a project (though that’s probably a good recommendation for a team of devs working on a codebase). Prettier is made for keeping code formatting consistent, and the VS Code plugin, it will work with or without a.
![prettier code formatter prettier code formatter](https://tech.trivago.com/img/posts/thefirstprettierpluginfortwigishere/prettier-logo.png)
This is only a small fraction of what Prettier cares about, and in VS Code it’s really easy to override any rules that you’re not a fan of, which I’ll get to in a bit.
![prettier code formatter prettier code formatter](https://scotch-res.cloudinary.com/image/upload/v1563847521/avtnv95qbmuzsvsp6wpi.png)
In case you’re not familiar with it - VS Code is the de facto JavaScript IDE today.Īnd for good reason - it’s free, it’s easy to get up and running, and it’s just an absolute pleasure to work with. Right, so let’s get straight to the solutions to your code formatting problems. Today, I’m going to magic away the code inconsistencies of a bunch of different developers with the help of Visual Studio Code, Prettier and ESLint, and leave you with beautiful, uniform code that your development team won’t even have to think about formatting. Not to mention, I hate being that person who makes comments all over a pull request asking for things like that to be cleaned up. This is a recipe for a hard-to-follow codebase, and I don’t know about you, but I find the act of understanding and writing good, functional code hard enough without having to worry about indentation, spacing, keeping track of variables and simple punctuation fixes.
![prettier code formatter prettier code formatter](https://miro.medium.com/max/1104/1*pyjL5iY4fO_bz8XovKHOgQ.png)
And while one dev might indent every line perfectly every time, another dev probably doesn’t care (and knows JavaScript doesn’t care too much either, so s/he can get away with it). Isn’t that painful to look at? Yeah…ĭoes this sound at all familiar to you? Congrats, you’re on a working dev team, and everyone has their own preferences for how they like to code.Īs you might already be able to imagine, what one developer is perfectly fine with (no whitespace anywhere), probably drives another one nuts. This is an example of poorly formatted code. Take this piece of code from a codebase I’m currently working in:
![prettier code formatter prettier code formatter](https://img2020.cnblogs.com/blog/2363212/202106/2363212-20210601164316135-807357114.png)
Code Formatting: It’s Not Just for Sticklers and Grammar Nazis A slight exaggeration, but you get the idea.