3 reasons to use Prettier for code formatting

Introduction

If you’re a developer, you know how important it is to keep your code clean, organized, and easy to read. That’s where Prettier comes in. Prettier is a code formatting tool that helps you automatically format your code, ensuring that it is consistently styled and easy to read.

Prettier does what, exactly, and why should you utilise it? We’ll look at 5 reasons why Prettier is a useful tool for any developer in this blog article.

Here is a little illustration of Prettier in use. Let’s say you have the code block shown below:

const foo = (a,b) => {
  if (a > b) {
    return a
  }
  else {
    return b
  }
}

This code might be good to you without Prettier, but another developer on your team might want to add spaces between the parentheses and the curly braces:

const foo = ( a, b ) => {
  if ( a > b ) {
    return a;
  } else {
    return b;
  }
};

It may be more difficult for team members to read and comprehend each other’s code when there is this kind of consistency. You can establish a single set of formatting guidelines with Prettier, and those guidelines will be followed uniformly throughout your whole codebase. Here is how the same piece of code would appear after being processed by Prettier:

const foo = (a, b) => {
  if (a > b) {
    return a;
  } else {
    return b;
  }
};

As you can see, Prettier assists you in keeping your coding consistent, which can make it simpler for your team to collaborate and for new engineers to enter the scene and grasp your codebase.

Reason #1 Consistency

Prettier’s ability to provide consistency in code formatting across a team or project is one of its key advantages. Indentation, space, and punctuation are a few examples of the formatting preferences that many developers could have, as we saw in the beginning. The codebase may become inconsistent as a result, making it more challenging for team members to read and comprehend one another’s code.

Prettier addresses this issue by automatically formatting your code in accordance with a predetermined set of guidelines. Prettier’s configuration file allows you to modify these guidelines and establish team-wide formatting guidelines. You can tell Prettier, for instance, that a sentence should always conclude with a semicolon or that it should always use two spaces for indentation.

Here’s what the configuration file might look like:

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

With this configuration file, Prettier will use 2 spaces for indentation, include semicolons at the end of statements, and use single quotes for strings.

No matter who produces your code, you can guarantee that it is formatted consistently by defining these guidelines in the configuration file. This can save time that would otherwise be required for manual code formatting while also making it much simpler for team members to read and comprehend each other’s code.

Reason #2 Time saving

You may save a tonne of time and work by using Prettier, which is one of its main advantages. Working on big or complicated codebases can make formatting code a time-consuming and difficult chore. With the help of Prettier, you may format your code with only one click or command.

For instance, formatting code with Prettier and a code editor like Visual Studio Code is as simple as selecting the code you wish to format and pressing “Shift + Alt + F.” The remainder will be handled by Prettier, who will make sure that your code is consistently formatted and simple to read.

Here’s an example of how Prettier can save time by automatically formatting code:

const foo = (a, b) => {
  if (a > b) {
    return a;
  } else {
    return b;
  }
};

Without Prettier, you might spend time manually formatting this code to make it more readable, like so:

const foo = (a, b) => {
  if (a > b) {
    return a;
  } 
  else {
    return b;
  }
};

But with Prettier, you can format this code with a single click or command, saving you the time and effort of manual formatting.

Prettier automates formatting, which not only saves time but also lowers the possibility of mistakes or inconsistencies that could happen with manual formatting. In the long term, this can save you even more time because you won’t have to go back and correct errors or inconsistencies that snuck through.

Reason #3 Improved readability

Utilizing Prettier also has the advantage of enhancing the readability of your code. Prettier can make it simpler for you and other developers to read and comprehend your code by regularly enforcing formatting requirements. This is particularly helpful for large or complex codebases where it might be challenging to keep track of what’s happening due to the sheer volume of code.

For example, consider the following block of code:

function addTwoNumbers(a,b) {
  return a+b
}

This code is functional, but it’s not very easy to read. With Prettier, you can automatically format it like this:

function addTwoNumbers(a, b) {
  return a + b;
}

As you can see, the formatted version of the code is much easier to read. The indentation and spacing make it clear which lines of code belong to the function, and the punctuation helps to make the code more readable.

The formatting standards in Prettier can also make your code more unified, which will make it easier to read. It will be simpler for other developers to read your code, for instance, if you consistently use two spaces for indentation. This is because they won’t have to adjust to various indentation styles as they move from one area of the codebase to another.

Conclusion

In conclusion, Prettier is a useful tool for any developer trying to increase the coherence, clarity, and effectiveness of their code. For large or complex codebases, its capacity to automatically format code in accordance with a set of predetermined standards helps ensure that your code is consistently styled and simple to understand. Prettier’s connection with code editors and other tools can speed up development while also automating the formatting process to save time and effort.

We urge you to use Prettier in your own projects if you haven’t already if you haven’t tried it. We believe it will be a useful addition to your toolbox.

Don’t Miss my upcoming content and guides:

Get an email whenever Nic Chong publishes.

If you have any questions, I am here to help, waiting for you in the comments section :)