Vscode html auto format on django template

Question

I like VSCode when saving autoformat until it messed up with my template code.

It incorrectly formats my django template syntax into one line code (sometimes a very long line). Therefore instead of 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 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 the format when saving by changing the user settings to {"editor.formatOnSave": false} , but still have not received any luck.

Is there any plugin or configuration that I can use to improve performance?

PS: I am using VSCode version 1.9 on Sierra MacOSx

Answer 1

you can disable the default html formatter, goto File> Preferences> User or Workspace Settings, in the HTML settings you will find:

 // Enable/disable default HTML formatter (requires restart) "html.format.enable": true, 

I think VSCode uses js-beautify as the default formatting, you can use decorate extension to override it with .jsbeautifyrc in the project directory

Answer 2

Had the same problem, found a message in which a person turned off the JS-CSS-HTML Formatter extension ( fooobar.com/questions/1014890 / ... ), and he fixed the problem. Tested on mine, and it looks like it worked too. Hope that helps

Answer 3

Changing the language mode of the file to "Django / HTML" will also prevent VSCode from automatically formatting it.

Answer 4

Alexa makes good sense in her answer . The file mode must be changed to "Django / HTML" so that VS CODE does not format it.

How to change file mode?

A quick solution is to use this extension called vscode-Django and change the settings as indicated in its documentation.

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

With this setting, any file located in the template folder will be treated as a Django template file and will not depend on HTML auto-formatting.

PS: the extension is still in preview mode, I hope it will get better over time.