🏠 back to Observable

Prettier vs Observable

Prettier is a huge help, but sometimes it works against me because of trailingComma: "none" rule.

It’s clear from 💅 Prettier support in Observable that prettier is on/off feature with one-size-fits-all style.

I agree, in long term, it’s better to get used once and feel at home in any environment.

But Observable is special. It unlocks instant-feedback-loop programming like in worrydream’s dreams. Instant feedback means speed, flow, and visual thinking. It means, commenting a line of code on and off to see how it affects the result is an important part of the workflow. Prettier makes it unreliable sometimes by removing the trailing comma before the commented line:
Untitled (1)
So when you uncomment the line you also have to go up and add the removed comma. You cannot do this without looking into the cell code, so you cannot keep the focus on the result when you’re switching on and off a line of code.

I’m finding myself fighting with commas because I comment and uncomment parts of code to try things. Wondering, what do you guys think? Maybe, if it’s not just me it’s worth considering changing that rule?


It’s Prettier’s default, but personally I also prefer trailing commas.

In a perfect world, Observable users would be able to provide their own Prettier configuration.

If you turn prettier off, you can still call it explicitely with opt-shift-f


I completely agree and also prefer trailing commas. It’s one of the few frequent annoyances in an otherwise excellent editing experience. If there was a way to tweak the Prettier settings with e.g. a user script using the Tapermonkey Chrome extension, I would do it without hesitation, but I wasn’t able to figure out how…

There isn’t, as far as I’m aware:

It appears that “none” was the old default that was changed to “es5” in Prettier 2.0. I guess Observable kept the old setting for BC reasons.


Maybe we could try and figure out a “preserve trailing commas” solution, I’m not sure if the parser leaves enough information to figure that out or not. Prettier has a philosophy of not offering options on their style choices, but this is one of the few cases where there is actually a configuration option.

While Prettier doesn’t add any new options (and regrets adding most of the existing ones), there’s still quite a few that may be of interest for customization:

  • semi
  • singleQuote
  • quoteProps
  • trailingComma
  • bracketSpacing
  • arrowParens

I noticed a change recently (a month or two maybe); what was formatted as d => {} is now formatted as (d) => {}. The rationale is explained here Options · Prettier

For me prettier is such a net win that I’ll accept whatever it does (and get used to it).

Glad to see that Prettier adapts and changes the defaults and Observable picks them up.
Maybe the trailingComma rule will be changed too as dev environments shorten feedback loop and thinking by commenting parts of the code becomes possible not only in Observable.

Just checked Prettier docs.
Arrow function parentheses default was changed to always in v2.0.0

But in the same version trailingComma default was changed to es5

As the doc says, this rule should keep the trailing commas in objects

"es5" - Trailing commas where valid in ES5 (objects, arrays, etc.). No trailing commas in type parameters in TypeScript.

Maybe there is an override in the Observable config somewhere?

Yes, see my comment.


@oluckyman Would you mind creating a feature request in https://github.com/observablehq/feedback/issues?

https://github.com/observablehq/feedback/issues/206 :ok_hand: