[PYTHON] Jinja2 source code formatting using atom-beautify

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

atom-beautify settings

Change Atom's Preferences-> Package's atom-beautify Settings-> HTML Default Beautifier setting from "JS Beautify" to "Pretty Diff".

ss 2016-11-17 15.45.21.png

Source code formatting comparison

When using JS Beautify (default)

{% 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 %}

When using 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 %}

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.

Recommended Posts

Jinja2 source code formatting using atom-beautify
Getting Python source code metrics using radon
Try using Sourcetrail, a source code visualization tool
I tried using jinja2
Install ansible from source code
Source code character code check script