"prettier" code formatting

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

  1. Open your browser console
  2. localStorage.tryPrettier = true
  3. Evaluate cells with Shift-Enter or by clicking the :arrow_forward: 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').



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

foo = {
  return 1;

It uses a pinch of custom code expressed, mostly, as a parser plugin. 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.

1 Like

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).

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.

z = 10 // super comment

my super comment got eaten by prettier

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.

1 Like

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)? :slight_smile:

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 :slight_smile:

1 Like

in Brave.app this results in an error:

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

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).

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

1 Like

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

can’t have both, @Fil :rofl::rofl::rofl:

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.

1 Like

A bookmarklet to toggle the option


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.)


A possibility would be to set prettier on the notebook rather than as a global setting.

@tom We’re discussing “Observer’s not JavaScript” here Observable is not JavaScript! Documentation? … and it occurs to me that your parsing would touch of most of these JS differences.