Prettier - How to format HTML files as expected, in a Django project

45 views Asked by At

I have difficulties in formatting HTML files as expected. Here are some of them:

(1)

Expectation (before being saved):

{% extends "admin/base.html" %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block branding %}
  <h1 id="site-name">
    <a href="{% url 'admin:index' %}">Polls Administration</a>
  </h1>
{% endblock %}

{% block nav-global %}
  <!-- Add your custom navigation code here if needed -->
{% endblock %}

After being saved and formatted (not as expected):

{% extends "admin/base.html" %} {% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %} {% block branding %}
<h1 id="site-name">
    <a href="{% url 'admin:index' %}">Polls Administration</a>
</h1>
{% endblock %} {% block nav-global %}
<!-- Add your custom navigation code here if needed -->
{% endblock %}

(2)

Expectation (before being saved):

{% comment %} 
The {% static %} template tag generates the absolute URL of static files. 
{%endcomment %} 

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}" />
...

After being saved and formatted (not as expected):

{% comment %} The {% static %} template tag generates the absolute URL of static files. {%endcomment %} {% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}" />
...

(3)

Expectation (before being saved):

...
{% endif %}
{% for choice in question.choice_set.all%} 

{% comment %}
'forloop.counter' indicates how many times the for tag has gone through its loop (just like 'i' in 'for(int i=0; i++; i<10) {...}')
{% endcomment %}

...
{% endfor %}
...

After being saved and formatted (not as expected) :

...
{% endif %} {% for choice in question.choice_set.all%} {% comment %} 'forloop.counter' indicates how many times the for tag has gone through its loop (just like 'i' in 'for(int i=0; i++; i<10) {...}') {% endcomment %}
...

My .prettierrc is as follow:

{
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": true,
  "overrides": [
    {
      "files": ["**/*.html"],
      "options": {
        "printWidth": 150
      }
    }
  ]
}

Code editor: VSCodium

I feel like the expected ones make the file more readable. Am I missing some configurations in .prettierrc?

Thank you

0

There are 0 answers