Terug naar overzicht

Prettier; code formatting made easy

Recently I found myself in a discussion with a fellow colleague about where to place the brackets for a function. Me, I like to open the brackets right after the function declaration (K&R style, also known as Egyptian brackets), while he was more fond of opening the brackets below the function declaration (Allman style). This got me thinking about whether there was a tool which would allow people to code in their own style, but formats everything according to an agreed format before pushing back to the shared code base. This way no more time is wasted simply by changing code format after a code review. Allow me to introduce you to Prettier.

MG 5943

What is does

Prettier is an opinionated code formatter supporting a wide variety of languages. It removes all original styling and reprints it from scratch according to a predefined format. Take the following example, all three functions return the same thing, however all are written in their own style.

Image4 1

With prettier, all these functions will be formatted identically after saving our file (according to how you’ve installed Prettier). This allows users to code in their preferred format, and only format the code when it is being saved or before pushing it to git.

Image1

How to install

There are many ways how to integrate Prettier into your project. Numerous editors already have a plugin for it; Webstorm, Visual Code and Atom are just a few of them. However you also have the option of invoking it in a pre-commit hook or in CI environments.
Installation is easy via yarn or npm, for more information check out the documentation, or this blogpost explaining everything to the fullest. Myself, I like to use it as a file watcher, meaning it formats after hitting save.

Advantages

The main advantage of using a tool like Prettier is the fact that it removes the burden of building and enforcing a style guide from the team and instead leaving it to a tool. It often happens code reviews take longer because of stylistic issues.
It also gives the developer the freedom on focussing on the code instead of losing time with formatting or searching for that one line where you forgot to place a semicolon.

Another advantage is when people join the team they don’t have to spend tons of time learning or adapting the team’s coding style. They’ll learn it on the fly once prettier steps in to format their code. This doesn’t mean they don’t have to pay attention to it, because if they don’t pair programming could become more difficult. Prettier is basically someone who reviews your code for stylistic errors before you sharing it with the team.

Does prettier substitute TSLint

Going back to the first code example, we could argue that TSLint would also complain about the code formatting. and that most editors have a ‘format file’ shortcut in order to fix this. However if we do this we can see that there are still differences amongst different editors?, even though TSLint is not complaining anymore. So we still need a tool to fix formatting completely.

Image3 3
Image2 5

A common misconception is that Prettier can replace a linter like TSLint. This is not the case! Yes Prettier can replace some of its rules, but it can’t and should never replace TSLint entirely. However when using both it’s important to set them up properly, and most importantly make sure they don’t have the same rules or contradictory rules.

There are a lot of linting rules that detect anti-patterns and potential mistakes. These are the best kind of rules, it’s like there’s someone constantly reviewing your code and it’s awesome!

Image5

That said we should use Prettier for code formatting and TSLint for everything else. It’s a powerful partnership that can contribute to a high quality code.

Conclusion

After using Prettier and all of its benefits I must say I’m in love with it. Not having to think about how to format code is a great feeling. And you don’t know how great it is till you’re using it. It still has some flaws, for example the fact that it’s heavily opinionated, meaning there are not a lot of settings to mess around with, you agree on following Facebook’s prescribed style guide. You could write the most dirty one-liner and it would still format it like a pro, even adding semicolons where you forgot to put em. The language support is also great and they keep on adding new languages on a regular basis. If you have not tried it I highly suggest giving it a shot!

Deze website maakt gebruik van cookies om ervoor te zorgen dat u de beste surfervaring op onze website krijgt. Meer info