HTML テンプレートをリント＆フォーマット
スタックのどの言語にもフォーマッターとリンターがありますが、HTML テンプレートにはありません。汎用の HTML ツールは {% %} や {{ }} を解析できず、テンプレートエンジンはその周りのマークアップがどう見えるかを気にしません。djLint は、テンプレート構文の多い HTML を再フォーマットし、よくある間違いをリントで見つけます。Django、Jinja、Twig、Nunjucks、Handlebars、Liquid、Go テンプレートなどのプロファイルを備えています。
uv tool install djlint
pip install djlint
変更前と変更後
messy.html
{% block content %}
<SECTION class="posts">
<h2>Latest posts</h2>
{%if posts%}
<ul>
{% for post in posts %}
<li>
<a href="{% url 'post' post.slug %}" class="post-link {%if post.featured%}is-featured{%endif%}" data-analytics-id="post-{{post.id}}" aria-label="Read {{post.title}}">{{post.title|title}}</a>
</li>
{% endfor %}
</ul>
{%else%}
<p>No posts yet.</p>
{%endif%}
</SECTION>
{% endblock %}$ djlint messy.html --reformat --single-attribute-per-line
{% block content %}
<section class="posts">
<h2>Latest posts</h2>
{% if posts %}
<ul>
{% for post in posts %}
<li>
<a
href="{% url 'post' post.slug %}"
class="post-link {% if post.featured %}is-featured{% endif %}"
data-analytics-id="post-{{ post.id }}"
aria-label="Read {{ post.title }}"
>{{ post.title|title }}</a>
</li>
{% endfor %}
</ul>
{% else %}
<p>No posts yet.</p>
{% endif %}
</section>
{% endblock %}フォーマットをアピールしましょう！
表示例：
プロジェクトにバッジを追加しましょう:
[](https://github.com/djlint/djlint).. image:: https://img.shields.io/badge/html%20style-djLint-blue.svg
:target: https://github.com/djlint/djlint