My Prettier preferences and why

Over the years my own JavaScript code-formatting preferences have evolved but they don’t match Prettier’s defaults. I wondered whether I’d notice a difference so I started a recent new project with Prettier’s — and the community’s — defaults so I could find out.

After a few weeks I’m surprised (and more than a little pleased) to find that I’ve really noticed the difference and have switched back to my old, better, preferences. Each of the settings makes a noticeable difference when I’m writing code so here they are and why.

Single quotes (--single-quote)

Prettier makes quotes consistent either way so what’s the difference whether you write ' or "? The thing is that in general it’s easier to type a single quote than a double quote — because the former doesn’t require holding shift — and in particular with Vim it’s easier to type ci' (change inside quote) than ci". Simple as that.

Trailing commas (--trailing-comma es5)

Having a trailing comma on the final line of a multi-line object means that adding, removing, or moving entries doesn’t turn me into a comma juggler and force my brain to parse and validate the code. It also results in a cleaner diff so that only a single line is changed.

No semicolon (--no-semi)

This one is surely the most controversial because it involves semicolons. Consider the following:

const fourLetterShoutyWords = aListOfWords
  .map(word => word.toUpperCase())
  .sort()
  .filter(word => word.length === 4);

If I want to move the filter() line above the sort() it’ll take the semicolon with it and I’ll get a file.js|4 col 3| Unexpected token error. But with no semicolons, much like with trailing commas, I’m able to move code around more freely and without having to visually parse and validate the code myself.

Where Prettier makes a huge difference to fans of no semicolons is that old foe of forgetting to put one where it’s definitely necessary. This issue used to be something to fear (though it’s been many years since I last encountered it):

entirelyContrived = 1

(() => entirelyContrived++)()

Oops, what’s the problem: TypeError: 1 is not a function?

With Prettier enforcing no semicolons the reformatted code makes it more visually obvious that you’re actually attempting to call a function 1():

entirelyContrived = 1(() => entirelyContrived++)()

Conclusion

I have no doubt others will disagree with my choices but I’m happy to have found that they work for me and aren’t just subjective.