/ Faster React Native development trick #2: use Prettier

Faster React Native development trick #2: use Prettier

Tom Riglar

In part 2, Tom explores how we can make the computer work for us to save development time and reduce app development costs.


Tue Feb 18 2020 - 3 min read

In part 1 one we learned that cutting corners does not work in software development. However, by using discipline, developers can leverage more advanced tools such as TypeScript to speed up app creation.

As more intelligent computer assistance comes into being, it will amplify human progress. — Paul Allen, Founder of Microsoft

Great quote, Paul — so can ‘computer assistance’ help us develop React Native apps quicker?

Absolutely. Especially in code formatting.

I’m talking about adding spaces and syntax to make software look as beautiful on the inside as it is on the outside.

If you’re not sure why this is important, let me explain: changing code is like carrying out a surgical operation.

An operating theatre is organised and clean. The success of the operation depends on each piece of equipment and each member of the surgical staff being at the right place at the right time.

Badly formatted vs well formatted code

In the example above, the code on the right hand side is easy to read and understand, just like a modern hospital. This means we can quickly get our whereabouts, make amendments and hopefully avoid a tragedy at the operating table.

The code on the left is a real mess. Trying to make changes here could easily introduce bugs into our software.

But doesn’t it take ages to do all the formatting?

If we do it manually… yes.

Manually formatting code

But if we do it with ‘computer assistance’ — definitely not!

Formatting code using Prettier

The code above is formatted instantly using Prettier.

Prettier uses a set of rules to analyse code. It then automatically adds whitespace and line breaks to make it much… prettier.

At Morrow, we run it whenever we save a file. So it’s instant.

That’s quick! But what’s the catch?

It all comes back to discipline. Prettier is a great tool, but requires professionalism on the part of the developer. Here’s why:

  • Prettier needs to be configured to match the standards of the project
  • This configuration needs to be used by every developer that works on the project
  • Each developer needs to use the formatter consistently

One sloppy developer ruins the experience for everyone and can cause regular conflicts in the code.

This happened to me at a job a couple of years ago. Half the team used Prettier, the other half couldn’t be bothered to set it up. As a result, every time a Prettier-enabled developer edited a file last changed by a lazy developer, it formatted the whole file. This made it impossible to track the actual change made.

At Morrow we use Prettier every day to speed up app development for our clients. If you would like to find out more about how to increase speed without cutting corners on your project, please reach out.

Copyright © 2021 Morrow Digital Ltd | Registered in England #11169148

Privacy Policy