vscode django html에서 코드 formatter 사용법 및 비교: Prettier, Django template support, 등등

vscode에서 django의 html 문서를 자동 포매팅할 때 vscode의 extension을 사용합니다.

보통 범용적으로 모든 언어에서 prettier extension을 사용합니다.

---

1. Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier - Code formatter - Visual Studio Marketplace Extension for Visual Studio Code - Code formatter using prettier Extension for Visual Studio Code - Code formatter using prettier

그래서 django html에서도 prettier를 사용할 수 있습니다. settings.json에 다음과 같이 넣어줍니다.

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

아니면 django가 아닌 html과 구분짓기 위해 다음처럼 해주어도 됩니다.

templates 폴더나 views 폴더의 하위 경로 내의 html은 django-html 인 것으로 특별대우하는 것입니다.

  "files.associations": {
    "./**/templates/**/*.html": "django-html",
    "./**/views/**/*.html": "django-html"
  },
  "[django-html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

그런데 조금 아쉽습니다.

세부 설정에 따라 다르겠지만 다음과 같이 이상하게 될 수 있습니다.

  수정
  삭제

수정 이렇게 잘리는 게 마음에 안들었습니다. 이 문제는 다음처럼 해결할 수 있습니다. 길이를 넉넉하게 하니 과도하게 잘리는 현상이 사라졌습니다.

  "prettier.printWidth": 180,

->

  수정
  삭제

하지만, 길이를 임의로 늘려서 문제를 덮었기 때문에,

180줄을 넘어서면 문법과 관계 없이 줄바꿈을 해버려셔 문제가 됩니다.

---

1. Django Template Support

다른 formatter도 사용해보았습니다.

prettier의 대안은 django template support입니다.

https://marketplace.visualstudio.com/items?itemName=junstyle.vscode-django-support

Django Template Support - Visual Studio Marketplace Extension for Visual Studio Code - 📍formatter, django template support, highlight, format, prettier, auto-complete Extension for Visual Studio Code - 📍formatter, django template support, highlight, format, prettier, auto-complete

settings.json에 다음과 같이 바꿔줍니다.

  "files.associations": {
    "**/templates/**/*.html": "django-html",
    "**/views/**/*.html": "django-html"
  },
  "[django-html]": {
    "editor.defaultFormatter": "junstyle.vscode-django-support"
  },

원하는데로 잘 나왔습니다.

  
    수정
    삭제
  

하지만 tag가 인식이 안되어서 띄어쓰기가 추가되는 문제가 있었습니다.

{% block extra - css %} // 원본: {% block extra-css %}

---

1. Django Template Intelligence

이제 마지막 대인압니다.

https://marketplace.visualstudio.com/items?itemName=Shellomo.django-template-intelligence

Django Template Intelligence - Visual Studio Marketplace Extension for Visual Studio Code - Comprehensive Django template support with intelligent completions, snippets, documentation, and template inheritance visualization Extension for Visual Studio Code - Comprehensive Django template support with intelligent completions, snippets, documentation, and template inheritance visualization

settings.json에 다음과 같이 바꿔줍니다.

  "files.associations": {
    "**/templates/**/*.html": "django-html",
    "**/views/**/*.html": "django-html"
  },
  "[django-html]": {
    "editor.defaultFormatter": "Shellomo.django-template-intelligence"
  },

문제 없이 전부 해결됬네요!

---

결론은

Django에서는 Django Template Intelligence extension을 사용하자.

입니다.