I used to think that programmers have their own unique code style. Because a mature programmer should be clear about what good code should be.

Some examples

Example 1:

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

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

However, I realized that in the front-end community, maybe I was alone. Others write this way:

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

Or like this:

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

So, I changed the style and adopted the last one.

Example 2

When I link multiple methods, I like to write like this:

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

Example 3

After reading Why you should enforce Dangling Commas for Multiline Statements , I realized that the trailing commas is easier to refactor:

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

However, this method of writing is very rare. No one wrote this in the code I reviewed. Therefore, I can only give up this writing and bow to the real world.

Example 4

I still have a habit of being unsocial. I am used to typing 2 spaces before writing code comments at the end of the line:

Const volume = 200 ;   // ml

I think it looks like this. However, this can lead to code inconsistency because others only type a space.

How do JavaScript developers do it?

Unfortunately, JavaScript does not have an official code style. There are some popular code styles in the industry , such as Airbnb and Standard . Using them, the code between team members will be more readable.

You can also use ESLint to unify the style. But it does not guarantee that the code is 100% consistent. For example, ESLint’s Airbnb configuration can only unify the code style of Example 1 , but not the latter two.

What should a JavaScript developer do?

Some languages ​​have very strict code styles and tools are available for uniform style. Therefore, developers do not need to waste time arguing about the pros and cons of the code style. For example, Reason language Refmt , and Rust language Rustfmt .

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

Let’s try the 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' , ]

The code after the Prettier processing is 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" ];

Maybe, you don’t like this style. For example, I don’t like else to put behind the braces, and I don’t like to write all the chained methods on the same line. However, I found that using Prettier has many benefits:

  • There is almost no need to make a decision because Prettier has few configuration options.
  • Team members do not need to argue for the rules.
  • Open source code developers don’t need to learn the code style of the project.
  • There is no need to fix the style issues of the ESLint report.
  • The style can be automatically unified when the file is saved.

in conclusion

Prettier has been adopted by some very popular projects such as React and Babel. For my own projects, I have started to change from my own personal style to Prettier style. I recommend Prettier more than the Airbnb code style.

At the beginning, I would think that the Prettier style is very poor. However, when I found out that I needed to manually adjust the code style, I realized that Prettier was really easy to use.

Prettier can automatically unify styles when saving files:

If you are interested, you can follow this tutorial to configure Prettier .

 

reference:

Original: Why robots should format our code for us

VScode easy to use plugin collection

how do efficient developers personalize vscode plugins andconfigurations?