DEV Community

Cover image for Prettier and the Beauty of Opinionated Code Formatters

Prettier and the Beauty of Opinionated Code Formatters

Gabriel Abud on June 24, 2020

I love Prettier. It's probably the single tool that has had the biggest effect on my productivity as a programmer (after Git, maybe). For those o...
Collapse
 
jrogers8835 profile image
jrogers8835

Our team is so depressed right now. We love our prettier but our company software quality scans are also formatting opinionated... with different opinions. We can get them synced up, but what a drag. 😬

Collapse
 
g_abud profile image
Gabriel Abud

What kind of opinions? Conflicting Prettier ones or ESLint opinions?

Collapse
 
jrogers8835 profile image
jrogers8835

I haven't reviewed the differences personally, (my life is mostly meetings these days) but from my understanding it's little things like the scan considers trailing commas a violation but our prettier adds them.

Thread Thread
 
g_abud profile image
Gabriel Abud

Yeah that sounds horrible. Maybe you can make the quality scan ignore your prettier code? Having conflicting formatters is about as bad as having no formatters.

Thread Thread
 
jrogers8835 profile image
jrogers8835

Yeah we need to talk to the quality team and see if rules can be set by team instead of company wide (not a small company) otherwise we'll have to change our prettier rules to match the scans 😒

Thread Thread
 
mxldevs profile image
MxL Devs

How about something crazy like having your own team's prettier-formatted code as the dev base, while pushing it to the quality team's spec is the "production" version lol

I worked on some codebase where the target platform only supported ES5 but others wanted to use ES6 so they were transpiling their code from ES6 to ES5 for "production" purposes.

Collapse
 
simonmayerhofer profile image
Simon Mayerhofer • Edited

Eslint has a autofix option as well. In my opinion they should definitely used together. Even though prettier has some functionality eslint also checks prettier is a formatter and eslint a linting tool. 2 different things.

Collapse
 
robole profile image
Rob OLeary

StandardJS is an opinionated linter and formatter (no config), it's aim is to solve the issue you're talking about, but still have linting. I use eslint + prettier atm, and am keen to try out StandardJS to have a single source for both of these functions, and avoid any conflicts

Collapse
 
g_abud profile image
Gabriel Abud

This looks really cool, thanks for sharing!

Collapse
 
jankapunkt profile image
Jan Küster

I use standardJs, mainly because it was the best opinionated formatter + linter I found at the time. If I would search now I think I would use prettier, too. But I got so comfy with standard that I mostly write this style by default.

It's just a hard one to convince others that the semicolon is in most (unambiguous) situations just not necessary :-D

Collapse
 
danielkun profile image
Daniel Albuschat

Good post, and I totally agree! I've seen real, deep and long-lasting team conflicts emerge from code formatting. What a waste of mental energy. I double down on what you say and suggest every team use an auto-prettier and never argue about it again.
More energy for solving customer problems!

Collapse
 
eljayadobe profile image
Eljay-Adobe

I use JavaScript Standard Style.

My project uses quite a few languages. C++ is the most prevalent language. Unfortunately, C++ formatting is a favorite bikeshedding topic. We had joked that the only solution was just to use all the styles to make everyone happy.

void Foo(bool condition) {
{  {
    if (condition) {
    {   {
        std::cout << "The condition is true.\n";
    }}  } else {
    {   {
        std::cout << "The condition is false.\n";
    }}  }
}}  }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
g_abud profile image
Gabriel Abud

Is there not a great alternative for C++? github.com/rishirdua/awesome-code-... lists a couple but they don't look all that promising. Prettier is probably going to be more focused on web development so I doubt they'll be adding C++ any time soon.

It's been so long since I've done any C++ but I'm surprised there isn't anything good out there after all these years. Could be a good project idea.

Collapse
 
eljayadobe profile image
Eljay-Adobe

There is a tool that we're using called clang-format. It does a respectable job at formatting. The problem isn't having a good formatting tool, the problem is reaching a consensus as to what the formatting should be.

All I know, it won't be my preferred formatting style. Because my C++ formatting style is very non-mainstream.

Thread Thread
 
fredericbonnet profile image
Frédéric Bonnet

Clang-format works great with VScode BTW. It's included in the standard C/C++ extension with sensible default settings although you can use your own or reuse popular styles (e.g. LLVM). I use it on all my projects and it made my life so much easier, formatting C code manually is such a PITA.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Can't stand them TBH - I disagree with so much of the formatting that is apparently 'the best way to do it' and absolutely hate the way I do things being trashed by a code formatter.

Would be nice to have a system whereby the 'main' stored source would be standardised by a formatter but a copy in the individual's own style would be what they see when they edit. Not entirely sure how this would work in practice though

Coding is very much an art form, and artists have their own styles

Collapse
 
g_abud profile image
Gabriel Abud • Edited

I agree somewhat if you write code for yourself, but when you work on a team these stylistic preferences becomes detrimental. It might be an art form for you but when people are having to look at 5 different art forms in the same codebase, it's not easy. The difference between traditional art (thinking like painting) and code is that 99% of the time code is made as part of a team. There are sacrifices you have to make in any team, musicians all agree on the same tempo and key when playing in a band.

There's still room for artistic expression, but you can show that in the implementation of the code itself, not the style.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Hence the system idea. You'd only ever work on a version styled your way. You would of course have to restyle any bits merged in to match your own taste.

I agree that most artistry is exhibited in the way the code actually functions, but the way it's presented can greatly assist you if you have developed your own ways to do it that gel better with your organisational thought processes.

Collapse
 
g_abud profile image
Gabriel Abud

Well put!

 
terkwood profile image
Felix Terkhorn

Thanks for posting

Collapse
 
canaris profile image
DET171

The thing is I like ESLint just because of how configurable it is, but anyways kudos for the nice article!