Use of handlebars with re-indent?

[LessThanInfinity-zz]

Hello,

This is more of a newbie question than an issue, but I wonder if it is possible to have the handlebars syntax follow/work with the reindentation feature of sublime? When I use this feature (I get a frustrating amount of improperly indented code to work with, with several handlebars if/else statements), anything within the handlebars conditional isn't indented one tab.

Not an issue, just a low priority request.

[daaain]

Hey @Shak-eah,

I think this might be something which is by design, the reason being that this way the generated markup is going to have the right indentation levels. Since the conditional block only exists in the Handlebars source, if it there's another level of indentation for the conditional code itself the final markup will have gaps.

So this template:

<script data-partial="nav" type="text/x-handlebars-template">
    <ul>
        {{#each route}}
        <li><button data-app-route="{{ path }}">{{{ name }}}</button></li>
        {{/each}}
    </ul>
</script>

Will be rendered as:

<ul>
    <li><button data-app-route="somepath">somename</button></li>
    <li><button data-app-route="somepath">somename</button></li>
</ul>

Does this make sense? Hope I understood your question right!

[lukemelia]

FWIW, I'd argue that template indentation should be optimized for developer indentation/readability ahead of indentation/readability of HTML output.

[daaain]

@lukemelia hmm, your point made me think about it and I guess maybe the best approach would be as you say optimising for developer readability and using some post-processor on the markup to re-indent it for people who care about it too much (like I do).

Not sure when will I get around to do this, but will keep in mind!

[daaain]

Right, I had a bit of a dig around and found two things.

First of all I think it was a bit of a post rationalisation from me that the lack of indentation is there to keep the markup right, the actual fact is that as it turns out there isn't any indentation related setting in the package yet so this behaviour is just what's inherited from HTML, which ignores the Handlebars lines :)

But the good news is I managed to hunt down some documentation how can this be done: http://docs.sublimetext.info/en/latest/reference/metadata.html#indentation-options-children-of-settings

There are also a couple of examples from other languages:
https://github.com/facelessuser/sublime-languages/blob/master/Better%20Python/Miscellaneous.tmPreferences
https://github.com/textmate/ada.tmbundle/blob/master/Preferences/Miscellaneous.tmPreferences

Now the trick is figuring out what should be indented and how. Does anyone have some good reference to use for this or should we put something together here?

[benedikt-buchert]

I think indentation is a very important feature! I agree that it should be optimized for developer readability!

[daaain]

@benedikt-d have you seen any good reference though?

I guess it could be as simple some template files where indentation is done right, covering all features including trickier ones like whitespace control, etc something along the lines of what I have in the test folder. But in these ones for testing I never really paid attention to indentation so they are a bit all over the place :)

Actually maybe the best would be taking all the examples from the official website and using those? Would be a bit laborious though, I'm hoping that someone else has done and is keeping some good kitchen sink template up to date.

[benedikt-buchert]

Doesn't indenting just concern this kind of style:
{{#list people}}
{{firstName}} {{lastName}}
{{/list}}
I'm not quite sure if I understand have never written an extension for Sublime...

[daaain]

Well there are things like whitespace control: http://handlebarsjs.com/expressions.html#whitespace-control

But maybe I'm overcomplicating it and all what's needed is indentation for block helpers, starting with # and not closed in the same line.

[benedikt-buchert]

I have never used those so I could live without them :-)
That would add:
{{#foo}} bar {{/foo}} and {{#foo} bar {{ ~/foo}}

[iameli]

Yeah, there is potentially a lot to think about with various corner cases but automatic indentation of block helpers would be a great start. Need to also account for the special {{else}} block:

{{#if condition}}
    Your thing is true!
{{else}}
    Your thing is false.
{{/if}}