casid / jte-intellij

IntelliJ plugin for jte template files.
https://github.com/casid/jte
Apache License 2.0
22 stars 4 forks source link

auto format / indentation #3

Closed tomholub closed 3 years ago

tomholub commented 3 years ago

Thank you again for this good work - it seems our company is a bit of an early (and happy) adopter of jte.

Say we have this file

@tag.row.card.cardBegin()
          <p>Some text</p>
@tag.row.card.cardEnd()

I've put may spaces in front of the <p> and tried to get it auto-formatted somehow. Is there a way that jte files would be a recognized file type, and allow me to set indent size (in our case 2 spaces) and max line lenght, which I could then use the IDE's functionality to format?

casid commented 3 years ago

Hey @tomholub, thanks for the heads up!

I think it is possible, but I also think that it will be very hard. We somehow have to format HMTL/CSS/JavaScript/Java and jte tags in one file, without introducing any unwanted bugs. Even the official JSP plugin screws this up from time to time, so that I disabled auto-format for JSP at work.

I put a few hours into IntelliJ code formatting framework and it is pretty complicated to get into that.

Some references I found so far that might help implementing this:

https://jetbrains.org/intellij/sdk/docs/reference_guide/custom_language_support/code_formatting.html https://jetbrains.org/intellij/sdk/docs/tutorials/custom_language_support/formatter.html

casid commented 3 years ago

I did some more research this morning and found this gem of a blog post (plus the sample code of the handlebars formatter):

https://intellij-support.jetbrains.com/hc/en-us/community/posts/206757715-Code-formatting-for-template-languages

It's still wip and I think there's still a lot to do, but at least there's now some basic formatting and first unit tests for it. https://github.com/casid/jte-intellij/pull/4

tomholub commented 3 years ago

Thank you!

casid commented 3 years ago

@tomholub I thought about the example you shared and maybe content blocks would be something to improve your cards?

tag/row/card.jte:

@param gg.jte.Content content

<div class="card-styling-etc">
   ${content}
</div>

somePage.jte:

@tag.row.card(content = @`
    <p>Some text</p>
`)

Not sure it makes sense in your case, but this way you can ensure the tags are always used the intended way and also none forgets to close them :-)

tomholub commented 3 years ago

We'll look closer into that. I did not investigate further for a pretty bad reason - the blocks looked alien. And it felt like it may not work for nesting, as in (though I didn't try)

@tag.row.card(content = @`
    <p>Some text</p>
    @tag.row.thing(content = @`
        <p>Some other text</p>
    `)
`)
casid commented 3 years ago

Yes, nesting these works :-)

And I agree they look weird at the beginning. I think those are the only syntax that are not super-intuitive in jte. The plugin helps a lot with those, though.

The reason for the syntax was - looks like a String, works like a template :-D

tomholub commented 3 years ago

Got it - not bad. We'll consider these, to make sure tags are always closed as you say. Thanks for the hint!

casid commented 3 years ago

@tomholub formatting works pretty good now! Even if not using auto-format, the entire user experience got a LOT better. Somehow IntelliJ uses the formatting model to decide what happens when you press enter in the IDE. So, while typing all elements get the correct indentation which is very pleasant 👍

There are some unit tests, that document the behavior of the formatter: https://github.com/casid/jte-intellij/blob/master/src/test/java/org/jusecase/jte/intellij/language/format/JteFormatterTest.java

Cool thing is, it reuses all IDE settings for HTML formatting, so not much to do for jte there.

I will release a new plugin version in the next days, that includes the formatter.

tomholub commented 3 years ago

Excellent, will give it a try once it updates. Thank you!