đź’… Prettier support in Observable

prettier-2

Starting today, you can enable Prettier-powered smart formatting directly in Observable, by toggling it on in your user settings or team settings. Prettier is a code formatter that indents and formats code in a uniform way automatically, and in Observable it runs every time you hit Shift-Enter and evaluate a cell.

We’re pretty excited about this one - we use Prettier for our application development too, and it makes nitpicky eslint-style code tweaks a thing of the past. Plus, you can write code freeform and have it look pretty, automatically.

For folks who have used the prettier localStorage flag - this replaces that. The user setting will stick with you between computers, and since it’s per person & per team, it’s not going to reformat other people’s code if you just create a suggestion inline.

We’ve improved the way that Prettier works for this release: better performance for large cells and correct behavior with our Observable syntax. It should work smoothly everywhere, but if it doesn’t, let us know.


For the curious, our modifications to prettier are open for you to check out - we connect the output of our parser to Prettier’s printer, handling new syntax like import with, viewof, mutable, and blocks.

We’re planning on keeping Prettier simply on / off for the time being, and not exposing any of its options. The philosophy driving this feature is the idea of a one-size-fits-all style across the land of programming, as there is in more recent languages like Rust and Elm.

21 Likes

Amazing! Glad you got this working.

Great! Can you please enable it for SQL?

Would be great if you could log it in our feedback repo. That way you will get updates when this is addressed. Thanks!

1 Like

Amazing. I like this feature.

1 Like