For development with Atom, using a source code formatting package called atom-beautify will add indents and line breaks in a nice way. It supports a wide range of languages, and it is an excellent one that allows you to make detailed settings such as indent width and style specification for each.
Recently I often write Jinja2 format HTML for the convenience of writing Django, but atom-beautify's default HTML formatting rule (JS Beautify) does not support {{}}
etc. I was dissatisfied with not being able to shape it well.
At first, I gave up thinking that there is no formatting rule for Jinja2, but apparently it is better to select Pretty Diff in the HTML Beautifier. I found out and decided to try it immediately. Support (html) jinja2 templates · Issue #418 · Glavin001/atom-beautify
Change Atom's Preferences-> Package's atom-beautify Settings-> HTML Default Beautifier setting from "JS Beautify" to "Pretty Diff".
{% extends "base.html" %} {% block title %}title{% endblock title %} {% block content %}
<form action="{% url 'project:hoge'%}" method="post">
{% csrf_token %} {{ form.non_field_errors }}
<div class="form-group">
{{ form.hoge_name.errors }}
<label for="{{ form.hoge_name.id_for_label }}">hoge_name</label> {{ form.hoge_name }}
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-primary">create</button>
</div>
</div>
</form>
{% endblock content %}
{% extends "base.html" %}
{% block title %}title{% endblock title %}
{% block content %}
<form action="{% url 'project:hoge'%}" method="post">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="form-group">
{{ form.hoge_name.errors }}
<label for="{{ form.hoge_name.id_for_label }}">hoge_name</label>
{{ form.hoge_name }}
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-primary">create</button>
</div>
</div>
</form>
{% endblock content %}
It's done! It recognizes the block properly. Besides, {% if%} {% else%} {% endif%}
and
It also supports {% for%} {% endfor%}
.
Now the layout doesn't pollute Git commits and the style is unified.