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

Apirak
Nov 20, 2023

ปกติจะใช้ 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,

--

--

Apirak

I am a big believer that great UX comes from all team members, not one. #UX Evangelist at ODDS #Co-founder of UX Academy #Certified Sprint Master.