vscode html autoformat on django template

Question

I love VSCode on save autoformat until it messed up with my template code.

It wrongly formats my django template syntax into one line code (sometimes really long line). So instead of having this code

{% for row in 'ABCDEFGH' %} <tr>   {% for col in '123456789012345' %}     <td>       {% with forloop.counter|stringformat:"s" as counter %}         {% with row|add:counter as seat_num %}           {% if seat_num not in oc_seats %}             <input type="checkbox" value="{{ row }}{{ forloop.counter }}" name="seats">           {% endif %}           <br> {{ seat_num }}          {% endwith %}       {% endwith %}      </td>        {% endfor %} </tr> {% endfor %} 

I end up have this code

{% for row in 'ABCDEFGH' %} <tr>   {% for col in '123456789012345' %}   <td style="text-align: center; border: 1px solid #aaa;">     {% with forloop.counter|stringformat:"s" as counter %} {% with row|add:counter as seat_num %} {% if seat_num not in oc_seats %}     <input type="checkbox" value="{{ row }}{{ forloop.counter }}" name="seats"> {% endif %} {{ seat_num }} {% endwith %} {% endwith %}   </td>   {% endfor %} </tr> {% endfor %} 

I tried to disable format on save by changing user settings into {"editor.formatOnSave": false} but still haven't gotten any luck.

Is there any configuration that I can use to make it work better?

PS: I'm using VSCode version 1.9 on Sierra MacOSx

Answer 1

Alexa has a good point in her answer. The file mode needs to be changed in "Django/HTML" to prevent VS CODE for formatting it.

How to change the file mode?

A quick solution is to use this extension called vscode-Django and adjust your setting like this as said in his documentation.

"files.associations": {     "**/templates/*.html": "django-html",     "**/templates/*": "django-txt" } 

With those setting any file located in the template folder will be considered as a Django template file and will not be affected by HTML autoformat.

PS: The extension is still in preview mode, hope it will get better with time.