request to add support for Jinja2 and Django template tags indention

[mh-firouzjah]

I'm currently using vscode and have some extensions installed and some configuration for those extensions applied. Django by Baptiste Darthenay and Beautify by HookyQR, are the extensions and this is the settings:

"files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html", // this is provided by Django ext.
},
"beautify.language": {
    "html": ["django-html"]
},
"[django-html]": {
    "editor.defaultFormatter": "HookyQR.beautify",
}

it is very helpful since it will indent the html tags inside Django-templates but it doesn't do anything with Jinja2 or Django-template syntax (which is really similar but not exactly jinja). I hope there would be a solution to have the indention for this syntax too. it currently looks like this:

<div class="card-data">
    <ul class="list-unstyled">
        <li class="comment-date font-small">
            <i class="far fa-clock-o"></i>
            {% if LANGUAGE_BIDI %}
            {{ comment.created|to_jalali:'%H:%M %B %d, %Y' }}
            {% else %}
            {{ comment.created }}
            {% endif %}
        </li>
    </ul>
</div>

imagine the ugly code when using nested template tags. thanks for your attention.

[mhmd9512]

i have the same issue 👌

[rzw-gh]

same here please response asap

[mh-firouzjah]

this is the indentation rule:

"indentationRules": {
    "increaseIndentPattern": "((\\<)(body|address|blockquote|dd|div|dl|dt|tr|tbody|thead|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|a|menu|pre|table|button|a|abbr|acronym|area|b|base|basefont|bdo|big|br|button|caption|cite|code|col|colgroup|del|dfn|em|font|head|html|i|img|input|ins|isindex|kbd|label|legend|li|link|map|meta|noscript|optgroup|option|param|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var))|(\\{\\%)\\s*(autoescape|block|blocktrans|blocktranslate|plural|comment|debug|for|empty|if|elif|else|ifchanged|ifequal|ifnotequal|from|spaceless|with|verbatim|thumbnail)",
    "decreaseIndentPattern": "((\\<\\/)(.*)*(\\>))|((\\{\\%)\\s*(empty|elif|else|end(autoescape|block|blocktrans|blocktranslate|comment|for|if|ifchanged|ifequal|ifnotequal|spaceless|with|verbatim|thumbnail)))"
  }

[Zymonick]

Thank you for the indentation rules. Somehow, they don't do anyting. Can you please be more specific as to where we have to place these indentation rules?

This is how I tried it.

  "beautify.language": {
    "html": ["htm", "html", "django-html"]
  },

  "[django-html]": {
    "editor.defaultFormatter": "HookyQR.beautify",
  },

  "beautify.config": {
    "[django-html]": {
      "indent_size": 4,
      "indentationRules": {
        "increaseIndentPattern": "((\\<)(body|address|blockquote|dd|div|dl|dt|tr|tbody|thead|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|a|menu|pre|table|button|a|abbr|acronym|area|b|base|basefont|bdo|big|br|button|caption|cite|code|col|colgroup|del|dfn|em|font|head|html|i|img|input|ins|isindex|kbd|label|legend|li|link|map|meta|noscript|optgroup|option|param|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var))|(\\{\\%)\\s*(autoescape|block|blocktrans|blocktranslate|plural|comment|debug|for|empty|if|elif|else|ifchanged|ifequal|ifnotequal|from|spaceless|with|verbatim|thumbnail)",
        "decreaseIndentPattern": "((\\<\\/)(.*)*(\\>))|((\\{\\%)\\s*(empty|elif|else|end(autoescape|block|blocktrans|blocktranslate|comment|for|if|ifchanged|ifequal|ifnotequal|spaceless|with|verbatim|thumbnail)))"
      }
    },
  },

Thank you for clarifying

[mh-firouzjah]

@Zymonick hello. that indentation rule I pasted here was for vscode custom language extension, I added to Django extension of Baptist-Dartenay(sorry if I spelled it wrong) and there the rules worked but that was not complete as it worked just when I was typing the code but it couldn't format on save or... anyway the HookyQR.beautify is not maintained anymore is signed as deprecated. the djlint extension for vscode is working well and I'm using it.

[Zymonick]

oh great, thank you very much for the very quick reply. I installed djilint and it works very well!