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.
Open your browser console
localStorage.tryPrettier = true
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').
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.
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).
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.
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.)