add formatting shortcut to use prettier

[jack-arms]

This is for my own suggestion: #1220

This adds a shortcut to codemirror, Ctrl+, to format the document using Prettier, see this for how it's used in a standalone environment. Because Strudel uses mixed quotes and Prettier insists on consistent quotes, I had to use a hack to get around this, see comment in code.

Open to suggestions on the entrypoint for formatting!

• The shortcut to use (tried Ctrl+Shift+F and variations but these all do not work unfortunately, either it's mapped to something full-screen or will just be ignored and characters are entered into the editor instead)
• Whether the formatting/update and shortcut should be in codemirror, or formatting/update should happen outside codemirror, i.e. in the website with more flexibility on it being a keyboard shortcut, format button, etc.

Before format

After format

[yaxu]

Thanks for this! Code reformatting would be a big help in furious anarchic live coding sessions..

You can run pnpm run codeformat to fix the breaking test.

I was a bit surprised that you can't configure prettier to use inconsistent quotes, but doublechecked and you're right (although object keys can be inconsistently quoted).

Will this workaround mean that lines with single quotes won't have e.g. indentation formatted?

[jack-arms]

Fixed format, and yes lines with single quotes will not be formatted, (as well as surrounding lines depending on what needs to be formatted), for instance something like this:

samples({loop: 'https://...',
})

would not get formatted to:

samples({
  loop: 'https://...'
})

I think this is an ok tradeoff though, since things in Strudel that need single quotes are not that common from what I've seen (URLs for samples like in this example and MIDI output names come to mind, but I can't think of anything else)

[felixroos]

hey @jack-arms thank you for this PR!!
I've moved the plugin to a separate file + added alt-shift-f as an additional shortcut.
The tests now also work.
I'm a bit concerned that this adds ~1MB (~250kb gzipped) to the strudel/codemirror package though..
maybe it makes sense to move it to a separate package, like @strudel/codeformat or @strudel/prettier ?

[felixroos]

@jack-arms any thoughts? i could also do the refactoring if you want