VSCode custom code formatting and auto indention for language(Django-Template indention)

user_10651401 0
Viewed 582

I did a lot of search to find a away to create or override and existing extension of vscode to do indention for django-template but nothing is out there and no success in creation too. the best answer still using this settings:

"files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html",
}
"[django-html]": {
    "editor.defaultFormatter": "HookyQR.beautify",
}

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

and this extensions: Dajngo (Baptiste Darthenay) & beautify. but there is no indention for django-template language and only the HTML tags will be indented. I tried to override the Djagno extension to make it possible, and yeah it would insert some indention but after saving the code, Beautify will automatically format the code and delete that indention, so the result always is like this:

<ul class="navbar-nav nav-flex-icons {% if LANGUAGE_BIDI %} mr-auto {% endif %}">
    {% get_available_languages as languages %}
    {% for lang_code, lang_name in languages %}
    {% if lang_code != LANGUAGE_CODE %}
    {% language lang_code %}
    <li class="nav-item">
      <a class="nav-link lang-setter" data-lang-code="{{ lang_code }}">
        {{ lang_code|language_name_local }}
      </a>
    </li>
    {% endlanguage %}
    {% endif %}
    {% endfor %}
</ul>

the ugly template. I also provided the indention rule needed, but I couldn't find a way to force this rule for vscode code formatters like beautify or prettier.

  "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|comment|for|empty|if|elif|else|ifchanged|ifequal|ifnotequal|from|low|regroup|ssi|spaceless|templatetag|widthratio|with|verbatim|thumbnail)",
      "decreaseIndentPattern": "((\\<\\/)(.*)*(\\>))|((\\{\\%)\\s*(empty|elif|else|end(autoescape|block|blocktrans|blocktranslate|comment|for|if|ifchanged|ifequal|ifnotequal|spaceless|with|verbatim|thumbnail)))"
      }
prettier vscode-extensions visual-studio-code django-templates code-formatting
1 Answers

I had the same problem, I found this helpful project https://github.com/Riverside-Healthcare/djlint

For install it in vscode do (I recommend to install it in a virtual environment):

pip install djlint

Once this done. I use the extension run on save and add similar configuration in settings.json

"emeraldwalk.runonsave": {
    "commands": [
        {
            "match": "\\.html$",
            "isAsync": true,
            "cmd": "./path/to/venv/bin/djlint ${file} --reformat --quiet" 
        }
    ]    
}
user_132009320
Related