HTML Şablonlarını Denetleyin ve Biçimlendirin
HTML şablonları dışında, kullandığınız teknoloji yığınındaki her dilin bir biçimlendiricisi ve bir linter'ı var. Genel HTML araçları {% %} ve {{ }} yapılarını ayrıştıramaz, şablon motorları da çevrelerindeki işaretlemenin nasıl göründüğüyle ilgilenmez. djLint, şablon sözdizimiyle dolu HTML'i yeniden biçimlendirir ve yaygın hatalara karşı denetler. Django, Jinja, Twig, Nunjucks, Handlebars, Liquid, Go şablonları ve daha fazlası için profiller sunar.
uv tool install djlint
pip install djlint
Önce ve sonra
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 %}Biçiminizi gösterin!
Şöyle görünür:
Projelerinize bir rozet ekleyin:
[](https://github.com/djlint/djlint).. image:: https://img.shields.io/badge/html%20style-djLint-blue.svg
:target: https://github.com/djlint/djlint