Prettier Error ให้ต้องใส่ /> ปิดท้าย HTML Tag แต่ใส่ไม่ได้ Save แล้วหาย

ชื่อบทความงงๆ ไหมหว่า คือง่ายๆ ก็แค่ เหมือนตัว ESLint ของ NuxtJS มัน Error เรื่องที่ว่าให้เราต้องใส่แท็กปิดแบบมี / (Backslash) ด้วยอะ แบบนี้

<input type="text" value="KanexKane" />

แต่ปัญหาของตัว VS Code และใช้ Prettier ก็คือตอนบันทึกมันดันเอา / (Backslash) ออกไปอ่ะสิ จะเหลือแค่แบบนี้

<input type="text" value="KanexKane">

พอเป็นแบบนี้แล้วมันเกิดอะไรขึ้น? … ก็ขึ้น Error แบบนี้ไงล่ะ

แล้วไม่ว่าจะใส่เข้าไปท่าไหนมันก็ยังคงหายไปอยู่ดี จนไปเจอให้เราไปตั้งค่าแบบนี้เพิ่มเข้าไปใน VS Code

"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "prettier-eslint"

วิธีการใส่ก็เข้าไปที่ Preferences -> Settings ของตัว VS Code จากนั้นกดที่ไอคอน { } มันจะเข้าไปหน้าปรับแต่งแบบ JSON และเราก็เอาโค้ดชุดด้านบนไปใส่เพิ่มของเรา

ก็จะออกมาหน้าตาเป็นแบบนี้

กดเซฟได้เลย หลังจากนั้นลองกลับมาที่หน้าโค้ดของเรา ทำการเพิ่ม /> เข้าไปเวลากดเซฟ หรือจัด Format ด้วย Prettier ก็จะไม่หายแล้วครับ