vscode django 자동 포매터 선택 비교 django template support vs. unibeutify vs.djlint
지난 번 포스팅은 다음과 같습니다. https://blog.naver.com/devramyun/223724890640
[20250113] django vscode settings.json 개선된 버전 지난 번에 작성했던 포스팅에서 보다 보완된 버전으로 새롭게 settings.json을 만들었습니다. 지난번 포스… 지난 번에 작성했던 포스팅에서 보다 보완된 버전으로 새롭게 settings.json을 만들었습니다. 지난번 포스…
그런데 이것도 문제가 있습니다.
django template support입니다.
1
2
3
4
"[django-html]": {
"editor.tabSize": 2,
"editor.defaultFormatter": "junstyle.vscode-django-support"
},
다음과 같은 django-html 코드가 있다고 해봅시다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{# _messages_as_toast.html #}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
(function () {
const toast_container = document.currentScript.previousElementSibling;
document.addEventListener("DOMContentLoaded", function () {
toast_container.querySelectorAll(".toast").forEach(function (el) {
const toast = new bootstrap.Toast(el);
toast.show();
});
});
})();
{% endif %}
자동 포매팅을 하면,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{# _messages_as_toast.html #}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
;(function () {
const toast_container = document.currentScript.previousElementSibling
document.addEventListener('DOMContentLoaded', function () {
toast_container.querySelectorAll('.toast').forEach(function (el) {
const toast = new bootstrap.Toast(el)
toast.show()
})
})
})()
{% endif %}
이렇게 되고, 계속 줄이 추가되면서 늘어납니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{# _messages_as_toast.html #}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
;(function () {
const toast_container = document.currentScript.previousElementSibling
document.addEventListener('DOMContentLoaded', function () {
toast_container.querySelectorAll('.toast').forEach(function (el) {
const toast = new bootstrap.Toast(el)
toast.show()
})
})
})()
{% endif %}
치명적입니다. 따라서 이 경우에는 {# prettier-ignore #}를 붙여줘서 포매팅을 방지해야합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{# _messages_as_toast.html #}
{% if messages %}
{# prettier-ignore #}
{% for message in messages %}
{{ message }}
{% endfor %}
;(function () {
const toast_container = document.currentScript.previousElementSibling
document.addEventListener('DOMContentLoaded', function () {
toast_container.querySelectorAll('.toast').forEach(function (el) {
const toast = new bootstrap.Toast(el)
toast.show()
})
})
})()
{% endif %}
하지만 여간 불편한게 아닙니다. 잘못 포매팅이 되서 저장되면 되돌리기도 쉽지 않습니다.
그래서 다른 대안으로 다시 검토해봅니다.
Unibeautify입니다.
1
2
3
4
5
"unibeautify.enabled": true,
"[django-html]": {
"editor.formatOnSave": true, // 파일 저장 시 auto formatting
"editor.defaultFormatter": "Glavin001.unibeautify-vscode"
},
이 경우에는 아예 자동으로 ignore가 되버립니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{# _messages_as_toast.html #}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
;
(function () {
const toast_container = document
.currentScript
.previousElementSibling
document
.addEventListener('DOMContentLoaded', function () {
toast_container
.querySelectorAll('.toast')
.forEach(function (el) {
const toast = new bootstrap.Toast(el)
toast.show()
})
})
})()
{% endif %}
즉, 다음처럼 막 정렬해놓아도 그대로입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{# _messages_as_toast.html #}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
;
(function () {
const toast_container = document
.currentScript
.previousElementSibling
document
.addEventListener('DOMContentLoaded', function () {
toast_container
.querySelectorAll('.toast')
.forEach(function (el) {
const toast = new bootstrap.Toast(el)
toast.show()
})
})
})()
{% endif %}
다음은 djlint 입니다.
1
2
3
4
5
6
7
8
9
"[django-html]": {
"editor.tabSize": 2,
"editor.defaultFormatter": "monosans.djlint"
},
"djlint.maxBlankLines": 1,
"djlint.maxLineLength": 200,
"djlint.ignore": [
"H030,H031,H006,D018"
],
이 경우는 다음처럼 잘 만들어준다. 하지만 뭔가 아쉽다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{# _messages_as_toast.html #}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
;
(function () {
const toast_container = document
.currentScript
.previousElementSibling
document
.addEventListener('DOMContentLoaded', function () {
toast_container
.querySelectorAll('.toast')
.forEach(function (el) {
const toast = new bootstrap.Toast(el)
toast.show()
})
})
})()
{% endif %}
그리고 띄어쓰기 개수를 잘 못잡아준다.
1
1
결론입니다. 다음은 추천 순위입니다.
- unibeautify입니다. html의 특정 부분은 아예 건들지를 않으니 아쉽지만 그래도 문제를 발생시키는 건 적습니다. 하지만 개인적으로는 django-html을 예쁘게 정렬하지 못하는 부분에서 굉장히 '코딩할 맛이 안나게 하는' 포매터입니다.
- 무한 줄 바꿈 추가 이슈만 제외하면 django template support가 제일 좋습니다. 처음 정렬은 맘에 드는데, 계속 줄 바꿈이 추가되는게 문제네요. 저는 그래서 한 번 포매팅해주고, {# prettier-ignore #} 붙여서 고정해놓는 걸로 쓸까 합니다..
- djlint는 별로 자동 정렬해주는게 없습니다. 게다가 추가 설정값도 복잡하네요.
(소감) vscode로 django를 사용하기 위해서 참 많이 헤매였습니다… formatter의 최신 업데이트가 점점 늦어지고, 또 기능에 한계가 계속 발견되다보니 회의감이 드네요. pycharm으로 갈아타야할까 하는 마음이 많이 듭니다.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.