# Prettier vs Observable

**URL:** <https://talk.observablehq.com/t/prettier-vs-observable/5407>\
**Category:** Feedback\
**Created:** [August 3, 2021, 6:47pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407 "2021-08-03T18:47:52Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![oluckyman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oluckyman/32/918_2.png) [@oluckyman](https://talk.observablehq.com/u/oluckyman)\
**Post date:** [August 3, 2021, 6:47pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/1 "2021-08-03T18:47:52Z")

</div>

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

It’s clear from [💅 Prettier support in Observable](https://talk.observablehq.com/t/prettier-support-in-observable/2350) 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)](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e3a47f19da2615dac3b9a7e7a61db3b0bc31a063.gif)  
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?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 3, 2021, 6:57pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/2 "2021-08-03T18:57:10Z")

</div>

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](https://prettier.io/docs/en/configuration.html).

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [August 3, 2021, 7:21pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/3 "2021-08-03T19:21:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yurivish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/yurivish/32/198_2.png) [@yurivish](https://talk.observablehq.com/u/yurivish)\
**Post date:** [August 3, 2021, 9:06pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/4 "2021-08-03T21:06:47Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 3, 2021, 9:29pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/5 "2021-08-03T21:29:33Z")

</div>

> [@yurivish](#):
>
> 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:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/0/0e0f975581b51435339ca0f24c323672a4174675.png)

It appears that “none” was the old default that was [changed to “es5” in Prettier 2.0](https://prettier.io/docs/en/options.html#trailing-commas). I guess Observable kept the old setting for BC reasons.

---

<div class="post-metadata">

**Author:** ![wiltsecarpenter](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/wiltsecarpenter/32/4175_2.png) [@wiltsecarpenter](https://talk.observablehq.com/u/wiltsecarpenter)\
**Post date:** [August 3, 2021, 9:48pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/6 "2021-08-03T21:48:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 3, 2021, 10:00pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/7 "2021-08-03T22:00:24Z")

</div>

> [@wiltsecarpenter](#):
>
> Prettier has a philosophy of not offering options on their style choices

While Prettier doesn’t add any new options (and [regrets](https://prettier.io/docs/en/option-philosophy.html) adding most of the existing ones), there’s still [quite a few](https://prettier.io/docs/en/options.html) that may be of interest for customization:

- `semi`
- `singleQuote`
- `quoteProps`
- `trailingComma`
- `bracketSpacing`
- `arrowParens`

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [August 5, 2021, 11:33am UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/8 "2021-08-05T11:33:49Z")

</div>

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](https://prettier.io/docs/en/options.html#arrow-function-parentheses)

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

---

<div class="post-metadata">

**Author:** ![oluckyman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oluckyman/32/918_2.png) [@oluckyman](https://talk.observablehq.com/u/oluckyman)\
**Post date:** [August 5, 2021, 12:40pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/9 "2021-08-05T12:40:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![oluckyman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oluckyman/32/918_2.png) [@oluckyman](https://talk.observablehq.com/u/oluckyman)\
**Post date:** [August 5, 2021, 12:43pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/10 "2021-08-05T12:43:45Z")

</div>

Just checked Prettier docs.  
_Arrow function parentheses_ default was changed to `always` in v2.0.0

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/edcfcb27ba8766bcacac2293eec69df9acaf7955.png)

But in the same version `trailingComma` default was changed to `es5`

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/5f5540a5abcda917806f500cd8b4cf6134650c80.png)

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?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 5, 2021, 12:59pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/11 "2021-08-05T12:59:21Z")

</div>

> [@oluckyman](#):
>
> Maybe there is an override in the Observable config somewhere?

Yes, see [my comment](https://talk.observablehq.com/t/prettier-vs-observable/5407/5).

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [September 5, 2021, 10:17am UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/12 "2021-09-05T10:17:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oluckyman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oluckyman/32/918_2.png) [@oluckyman](https://talk.observablehq.com/u/oluckyman)\
**Post date:** [September 5, 2021, 1:13pm UTC](https://talk.observablehq.com/t/prettier-vs-observable/5407/13 "2021-09-05T13:13:51Z")

</div>

[https://github.com/observablehq/feedback/issues/206](https://github.com/observablehq/feedback/issues/206) 👌
