In this post you will learn why do we need Prettier, how to configure it by using prettierrc and what is the difference between Eslint and Prettier.

Actually Prettier is one of the tools that I use constantly every single day when I write code. If you do some web development I highly recommend you to install Prettier immediately because it will help you tremendously.

What is Prettier?

So what is Prettier at all?

Prettier is an opinionated code formatter

It actually means that you can't configure it deeply. And it will prettify your code so it will look exactly the same for all members of your team. It doesn't matter if you are working alone or with team Prettier simply saves you lots of time by prettifying your code.

In my editor it doesn't matter how I intend my code, after saving the file it will be formatted by prettier in a certain way.

It doesn't matter at all how some teammates or you will write the code, it will be always formatted correctly.

Here is the most important point why prettier is so popular.

You can't configure it. You just install it and out of the box you get without any configuration your formatting.

This is exactly why Prettier shines in comparison to Eslint. Eslint was created before Prettier but it was not that popular as Prettier exactly because people spent lots of time on custom configuration and every project looked different.

With Prettier your code will always look the same. It doesn't matter who changed the code.

And obviously you can use Prettier from the command line. But you need this usage only if you want to prettify all files in not prettified project.

prettier src --write

But if you simply work on your code, just writing HTML, CSS, Javascript or Typescript (because Prettier supports lots of different languages) you simply need to configure your editor so that when your file is saved, Prettier will run formatting.

Configuration

Now let's look on Prettier configuration. Actually I said that we can't configure Prettier. We can but just a little bit.

We can't configure specific rules inside Prettier. We don't change a way how Prettier formats our code.

To write a config we must a new file .prettierrc. Now inside I want to paste the config that I use for all my projects.

{
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "bracketSpacing": false,
  "semi": false
}

We have here tabWidth which means that it will be prettified to 2 spaces, we are using single quotes for all our strings. printWidth is the maximum width of your line, bracketSpacing removes indentation inside objects and array and semi removes semicolons from the code.

In my projects I never use semicolons. You might like that but in Javascript there are just 3 cases when you code will break without a semicolon.

And typically people do not write that 3 cases. This is why it is totally fine to write Javascript without semicolons.

Also I want to mention printWidth 80 as this is super popular line length. But a lot of people with ultra wide monitors really like to use 120 or more here.

And actually it is a problem because for your eyes and for your brain it is much easier to read a line which is not that long. This is why I highly recommend you to use printWidth 80.

But this are not all rules which exist in Prettier. In the official website you can see all rules. We have 21 rule in total. We can't change here how Prettier will format our code. But realistically you would use 6-7 rules maximum from the list.

Pretier vs Eslint

The next important question is "What is the difference between Prettier and Eslint and do we need both of them or not?". I constantly get this question from my students.

What Eslint can do for us? It formats our code and it check code quality. With Eslint we can define rules regarding our syntax. For example we should not write console.log or we must use const and let instead of var.

Inside Prettier we just have formatting rules. But most importantly here is that we can't configure with rules how our code is prettified. Prettier simply does it and we can't configure it. This is why it is so easy to use it.

Bonus

And here is a super important bonus for you that you must know and leverage.

Prettier can help you to check of your code is valid.

When we write some code we typically save the file really often and our code is prettified every single time. And what is really cool is that you stop thinking about indentation. You are just fully focused on the code.

But the is one more thing here. At the moment when we save the file if our code was not prettified it means that it is invalid and Prettier can't format it. This is important to remember. It helps you to directly see that you missed a bracket or a symbol to make your code valid.

So you don't need Typescript or some validation to understand that you have a problem in your code. And actually if you are interested to learn how you can copy nested objects in Javascript make sure to check this post also.