# "prettier" code formatting

**URL:** <https://talk.observablehq.com/t/prettier-code-formatting/365>\
**Category:** Uncategorized\
**Created:** [February 17, 2018, 6:59pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365 "2018-02-17T18:59:12Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![forresto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/forresto/32/183_2.png) [@forresto](https://talk.observablehq.com/u/forresto)\
**Post date:** [February 17, 2018, 6:59pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/1 "2018-02-17T18:59:12Z")

</div>

One thing that I miss from working in my own editor is [`prettier`](https://www.npmjs.com/package/prettier) formatting on save. I know Observable editor won’t have every code editor feature available, but this could be a nice option.

(I bet this could be done as a user-script plugin, hooked into shift+enter.)

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [February 17, 2018, 7:03pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/2 "2018-02-17T19:03:32Z")

</div>

😉 We’re on the same wavelength, prettier/auto-formatting has been on the issue tracker for a while, and I’ve been meaning to take the time to implement the Observable-specific code that’d be necessary to make it work. I definitely want this too (the Observable web application uses Prettier, etc.).

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [June 19, 2018, 6:14pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/3 "2018-06-19T18:14:43Z")

</div>

✨ **Update: Prettier-powered autoformatting is now available to folks to test.** ✨

1. Open your browser console
2. `localStorage.tryPrettier = true`
3. Evaluate cells with Shift-Enter or by clicking the ▶ button, and they’ll be formatted.

Let us know what you think, and if you run into any issues using this beta feature! you can turn it off again by running `localStorage.removeItem('tryPrettier')`.

 ![prettier](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/3d113147c0204b8b9680503f7d4bd81b7f65cd22.gif)

---

<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:** [June 19, 2018, 8:38pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/4 "2018-06-19T20:38:10Z")

</div>

![](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/00bd3accd8f85a7a501acc000ff489bee97e6ce8.jpg)

---

<div class="post-metadata">

**Author:** ![shaunlebron](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shaunlebron/32/81_2.png) [@shaunlebron](https://talk.observablehq.com/u/shaunlebron)\
**Post date:** [June 20, 2018, 3:06am UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/5 "2018-06-20T03:06:23Z")

</div>

like it! curious though—how are you using prettier on the custom syntax? e.g.:

```auto
foo = {
  return 1;
}

```

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [June 20, 2018, 5:36am UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/6 "2018-06-20T05:36:57Z")

</div>

It uses a pinch of custom code expressed, mostly, as a [parser plugin](https://prettier.io/docs/en/plugins.html). The small additions to JavaScript that we represent as new node types in most of our code (like ViewExpression for `viewof`), I’m representing them with an equivalent vanilla-JavaScript AST, like a funky Identifier node with a space in it - `viewof a`.

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [June 20, 2018, 6:04am UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/7 "2018-06-20T06:04:14Z")

</div>

Will this remain optional? Personally I don’t want it a lot of the time, but sometimes it could be nice (e.g. when borrowing someone else’s code where I don’t like their formatting choices).

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [June 20, 2018, 4:35pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/8 "2018-06-20T16:35:37Z")

</div>

Yep, using prettier will continue to be optional - once we’re confident that it works as desired, choosing whether or not to use it will be one of the first settings in user settings.

---

<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:** [June 20, 2018, 8:00pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/9 "2018-06-20T20:00:26Z")

</div>

```auto
z = 10 // super comment

```

my super comment got eaten by prettier

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [June 20, 2018, 9:24pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/10 "2018-06-20T21:24:38Z")

</div>

~~Good catch! That variety of AST doesn’t want to include comments… will find a fix.~~

Found a fix - that type of comment will now survive the prettification unscathed.

---

<div class="post-metadata">

**Author:** ![jamesleesaunders](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jamesleesaunders/32/762_2.png) [@jamesleesaunders](https://talk.observablehq.com/u/jamesleesaunders)\
**Post date:** [June 21, 2018, 6:57pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/11 "2018-06-21T18:57:22Z")

</div>

Brilliant! Thanks! So much better with auto prettyfier / auto indentation! Well done guys!

When will this make its way out of beta and into being a production option (on my default)? 🙂

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [June 29, 2018, 10:39pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/12 "2018-06-29T22:39:14Z")

</div>

Pretty soon! Mostly, it’ll be our first user setting, so… we need to build a setting interface so we can add the checkbox for prettier 🙂

---

<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:** [September 15, 2018, 11:42am UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/13 "2018-09-15T11:42:28Z")

</div>

> [@tom](#):
>
> localStorage.tryPrettier = true

in Brave.app this results in an error:

```auto
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at <anonymous>:1:1
(anonymous) @ VM388:1 

```

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [September 15, 2018, 4:11pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/14 "2018-09-15T16:11:15Z")

</div>

If you get a security error using localStorage in your browser, you’ll need to modify your browser settings to enable localStorage (either globally or specifically on Observable).

---

<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:** [September 15, 2018, 4:48pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/15 "2018-09-15T16:48:18Z")

</div>

After deselecting the “block phishing/malware” option in Brave I was able to set the localStorage option.

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [September 17, 2018, 3:27pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/16 "2018-09-17T15:27:01Z")

</div>

Will prettier indent .enter() and/or .data()?

---

<div class="post-metadata">

**Author:** ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)\
**Post date:** [September 17, 2018, 3:29pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/17 "2018-09-17T15:29:25Z")

</div>

can’t have both, @Fil 🤣🤣🤣

---

<div class="post-metadata">

**Author:** ![tau](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tau/32/1038_2.png) [@tau](https://talk.observablehq.com/u/tau)\
**Post date:** [September 25, 2018, 9:34pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/18 "2018-09-25T21:34:09Z")

</div>

So glad I found this thread.  
Really improved the experience (I was suprised that this is even possible).  
Just as an idea for the far future, it would be really nice to configure the settings for prettier.

---

<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:** [March 20, 2019, 6:54am UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/19 "2019-03-20T06:54:01Z")

</div>

A bookmarklet to toggle the option

> **[Prettier Observable Bookmarklet](https://observablehq.com/@fil/prettier-observable-bookmarklet)**
>
> An Observable notebook by Fil.

---

<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:** [May 23, 2019, 3:40pm UTC](https://talk.observablehq.com/t/prettier-code-formatting/365/20 "2019-05-23T15:40:45Z")

</div>

Overall, I love having prettier reformat 99% of my stuff. But sometimes you’d want to avoid it, like when your colleagues don’t like it, on on some cells that, for example, contain data.

Is there a way we could invoke it with a keyboard shortcut (even a function key) instead of the current method (typing stuff in the console or using the bookmarklet)? (I don’t mind if it’s a browser add-on.)

[Next page](https://talk.observablehq.com/t/prettier-code-formatting/365.md?page=2)