Skip to main content

Askboon

การตั้งค่า VSCode สำหรับ Jinja2

คนที่เขียนโปรแกรมด้วย Python ก็มักจะได้ใช้งาน Template Engine ที่ชื่อ Jinja2 ไปด้วย ซึ่ง Jinja2 ก็จะเป็น Template ที่สามารถใช้คู่กับภาษา HTML ได้เป็นอย่างดี แต่ใน VSCode เอง เวลาที่เราติดตั้ง Extension สำหรับ Jinja2 ก็มักจะเจอปัญหาอยู่พอสมควร โพสต์นี้จึงจะสรุปปัญหาที่เกิดและวิธีแก้ให้ครับ

ปัญหาที่เกิด

ปกติ VSCode จะมี built-in feature ที่ช่วยในการทำ Auto-closed Tag ในภาษา HTML ให้อยู่แล้ว เช่น เวลาพิมพ์ <div พอกด ">" มันก็จะสร้าง tag ปิด "</div>" ใหัอัตโนมัติ

พอเราจะใช้ไฟล์ที่ต้องเขียน Jinja2 Template เรามักจะเปลี่ยนนามสกุลขอไฟล์ไปเป็น *.j2 แล้วก็ลง Extension ยอดนิยมของ Jinja2 ที่ชื่อ “Better Jinja” ที่จะช่วยให้ทำงานง่ายขึ้น เช่น รองรับ Syntax Color สำหรับ Jinja2 หรือมี snippet ต่างๆให้ใช้งานได้ แต่ปัญหาคือ ในไฟล์ j2 เองก็จะมีการเขียนภาษา HTML ร่วมด้วย ซึ่งฟีเจอร์หลายๆอย่างที่มีใช้ใน HTML เช่น auto-closed tag ก็จะไม่ทำงานเวลาที่เราแก้ไขไฟล์ j2

วิธีแก้

ให้ทำการติดตั้ง Extension เพิ่มอีกตัว ตัวที่ชื่อว่า Auto Close Tag จากให้ให้แก้ใน settings.json โดยเพิ่มคำสั่งนี้เข้าไป

1
2
3
"auto-close-tag.activationOnLanguage": [
        "jinja-html",
],

เพียงเท่านี้ ไฟล์นามสกุล j2 ของคุณก็จะสามารถใช้ฟังก์ชั่น auto-closed tag ได้เสมือนกับการทำงานบนไฟล์นามสกุล html เลยครับ