ทำให้ VS-Code จัดไฟล์ *.html.erb

ปกติจะใช้ VS-Code หรือ Cursor ผมก็จะใช้ Prettier ในการจัดไฟล์ให้เป็นระเบียบเรียบร้อย แต่กลายเป็นว่า Prettier ดันจัดไฟล์ .erb ไม่ได้ ก็เลยต้องหาตัวอื่น

ลองหาไปหลายตัวมากสุดท้ายมาจบที่ “ERB Formatter/Beautify” ครับ วิธีการสามารถดูได้ใน Link เลยครับ หรือจะดูบน blog นี้ก็ได้

1. ติดตั้ง Gem ก่อน ครับ

gem install htmlbeautifier

หรือจะใส่เข้าไปใน Gemfile เลยก็ได้

gem 'htmlbeautifier'

2. แก้ Setting ให้ไฟล์ erb มันมา Format ด้วย plugin ตัวนี้แทนตัวปกติ

"[erb]": {
  "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
  "editor.formatOnSave": true
},
"files.associations": {
  "*.html.erb": "erb"
}

(เปิด Setting แล้วเลือกเปิดไฟล์ setting json ออกมาแก้ครับ)

ไม่แน่ใจว่าต้อง restart ตัว vscode หรือเปล่าแต่ถ้ามันไม่ได้ผลก็ลองดูได้ :-)

เพิ่มเติมอีกนิดคือน่าจะกำหนดให้มัน format ทุกครั้งที่ Save ด้วย

"editor.formatOnSave": true,