VSCode에서 Django 템플릿 오토 포매팅하기

요즘 Django를 학습하고 있는데, Django에서 쓰는 템플릿 HTML 파일을 VSCode 포매터인 Prettier가 제대로 정렬을 못해준다는 것을 발견했다. 정렬해도 마음에 매우 안들게 해준다..😡

찾아보니 다른 사람들 불만도 상당했는데, 이리저리 설정을 해 봐도 나아지지 않다가 솔루션을 찾아 공유한다. (참고: https://github.com/prettier/prettier/issues/5581)

1. Unibeautify 플러그인 설치

VSCode 익스텐션 탭에서 Unibeautify 검색 후 플러그인을 설치한다.

2. Django 플러그인 및 파이썬 플러그인 설치

Django와 파이썬 플러그인이 설치되어있지 않다면 먼저 설치해주도록 하자.

3. VSCode 설정

Vscode 설정 파일에 (보통 프로젝트에 .vscode/settings.json) 다음을 추가해서 VSCode가 Django 템플릿을 django-html로 설정되도록 하고 Unibeautify 플러그인이 django-html 파일을 포매팅하도록 설정하자.

"files.associations": {
  "**/*.html": "html",
  "**/templates/**/*.html": "django-html",
  "**/templates/**/*": "django-txt",
  "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"emmet.includeLanguages": {
  "django-html": "html"
},
"unibeautify.enabled": true,
"[django-html]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "Glavin001.unibeautify-vscode"
}

결과

아래와 같이 템플릿 태그나 변수가 들어간 html 파일도 이쁘게 포매팅 된다.

<h1>Blog List</h1>
<br/>

{% for post in posts %}
  <h3>
    <a href="{{ post.get_absolute_url }}"></a>
  </h3>
  {{ post.modify_dt|date:"N d, Y"}}
  <p>{{ post.description }}</p>
{% endfor %}

<br/>

<div>
  <span>
    {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}">Previous Page</a>
    {% endif %}
    Page
    {{ page_obj.number }}
    of
    {{ page_obj.paginator.num_pages}}
    {% if page_obj.has_next %}
      <a href="?page={{page_obj.next_page_number}}">NextPage</a>
    {% endif %}
  </span>
</div>