Why robots have to format the code for us

I used to think that having an individual coding style is good for a programmer. This shows that you are an experienced developer who knows how good code should look.

In college, my teachers said that they understand when my classmates use my code in their work because of the particular coding style. Now I think they understood this because my code was at least somehow formatted, while others had complete confusion.
')
Since then, I have spent a lot of time talking about coding style and choosing tools for its implementation. It is time to change something.

A few examples

After reading “ The Programmers' Stone ”, for a long time I put brackets like this:

if (food === 'pizza') { alert('Pizza ;-)'); } else { alert('Not pizza ;-('); } 

But then I realized that I’m probably the only one among users who do that. All others adhere to this style:

 if (food === 'pizza') { alert('Pizza ;-)'); } else { alert('Not pizza ;-('); } 

Or this

 if (food === 'pizza') { alert('Pizza ;-)'); } else { alert('Not pizza ;-('); } 

So I changed my style to the above.

I really like to use this style to create chains:

 function foo(items) { return items .filter(item => item.checked) .map(item => item.value) ; } 

In my opinion, this also contributes to refactoring in case of moving commas :

 const food = [ 'pizza', 'burger', 'pasta', ] 

But, probably, in the use of this style, I am even more lonely than in the case of brackets.

No one will ever send me a code using this style for verification, no code quality control tool will force them to do it. So I had to stop using it in order to be closer to the real world.

There is something else that no one else does. I always use a double space before the comment at the end of the line.

 const volume = 200; // ml 

I thought it improved the readability of the code. But, in fact, this makes the code base inconsistent, because the other developers put only one space.

What JavaScript developers are doing

Unfortunately, JavaScript does not have an official coding style. There are several popular code writing styles , such as Airbnb or Standard . You can use them to make your code look familiar to other developers.

You can use ESLint to set the coding style and even auto-format the code. But this will not make your code base 100% consistent. ESLint c configuration Airbnb order only my first first example and create contradictions in the other two.

What should JavaScript developers do

Some languages ​​have strict coding styles as well as code formatting tools. Thus, developers do not waste time on coding style discourse. Take a look at Refmt for Reason or Rustfmt for Rust.

It seems that JavaScript finally has a solution to this problem. New tool called Prettier reformats your code in accordance with its rules. It does not take into account the original code at all.

Let's try out the work of Prettier with my examples:

 if (food === 'pizza') { alert('Pizza ;-)'); } else { alert('Not pizza ;-('); } function foo(items) { return items.filter(item => item.checked).map(item => item.value); } const volume = 200; // ml 

You can challenge this style. I, for example, do not like the placement of else ; doubts are also caused by the writing of a functional chain in one line. However, I see tremendous advantages in implementing Prettier:

• there is nothing even to discuss - Prettier has several options;
• no disputes about specific rules if you work in a team;
• Your partners do not need to learn the coding style of your project;
• There is no need to correct style errors reported by ESLint;
• It is possible to set the preservation of auto format

Conclusion

Prettier is already being used by some popular projects , such as React or Babel. And I begin to remake my projects , moving away from my usual coding style, in favor of Prettier. I would recommend using it instead of the Airbnb coding style.

At the beginning of my work with Prettier, there were many moments when I thought “yuck, it's terrible”. But when I think I would need, for example, to manually format the JSX code from a single-line view into a multi-line, if I add another prop and it does not fit into one line - then I understand that it is definitely worth it.



Prettier formats your code when you save the file.

Read how to implement Prettier in your project.

PS Look at my new tool , which will simplify adding ESLint, Prettier and other tools to your project, as well as storing and synchronizing their settings.

---

The translation was made with the support of the company EDISON Software , which is professionally engaged in the development of websites on Amiro.CMS and WordPress and for large customers.