Prettier, for React Native
Let the code format itself
A while back, I wrote an article about setting up VSCode to develop React Native projects— in its first section, I briefly listed some of the fundamental tools needed to ensure a smooth writing code experience, basically without explaining what Flow, ESLint or Prettier were.
But I always had the feeling that one day I’d probably have to get back and explore them: that background feeling pushed me to seek confirmation in the React Native Community, over at Facebook:
It was quite clear that an in-depth explanation of Prettier could be helpful: being it one of the best tools your IDE could integrate, it’s a no brainer for me to try to answer the most voted option in the poll:
“What is Prettier?”
Plain and simple, prettier is a formatter that, when activated, will modify your code in order to keep its appearance consistent. In GIF language, it means this:
Pretty cool, uh?
Why would you need a tool like this, you may ask? Well, since you can actually have it “clean up” your code on every save, the main advantage is surely consistency: your code will always follow the same rules, every file will be readable in the same way, and you won’t waste any more time to manually formatting that line because ESLint wants you to.
You will be free to simply write your code, and then automatically place itself in the proper spot. As a few devs wrote:
It literally liberates you from the hassle of formatting code: and if you are like me, that was probably quite the amount of time (🤓)… you can now spend making your React Native app even better!
So, how do you set it up for VSCode?
First thing first, you need to download the Prettier extension for VSCode; once that’s installed, to have it format your code whenever you save you need to modify your editor preferences.
To do that it’s surely simple, but since we are React Native developers and surely we have already an ESLint configuration helping out, we need to add another line to the editor preferences:
As you may have understood by now, prettier is smart enough to look at the ESLint rules we setup and format our code accordingly; this feature was the one that, in fact, completely made me fall in love with the tool.
By simply sharing the .eslintrc file with your team, you will automagically be assured that everyone will output the same formatting — which is just mind blowing!
So, what are you waiting for? 😉
I really hope this few lines may have helped you out, if you face any issue feel free to take a peek at this repo of mine, on which I have Eslint+Flow+Prettier working side-by-side 🤓
As always, any feedback is appreciated, so feel free to comment down here or reach out on twitter — and, as always,
