[FEATURE] [Formatter] Add option for attributes to be indented with std indent vs hanging indent

[palansher]

Good day!

I see a lot of formatting issues for twig. Let's look at one of them:

System Info

• OS: ubuntu 20.04
• Python Version (3.8.10)
• djLint Version (`1.9.5)
• template language: twig

.djlintrc

{
"ignore": "H021,H030,H031,H017",
    "extension": "twig",
    "indent": "4",
    "profile": "nunjucks",
    "format_attribute_template_tags": "true",
    "max_line_length": "120",
    "max_attribute_length": "15",
    "preserve_blank_lines": true,
    "preserve_leading_space": true    
}

Issue

on every next "--reformat" , the middle line

Карточка` водителя  <b> &emsp;&emsp; {{ (driver is defined and driver is not null) ? '[' ~ driver.getDriverFIO ~ ']': '' }} </b>

shifts right, right, right ...

the code:

{% block page_head %}
    Карточка водителя  <b> &emsp;&emsp; {{ (driver is defined and driver is not null) ? '[' ~ driver.getDriverFIO ~ ']': '' }} </b>
{% endblock page_head %}

the test file (I included only the problem lines): test_indent1.html.twig.txt

How To Reproduce

djlint --reformat test_driver_form_orphan.html.twig 

Thank you for your efforts!

[palansher]

The second issue in the same env pls:

Issue

Twig variables don't keep its indent in HTML hierarchy, and shift to first column:

<select class="form-control" name="services_works" {{ topsActive ? '' : 'disabled' }}>
    {% for top in topsActive %}
        <option value="{{ top.id }}">
            {{ top.shortName }}
        </option>
    {% endfor %}

</select>

test_var_shift.html.twig.txt

my respect!

[christopherpickering]

Thanks! It seems that both are triggered by the --preserve-leading-space option. I'll check it out.

[christopherpickering]

Can you help me understand for what purpose you have the leading space option? It is inteded for non-html files and will make the identing for html files not work correctly.

I'd recommend you update your config to

{
"ignore": "H021,H030,H031,H017",
    "extension": "twig",
    "indent": "4",
    "profile": "nunjucks",
    "format_attribute_template_tags": "true",
    "max_line_length": "120",
    "max_attribute_length": "15",
    "preserve_blank_lines": true,
}

[palansher]

Can you help me understand for what purpose you have the leading space option?

Due to my stupidity, sir.

It is inteded for non-html files and will make the identing for html files not work correctly.

Really, I did not know that. My intention was - to keep my custom manual indents, in case reformat will work undesirable way.

Now formatting is almost perfect! Thank you.

One point, pls:

Currently, in my file, html tags indents by 3 spaces (according to "indent": "3" setting).

But the indentation of the html attributes of these tags looks sporadically (1, 2 .. indentation)..

I see two problems here:

1. attribute indentation seems too much - more than one indent to right from HTML tag indent (namely two+). Pls look inside input and button tags.

2. attribute indentation (2,1 ..) is random and not a multiple of ""indent": "x"," . Not a huge problem, but it results in ugly highlighting in the editor and is distracting.

So, I see such a picture in my VS Code:

Is there a way to fix/tune this? Maybe I did something wrong again.

{
    "ignore": "H021,H030,H031,H017",
    "extension": "twig",
    "indent": "3",
    "profile": "nunjucks",
    "format_attribute_template_tags": "true",
    "max_line_length": "120",
    "max_attribute_length": "15",
    "preserve_blank_lines": true    
}

test_driver_form_orphan.html.twig.txt

Thank you!

[palansher]

Also, maybe you will find that

this formatting

is more readable than this:

I mean, that same indent of open (<) and close (>) braces looks more readable for complex hierarchy.

[christopherpickering]

Yes, the attributes always indent so the start of the attributes will match. I don't have any plans to change that.

[palansher]

Yes, the attributes always indent so the start of the attributes will match.

Cool!

But maybe better if an attributes indents will also pay attention to "indent" param from config , to keep common indent step ?

[christopherpickering]

Maybe :) I'm not convinced 😀 Maybe it should be a config option one day.

[palansher]

Thanks for your help!!

[chasegiunta]

@christopherpickering I think you already have this change planned, but just want to echo that I'd hope there would be a way to configure it where attributes could wrap similar to prettier...

<input
  type="text"
  name="firstName"
  id="first-name"
  autocomplete="given-name"
  class="form-input mt-1"
  value="{{ user.firstName }}"
/>

as opposed to the current way

Thank you for considering this and the tremendous work you've done so far!

[christopherpickering]

Hi @chasegiunta thanks, that is the plan in v2.0 when we get there :)

[zubus]

Yes, the attributes always indent so the start of the attributes will match.

Cool!

But maybe better if an attributes indents will also pay attention to "indent" param from config , to keep common indent step ?

Any plan on this? 🙏