Prettier - Best Code Formatter for Javascript, React, Vue, Html, Css
Prettier is the best code formatter for lots of languages like Javascript, React, Vue, Html, Css. With the tools like Eslint you spend a lot of time tuning rules and config files. But Prettier is optionated code formatter which means you can't really configure how it formats the code. And this is it's main benefit. In this video I will guide you through main benefits of Prettier formatter as well as show you how to format your code in editors like visual studio code, Vim or Webstorm.
So basically when we write javascript code we normally use some linting to show us warnings in code.
But the problem is that you need to write lots of rules for linters to configure them properly. For example nowadays eslint is the most popular. The point is however, that there are 2 types of errors - stylistic rules and code quality rules. So stylistic rules are all styling stuff like indentation, spaces, brackets, when you need to write code on new line and so on. Code quality rules are normally rules about how to write code in specific teams. This is fine. We need to do this. But what we can avoid is writing stylistic rules. Because normally we don't case about style if it looks fine and same for every developer.
And this is exactly where Prettier comes into play.
What what is prettier exactly? It's an optionated code formatter. The idea is that you just install it in your editor and every time when you save file your code will be formatted. And it's called optionated because you almost can't configure it.
So what benefits it gives us and why I recommend to use it always?
- It's optionated. You just install it, spend less than a minute for configuring and you are good to go
- You completely stop thinking about code style and focus completely on code. No thoughts like "How to indent this code now so it's more readable"
- It supports lots of languages and not only javascript
I thought really long about cons of Prettier but I don't see any.
So let's install it and configure. Of course you can use it from console to prettify all files in your project for example but normally it's not how we want it to work. We are interested only in prettify on save. For this we need to look on editor interaction tab.
Now it will completely depend on your editor. For example let's take the most popular editor Vs code. You simply need to install a package prettier-vscode and create a config file in root of your project.
In my editor it's already installed so let's create the config file for prettier. Here I have only index.html and main.js. Let's create .prettierrc and add such config.
As you can see there are not a lot of properties to configure prettier. I usually use this config
{
"tabWidth": 2,
"singleQuote": true,
"printWidth": 80,
"bracketSpacing": false,
"semi": false
}
As you can see it's really small. First I what 2 spaces for indentation. Also I prefer single quotes everywhere and no spaces in any brackets like object, destructuring or imports. I also normally don't use semicolon at the end of each line but this is topic for another video.
Now let's restart the editor and check how it works now.
As you can see the code is properly indented on save, spaces are deleted and you should never again thing about indenting you code. And it really saves a lot of time during coding. You just write code and prettier does styling. We also removed discussion about stylistic rules completely from our life.
Now you know how to simplify writing code with Prettier. I'm using Prettier in all projects and it works really well.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
📚 Source code of what we've done