Config support about prettier-browser-extension

[nickmccurdy]

As far as UI is concerned, I really like how Code Sandbox does it. There's a preference pane with a GUI for the Prettier fields and a link to edit the JSON directly for importing/exporting (similar vibe to VSCode's user/workspace settings).

Source: https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx

[kaicataldo]

Definitely think we should implement this! Assuming we want this in the extension's settings page, seems like we could:

1. Have a text input that accepts JSON
2. Have individual inputs for each configurable option (I think VS Code's plugin does this?)
3. Both of the above!

[kaicataldo]

That seems pretty ideal to me.

[nickmccurdy]

Would you be okay with pulling in React for this? It will require some build configuration which I can help with, but it's pretty small and will make managing the form a lot easier. Code Sandbox is also using React, but I'm not sure how reusable their components in the source would be.

[kaicataldo]

I'm not opposed to that at all! The current plugin code uses vanilla JS because there really isn't much UI to render.

[lipis]

Yes, I also don't mind React.. as long as it's nice and tidy..! :)

[nickmccurdy]

I just realized the playground is using React, would it be better to try to reuse those components instead of cloning Code Sandbox's UI? It has sections and I figure it might be more familiar to Prettier users, though I think Code Sandbox's looks nicer.

Code reuse would be a little tricky at first with this being a separate repository from Prettier and the playground, but we could release a package for both in theory.

[kaicataldo]

Oh, that's interesting. It looks like there are a number of configuration options in the playground that we probably wouldn't use. I wonder if it's worth the overhead of extracting out a package that we have to make sure works for both cases? Given that there isn't a ton of complex behavior, I'm inclined to say we just write our out config UI. I'm happy to go with consensus on this though :)

[nickmccurdy]

We could start by copying it if we like the playground UI, and extract a package if we end up using shared logic. Do you have any preference over this UI or the code sandbox one? Or do you have a different idea?

[kaicataldo]

I think that seems like a good plan! I didn't have any particular design choices in mind. I like the idea of making it an embedded option, because then you can just style the popup and not have to worry about how it looks in a full document. I think the Redux DevTools use this nicely:

[nickmccurdy]

That's a good idea, I think it would make formatting easier.