One thing that I miss from working in my own editor is 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.)
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.).
Update: Prettier-powered autoformatting is now available to folks to test.
localStorage.tryPrettier = true
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.
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.
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)? 
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
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.
Will prettier indent .enter() and/or .data()?
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.
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.)
