Why you should enforce Dangling Commas for Multiline Statements

We all have different opinions on what code should look like. Most of the time it’s a matter of preference based on good arguments. When it comes to dangling commas I noticed most people didn’t like them until they understood the benefits. I didn’t either, until recently …

Before we dig into the benefits let’s briefly explore what I mean with dangling commas.

Code without dangling commas:

const fruits = [
  'apples',
  'banana' // <- no comma before the closing bracket
];const godzilla = {
  teeth: 213,
  kind: 'giant monster' // <- no comma before the closing brace
};

Code with dangling commas:

const fruits = [
  'apples',
  'banana', // <- comma before the closing bracket
];const godzilla = {
  teeth: 213,
  kind: 'giant monster', // <- comma before the closing brace
};

Benefits

At the first glance, it might look a bit weird. Let’s dig into it and find out why so many people use dangling commas.🤓

1. Clean Diffs

Clean diffs become increasingly more important as your codebase & team grows. Especially while reviewing Pull-Requests.

We want to add an entry to an array.

With the dangling comma only the new entry is visible in the diff.

2. Easier Code-Manipulations

Goal: Copy the line of the last entry & paste it to any position except the last in the target object/array.

With dangling commas: Easy, no trouble here … 👌

Without dangling commas: Annoyingly you need to remove the comma on the pasted line and remove the comma on the second last line of the original object/array.

As you can see dangling commas make your life easier. I need to point out that this is only one of a couple of workflow that become simpler. 😃

Why only Multiline Statements?

In the title I explicitly mentioned multiline statements since both of the benefits don’t apply to one-line definitions of objects & arrays and prefer to not have them in one-lines.

// no comma before the closing bracket
const fuits = ['apple', 'pear'];

Enforce it with Linting

I highly recommend to lint your code as it helps you to detect mistakes early on and keep the entire codebase in a consistent style. Personally, I prefer ESLint for JavaScript.

Fortunately ESLint has the comma-dangle rule which allows you to enforce dangling commas for multiline statements.

comma-dangle: “always-multiline”

With Airbnb’s ESLint configuration you get this rule out of the box.

What about IE8?

IE8 and below will throw an error when it encounters a dangling comma. When using the JavaScript compiler Babel you don’t have to worry about it. Babel removes the trailing comma.

Conclusion

I wouldn’t pick a fight over enforcing dangling commas. Still I noticed most developers care about these little details and it’s fairly easy to convince your colleagues by explaining the benefits of clean diffs & easier code-manipulations.

Thanks to Max Stoiber for proof-reading.

This is the first post of a series of lessons learned being a Front-end developer. If you are interested to learn more follow me on Medium or Twitter. 🙌