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