Formatage du code source Jinja2 avec atom-beautify

Pour le développement avec Atom, l'utilisation d'un package de formatage de code source appelé atom-beautify ajoutera des retraits et des sauts de ligne d'une manière agréable. Il prend en charge un large éventail de langues, et c'est un excellent qui vous permet de définir des paramètres détaillés tels que la largeur de retrait et la spécification de style pour chacun.

Récemment, j'écris souvent du HTML au format Jinja2 pour la commodité d'écrire Django, mais la règle de formatage HTML par défaut d'atom-beautify (JS Beautify) ne prend pas en charge {{}} etc. Je n'étais pas satisfait de ne pas pouvoir bien le façonner.

Au début, j'ai renoncé à penser qu'il n'y a pas de règle de formatage pour Jinja2, mais apparemment, il est préférable de sélectionner Pretty Diff dans le HTML Beautifier. Je l'ai découvert et j'ai décidé de l'essayer immédiatement. 
 Support (html) jinja2 templates · Issue #418 · Glavin001/atom-beautify

paramètres d'embellissement d'atome

Changez les préférences d'Atom -> Paramètres atom-embellissement du paquet -> le paramètre Embellisseur par défaut HTML de «JS Beautify» à «Pretty Diff».

ss 2016-11-17 15.45.21.png

Comparaison de format du code source

Lors de l'utilisation de JS Beautify (par défaut)

{% extends "base.html" %} {% block title %}Titre{% 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">créer</button>
        </div>
    </div>
</form>
{% endblock content %}

Lors de l'utilisation de Pretty Diff

{% extends "base.html" %}
{% block title %}Titre{% 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">créer</button>
            </div>
        </div>
    </form>
{% endblock content %}

C'est fait! Il reconnaît correctement le bloc. En outre, {% if%} {% else%} {% endif%} et Il prend également en charge {% for%} {% endfor%}.

Maintenant, la mise en page ne pollue pas les commits de Git et le style est unifié.

Recommended Posts

Formatage du code source Jinja2 avec atom-beautify
Obtenez des métriques de code source Python à l'aide de radon
Essayez d'utiliser Sourcetrail, un outil de visualisation de code source
J'ai essayé d'utiliser jinja2
Installer ansible à partir du code source
Script de vérification de code de caractère de code source