VS Code : Open Web Browser in VS Code

เครื่องมือที่ใช้เขียนคำสั่งในยุคนี้ ตัวที่ได้รับความนิยมสูงคงหนีไม่พ้น VS Code ของ Microsoft หากลองติดตั้งและใช้งานรับรองว่าจะติดใจ คุณสามารถดาวน์โหลดได้ที่ https://code.visualstudio.com/download

หลายคนลองเขียนคำสั่ง HTML ง่ายๆ แล้วจะรันผ่าน VS Code ทำอย่างไรดี ????? มีหลายวิธีซึ่งแต่ละวิธีก็คงต้องออกแรงกันหน่อย สำหรับบทความนี้เราจะอาศัย Extension เอามาใส่เสริมเพิ่มเข้าไป

วิธีการทำให้ VS Code สามารถรัน HTML ผ่าน browser

1. ให้กดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension ตามลูกศรชี้ในภาพด้านล่าง เพื่อเปิดช่องหน้าต่าง EXTENSIONS
2. ในช่องค้นหาด้านบน ให้พิมพ์คำว่า open in browser
3. ก็คลิกที่ปุ่ม Install    เมื่อทำการติดตั้งเสร็จเรียบร้อยก็ให้คลิกที่ปุ่ม Reload

จากนั้นเมื่อต้องการรันไฟล์ HTML ก็ทำการคลิกขวาที่ไฟล์แล้วเลือกรายการ Open In Default Browser

วิธีการทำให้ VS Code สามารถ Preview Browser

หากต้องการจะเห็นหน้าเว็บว่าสิ่งที่เราแก้ไขเป็นอย่างไร (หลังจากบันทึก Ctrl-S) แบบทันทีทันใด (Preview) ก็สามารถทำได้ไม่ยากอีกเช่นกัน โดยไปหา Extension มาเสริม
1. ให้กดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension
2. ในช่องค้นหาด้านบน ให้พิมพ์คำว่า VSCode Browser Sync
3. ก็คลิกที่ปุ่ม Install    เมื่อทำการติดตั้งเสร็จเรียบร้อยก็ให้คลิกที่ปุ่ม Reload

การใช้งาน เมื่อเราอยู่ที่ไฟล์ ที่เราเขียนคำสั่ง หากต้องการใช้งานให้ทำดังนี้
1. ให้กดปุ่มบนคีย์บอร์ด Ctrl+Shift+ P เพื่อเปิดช่อง Command แล้วพิมพ์ Browser Sync: Server mode at side panel

จะปรากฎหน้าต่างบราวเซอร์แสดงทางด้านซ้ายมือของโปรแกรม ถึงตอนนี้ให้ทำการแก้ไขคำสั่ง HTML ตามต้องการ แล้วทำการบันทึก (Ctrl-S) เราก็จะเห็นข้อมูลบนหน้าเว็บถูกปรับปรุงตาม

ตานี้ก็มาถึงกรณีถ้าเราเขียนโปรแกรมแบบ Server Site พวก PHP ละจะทำอย่างไร

1. ให้กดปุ่ม Ctrl+Shift+P เพื่อเปิดช่อง Command แล้วพิมพ์ Browser Sync: Proxy mode in browser กดปุ่ม Enter

2. โปรแกรมจะรอให้เราป้อน url เข้าไป ให้ป้อน http://localhost หรือ http://localhost/ชื่อโฟลเดอร์  แล้วแต่ว่าจะกำหนดอะไรไป
   เช่น http://localhost/kasem1  แล้ว Enter 2 ครั้ง ก็จะปรากฎโปรแกรม Browser แสดงขึ้นมา

ถึงตอนนี้ลองแก้โค้ดคำสั่ง แล้ว Save ดู ที่ browser ก็จะเปลี่ยนตามอัตโนมัติด้วยเช่นกัน

แปลกแต่จริง ที่ Microsoft พัฒนา VS Code มาให้ใช้งาน แต่..... ไม่มีเมนู Print มาให้
ดังนั้นหากต้องการพิมพ์คำสั่งออกทางเครื่องพิมพ์ก็ต้องไปหาดาวน์โหล Extension มาใช้งาน

สามารถเข้าไปดาวน์โหลดส่วนเสริม PrintCode ได้ที่
https://marketplace.visualstudio.com/items?itemName=nobuhito.printcode

หลังจากติดตั้งส่วนเสริม PrintCode เรียบร้อยแล้ว 
ทำการเรียกใช้งานโดยกดปุ่ม Ctrk + Shift + P
พิมพ์ PrintCode ดังภาพ แล้วคลิกเรียกใช้งาน ดังภาพ

หอมปากหอมคอสำหรับการเริ่มใช้งาน VS Code เบื้องต้น

เขียนโปรแกรมง่ายนิดเดียว ที่เหลือยากหมด
สวัสดี