Code format in Ace editor

@treepl team. I was looking through the backlog at https://treepl.co/public-backlog-state/request/add-format-to-code-editor . That item has four votes suprisingly. Anyway it got me to to thinking that somebody must already have build a tool for formatting in the ACE editor, and sure enough I found it. https://github.com/beautify-web/js-beautify

It looks like it’ll do HTML, CSS and JS. Here is a demo https://beautifier.io/
Not a feature that I’m really in the market for, but it seems like a few people need it.
(I imagine you have already come across this, but I just thought I’d mention it if you hadn’t) :slight_smile:

Oh, here is some discussion on implementation https://stackoverflow.com/questions/31767051/how-do-i-use-beautify-in-ace-editor/33319051#33319051

I find that I’m now more likely to use Treepl’s code view rather than Dreamweaver to edit code. Whereas with BC, I almost exclusively used Dreamweaver. The Treepl admin UI is just so much more user-friendly. But I’d like to have the code format button because it can be hard to find what I’m looking for in the code when there is no line break for a new tag.

We reviewed this plugin. It does a good job of formatting HTML, JS, and CSS. But it breaks the formatted liquid, it perceives all the liquid code as text and collapses it in one line. It will take a lot of time to write a plugin with liquid support, and we will be able to do this only after completing more priority tasks.

2 Likes

Thanks for the explanation. We definitely don’t want any liquid code effected!

@hopestew I agree that I find myself using treepl’s code view to edit text. It’s got a lot of the basic functions (go to line, emmet support, code highlighting etc) It’s pretty nice, I’ve got to say.

@Eugene I appreciate that this is a lower priority task, and definitely there are higher priority items being developed.

I assumed you’d looked into it. There are a few implementations for formatting liquid containing html available for VS code. I’m not sure if that would be something you could reverse engineer, or at least look at the formatting rule-set https://marketplace.visualstudio.com/items?itemName=neilding.language-liquid