Different people have different preferences when it comes to coding styles, and there is no absolute right or wrong. But two principles should be true: majority rule; Use tools to unify styles.

  • 原文: Why robots should format our code for us
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

I used to think it was nice for programmers to have their own unique code style. Because a mature programmer should know what good code looks like.

My college professor told me that his students were using my code because my code style was different. I thought about it. Maybe it was because my code was at least stylized and everyone else’s was a mess.

Some examples are

Example 1:

After reading The Programmers’ Stone, I wrote The curly braces like this:

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

However, I realized that I was probably the only one in the front-end community who wrote this. And everyone else wrote:

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

Or this:

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

So I changed my style and went with the last one.

Example 2

When chaining multiple methods together, I like to write:

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

Example 3

Why You should Enforce Commas for Multiline Statements, I realized that trailing Commas are easier to reconstruct:

const food = [
  'pizza'.'burger'.'pasta',]Copy the code

However, this is very rare. No one in the code I’ve reviewed has written that. So I gave it up and bowed to the real world.

Example 4

I also have an unsocial habit. I like to type two Spaces at the end of the line before writing code comments:

const volume = 200;  // ml
Copy the code

I think it’ll look better this way. However, this leads to inconsistent code because others only type a space.

What do JavaScript developers do

Unfortunately, JavaScript has no official code style. There are some popular coding styles in the industry, such as Airbnb and Standard. Using them, the code between team members is much more readable.

You can also use ESLint to unify styles. But it doesn’t guarantee 100% code consistency. For example, ESLint’s Airbnb configuration only matches the code style of Example 1, not the latter two.

What should JavaScript developers do?

Some languages have very strict code styles, and there are tools for unifying styles. As a result, developers don’t need to waste time debating the merits of their code style. For example, Refmt for Reason and Rustfmt for Rust.

Now, JavaScript finally has a solution. There’s a new tool called Prettier that reformats your code using its own rules. No matter what your previous code style was.

Let’s try Prettier.

The input code looks like this:

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

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

const food = [
  'pizza'.'burger'.'pasta',]Copy the code

After Prettier, the code looks like this:

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

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

const food = ["pizza"."burger"."pasta"];
Copy the code

Maybe you don’t like the style. For example, I don’t like else after braces, and I don’t like to write all the chained methods on the same line. But I find there are many benefits to using Prettier:

  • There are few decisions to make because Prettier has few configuration options.
  • Team members don’t have to argue about rules.
  • Open source developers do not need to learn the project’s code style.
  • There is no need to fix style issues reported by ESLint.
  • The style can be automatically unified when saving files.

conclusion

Prettier has been adopted by popular projects like React and Babel. For my own project, I have begun to switch from my own personalization to Prettier altogether. I would recommend Prettier to Airbnb’s code style.

At first, I would think Prettier was really bad. But when I found myself manually tweaking the code style, I realized Prettier really worked pretty well.

Prettier can automatically unify styles when saving a file:

If you are interested in configuring Prettier, follow this tutorial.

About Fundebug

Fundebug focuses on real-time BUG monitoring for JavaScript, wechat applets, wechat games, Alipay applets, React Native, Node.js and Java online applications. Since its launch on November 11, 2016, Fundebug has handled more than 1 billion error events in total, and paid customers include Google, 360, Kingsoft, Minming.com and many other brands. Welcome to try it for free!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2017/10/23/…