จัด HTML ในไฟล์ Laravel Blade

ใครที่เขียน Laravel ด้วย Visual Studio Code ก็คงจะหาวิธี format code HTML กันให้วุ่นวายบางที format ได้บางทีก็ไม่ได้ วันนี้ผมเลยจะมานำเสนอทางเลือกที่ผมลองแล้ว work มากลองมาตั้งค่ากันเลยครับ

จัด code อย่างสวยงาม

ติดตั้ง Extension Beautify

หลังจากติดตั้งแล้วเปิดไฟล์ setting.json ตามนี้ครับ

ในตัวอย่างผมใช้ mac แต่ตั้งค่าฝั่ง windows จะเหมือนกันครับ

หลังจากนั้นวาง code นี้ลงไปครับ

"beautify.language": {
    "html": {
        "type": ["html"],
        "ext": ["vue", "blade.php"]
    }
}

พอดีผมใช้ vue.js ใน Laravel ด้วยจึงใช้ ext Vue ถ้าใครที่ไม่ได้ใช้สามารถเอาออกได้นะครับจะได้หน้าตาประมานนี้

สุดท้ายเข้าไปที่ ไฟล์ blade ของเราแล้วลอง format ดูครับใครที่ใช้

mac กด option + shift + F
ส่วนฝั่ง windows ผมไม่แน่ใจนะครับแต่สามารถเข้าไปดู key ลัดได้ใน keymap แบบนี้ แล้วค้นหาว่า format doc ครับ