วิธีเปิดในเบราว์เซอร์จาก VS Code

หากคุณใช้ไฟล์ HTML, PHP หรือ JS คุณอาจต้องการเปิดในเบราว์เซอร์ของคุณจาก Visual Studio Code อย่างไรก็ตาม ไม่มีตัวเลือกแบบบูรณาการที่จะทำเช่นนั้น สิ่งนี้อาจทำให้คุณหงุดหงิด โดยเฉพาะอย่างยิ่งหากคุณต้องการดูผลลัพธ์ของการเข้ารหัสอย่างรวดเร็ว

โชคดีที่คุณสามารถเปิดใช้ฟังก์ชัน “เปิดในเบราว์เซอร์” ด้วยวิธีอื่นได้ บทความนี้จะแสดงวิธีการทำเช่นนั้น

วิธีเปิดในเบราว์เซอร์ใน VS Code บนพีซี Windows

วิธีที่ง่ายที่สุดในการรับตัวเลือกเปิดในเบราว์เซอร์สำหรับ Visual Studio Code ใน Windows คือการใช้ส่วนขยาย การติดตั้งส่วนขยายใน Visual Studio Code ค่อนข้างตรงไปตรงมา เช่นเดียวกับการใช้ส่วนขยายเพื่อเปิดไฟล์ในเบราว์เซอร์

1. เปิด ไฟล์HTML ของคุณในVisual Studio Code Editor
   
2. บนแถบเครื่องมือแนวตั้งด้านซ้ายสุด ให้คลิก "ส่วนขยาย" หรือคุณสามารถใช้แป้นพิมพ์ลัด “Ctrl + Shift + X” เพื่อเปิดใช้ส่วนขยาย
   
3. คลิกที่แถบค้นหาเพื่อเปิดใช้งานการเขียน
   
4. ป้อนข้อมูล "เปิดในเบราว์เซอร์" เลือกส่วนขยายที่ตรงกับคำค้นหาของคุณ
   
5. คลิกปุ่ม "ติดตั้ง"
   
6. โหลดโปรแกรมใหม่
7. เลือก Explorer จากแถบเครื่องมือด้านซ้าย
   
8. ค้นหาไฟล์ HTML ของคุณใน Explorer แล้วคลิกขวาที่ไฟล์ เลือก “เปิดในเบราว์เซอร์เริ่มต้น” หรือ “เปิดในเบราว์เซอร์อื่น”
   
9. หากคุณเลือกตัวเลือก “เปิดในเบราว์เซอร์เริ่มต้น” ไฟล์ HTML จะเปิดขึ้นในเบราว์เซอร์ใดก็ตามที่ตั้งค่าเป็นค่าเริ่มต้น หากคุณเลือก “เปิดในเบราว์เซอร์อื่น” คุณจะต้องระบุว่าจะใช้เบราว์เซอร์ใด

คุณจะพบส่วนขยายที่เป็น ประโยชน์มากมายในVisual Studio Marketplace หรือคุณสามารถรับส่วนขยาย Open in Browser พร้อมบทวิจารณ์เชิงบวกจากผู้ใช้ได้ที่นี่: ส่วนขยาย 1 , ส่วนขยาย 2 , ส่วนขยาย 3 , ส่วนขยาย 4

วิธีเปิดในเบราว์เซอร์ใน VS Code บน Mac

Visual Studio Code สามารถอัปเกรดได้โดยใช้ส่วนขยายต่างๆ ที่เพิ่มฟังก์ชันการทำงานของโปรแกรม ส่วนขยายประเภทหนึ่งสามารถเปิดใช้งานการเปิดไฟล์ HTML, PHP หรือ JS ในเบราว์เซอร์เริ่มต้นหรือเบราว์เซอร์อื่น ต่อไปนี้คือวิธีเปิดใช้งานตัวเลือกนั้นบน Mac

1. ใช้Visual Studio Code Editorเปิดไฟล์ที่ต้องการ
   
2. ไปที่แถบเครื่องมือด้านซ้ายแล้วเลือก “ส่วนขยาย”
   
3. คลิกที่แถบค้นหาในแผงส่วนขยายและเขียนว่า “เปิดในเบราว์เซอร์”
   
4. เลือกส่วนขยายและคลิก "ติดตั้ง"
   
5. โหลดซอฟต์แวร์ซ้ำ
6. ไปที่แถบเครื่องมือด้านซ้ายแล้วเลือก Explorer
   
7. ค้นหาไฟล์ที่คุณต้องการเปิดในแผง Explorer และคลิกขวาที่ไฟล์นั้น เลือก “เปิดในเบราว์เซอร์เริ่มต้น” หรือ “เปิดในเบราว์เซอร์อื่น”
   
8. ตัวเลือก “เปิดในเบราว์เซอร์เริ่มต้น” จะเปิดไฟล์โดยใช้เบราว์เซอร์ที่เลือกไว้ล่วงหน้า “เปิดในเบราว์เซอร์อื่น” จะแสดงข้อความแจ้งให้คุณเลือกหนึ่งในเบราว์เซอร์ที่ติดตั้งในเครื่องของคุณ
   

Visual Studio Marketplaceมีส่วนขยายให้เลือกมากมายที่สามารถเพิ่มฟังก์ชันใหม่ให้กับ Visual Studio Code เว็บไซต์นี้ควรค่าแก่การสำรวจหากคุณต้องการปรับแต่งโปรแกรมเพิ่มเติม และหากคุณสนใจส่วนขยาย Open in Browser โดยเฉพาะ ต่อไปนี้เป็นคำแนะนำบางประการ: ส่วนขยาย 1 , ส่วนขยาย 2 , ส่วนขยาย 3 , ส่วนขยาย 4

เปิดในเบราว์เซอร์ทางลัด

เกือบทุกส่วนขยาย Open in Browser สำหรับ Visual Studio Code มาพร้อมกับแป้นพิมพ์ลัดที่เปิดใช้งาน อย่างไรก็ตาม ทางลัดจะไม่เหมือนกัน แต่ส่วนขยายแต่ละรายการมีชุดคีย์เฉพาะที่จะเปิดใช้งานการเปิดไฟล์ในเบราว์เซอร์ของคุณ

ต่อไปนี้คือแป้นพิมพ์ลัดสำหรับส่วนขยายที่แนะนำในบทความนี้

1. ส่วนขยาย 1: “Ctrl + 1” บน Windows, “Command + 1” บน Mac
   
   
2. ส่วนขยาย 2: “Ctrl + Alt + O” บน Windows, “Command + Option (Alt) + O” บน Mac
   
3. ส่วนขยาย 3: “Ctrl + Shift + F9” บน Windows, “Command + Shift + F9” บน Mac
   
   
4. ส่วนขยาย 4: “Ctrl + Shift + P” บน Windows, “Command + Shift + P” บน Mac
   
   

โปรดทราบว่าทางลัดเหล่านี้จะใช้ได้กับส่วนขยายที่เกี่ยวข้องที่ลิงก์ในบทความนี้เท่านั้น หากคุณเลือกที่จะติดตั้งส่วนขยายอื่น ทางลัดที่เกี่ยวข้องน่าจะแสดงอยู่ในหน้า Marketplace

เรียกใช้ HTML ใน Visual Studio Code

หากคุณสนใจที่จะทำงานกับ HTML ใน Visual Studio Code ต่อไปนี้เป็นวิธีการเรียกใช้โค้ด HTML ภายในโปรแกรม

วิธีแรกประกอบด้วยการโหลดไฟล์ที่คุณต้องการเรียกใช้ด้วยตนเอง

1. เปิด Visual Studio Code และสร้างไฟล์ HTML ใหม่
   
2. ไปที่ “ไฟล์” จากนั้นคลิก “บันทึก”
   
3. ใช้ HTML:5 เปิดใช้งานเทมเพลตสำหรับ HTML จากนั้นเปิดไฟล์ที่คุณบันทึกไว้ในขั้นตอนที่ 2
   
4. ใช้ส่วนขยายเปิดในเบราว์เซอร์ที่คุณติดตั้งไว้ก่อนหน้านี้เพื่อเปิดไฟล์ในเบราว์เซอร์ของคุณ
5. เปิดเบราว์เซอร์ทิ้งไว้ กลับไปที่ Visual Studio Code แล้วแก้ไขไฟล์ HTML บันทึกการเปลี่ยนแปลงของคุณ
   
6. กลับไปที่เบราว์เซอร์แล้วคลิกรีเฟรช คุณควรเห็นหน้าเปลี่ยนไปตามการแก้ไขของคุณ
   
7. ทำซ้ำขั้นตอนที่ 5 และ 6 เพื่อตรวจสอบความคืบหน้าของคุณในขณะที่คุณแก้ไขไฟล์ HTML ต่อไป

วิธีการด้วยตนเองสามารถช่วยติดตามงานของคุณได้ อย่างไรก็ตาม มีวิธีแก้ไขที่ดีกว่าคือการโหลดอัตโนมัติ ตัวเลือกนี้จะทำให้คุณต้องติดตั้งส่วนขยายอื่น แต่ควรคุ้มค่ากับเวลา

1. ใน Visual Studio Code ให้ไปที่ส่วนขยายซึ่งอยู่ที่ด้านล่างของแถบเครื่องมือด้านซ้าย
   
2. ในแถบค้นหาส่วนขยาย พิมพ์ "เซิร์ฟเวอร์ที่ใช้งานจริง"
   
3. คลิกปุ่ม “ติดตั้ง” ถัดจากส่วนขยาย Live Server
   
4. สร้างและบันทึกไฟล์ HTML ใหม่
   
   
5. ใน Visual Studio Code Explorer ให้คลิกขวาที่ไฟล์ใหม่ของคุณ เลือก “เปิดเซิร์ฟเวอร์สด”
   
6. ไฟล์ HTML จะเปิดขึ้นในเบราว์เซอร์ เมื่อเสร็จแล้ว ให้ลองแก้ไขโค้ด HTML บันทึกความคืบหน้าของคุณ
   
   
7. ทันทีที่คุณสร้างการเปลี่ยนแปลงในโค้ดและบันทึก เบราว์เซอร์ของคุณควรรีเฟรชโดยแสดงเนื้อหาใหม่ คุณไม่จำเป็นต้องรีเฟรชหน้าด้วยตนเองและจะสามารถยืนยันการเปลี่ยนแปลงแบบเรียลไทม์แทนได้
   

ส่วนขยาย Visual Studio Code HTML ที่มีประโยชน์อื่นๆ

ตามที่กล่าวไว้ Visual Studio Marketplace เต็มไปด้วยเครื่องมือที่ยอดเยี่ยม ซึ่งหลายเครื่องมือมุ่งไปที่ HTML ต่อไปนี้เป็นส่วนขยายที่มีประโยชน์และให้คะแนนดีที่สุด 10 รายการสำหรับ HTML

• lit-plugin : เครื่องมือที่เน้นไวยากรณ์ ตรวจสอบการพิมพ์ และช่วยให้คุณกรอกรหัสโดยไม่มีข้อผิดพลาด ส่วนขยายนี้มีกฎที่ปรับแต่งได้
• SCSS ทุกที่ : ส่วนขยายเติมข้อความอัตโนมัติสำหรับคำจำกัดความของคลาสสำหรับ HTML, SCSS, Elixir, SASS, PHP, CSS และไฟล์ประเภทอื่นๆ อีกมากมาย
• ตัวอย่างเชิงมุม : เพิ่มตัวอย่างเชิงมุมเพื่อการใช้งานที่ง่ายใน HTML และ TypeScript ส่วนขยายทำงานโดยการแฉตัวอย่างข้อมูลเมื่อพิมพ์ออกมาบางส่วน
• ES6 String HTML : เปิดใช้งานการสนับสนุนรหัสสตริง es6 สำหรับการเน้นไวยากรณ์ ทำงานร่วมกับ HTML, CSS, XML, GLSL และรูปแบบอื่นๆ
• แยกแอตทริบิวต์ HTML : ส่วนขยายนี้จะแยกแอตทริบิวต์ HTML เช่นเดียวกับอุปกรณ์ประกอบฉากและคำสั่งเชิงมุม Vue และ React คุณสามารถใช้มันกับแท็กเปิดและแท็กปิดเอง เช่นเดียวกับการเลือกหลายรายการ
• Djaneiro – Django Snippets : คอลเลกชันตัวอย่างมากมายสำหรับเทมเพลต HTML ของ django การใช้ส่วนขยายนี้จะทำให้เวลาที่ใช้ในการพิมพ์สั้นลงอย่างมาก
• Live Preview : ส่วนขยาย Live Preview จาก Microsoft ช่วยให้สามารถโฮสต์เซิร์ฟเวอร์ภายในเครื่องได้ หากคุณมีโปรเจ็กต์ที่ไม่ได้ใช้ Angular, React หรือเครื่องมือเซิร์ฟเวอร์อื่นๆ ส่วนขยายนี้จะเปิดใช้งานการแสดงตัวอย่าง HTML แบบปกติและแบบฝังพร้อมการรีเฟรชหน้าตามเวลาจริง
• Oracle JET Core : ส่วนขยายนี้สร้างขึ้นโดย Oracle Corporation ให้การสนับสนุนอย่างเต็มที่สำหรับข้อมูล HTML ที่กำหนดเองของ Oracle JET ตัวอย่างที่รวมไว้จะเติมแอตทริบิวต์และแท็กของ JET โดยอัตโนมัติ
• การนำทาง CSS : เปิดใช้งานไปที่คำจำกัดความสำหรับ HTML เป็น CSS, HTML เป็น Less และ HTML เป็น Sass คำสั่ง Peek Definition ยังเปิดใช้งานอยู่
• ตัวแปลงอักขระเน้นเสียง HTML : แทนที่อักขระพิเศษด้วยเอนทิตี HTML ที่เหมาะสมอย่างราบรื่น ส่วนขยายนี้มีประโยชน์ตามสถานการณ์ แต่จำเป็นเมื่อต้องจัดการกับสตริงที่แปลเป็นภาษาท้องถิ่นได้

คุณสามารถเรียกใช้รหัส Visual Studio จากเบราว์เซอร์ของคุณ

นอกจากการเรียกใช้ไฟล์ HTML ในเบราว์เซอร์แล้ว ยังสามารถใช้ Visual Studio Code ทั้งหมดทางออนไลน์ได้อีกด้วย คุณต้องเปิดใช้เวอร์ชันเฉพาะของโปรแกรมที่พัฒนาขึ้นสำหรับการใช้งานเบราว์เซอร์

เป็นที่น่าสังเกตว่าเวอร์ชันนี้มีน้ำหนักเบากว่ามากเมื่อเทียบกับ Visual Studio Code บนเดสก์ท็อป อย่างไรก็ตาม มันสามารถเป็นโซลูชันที่ตรงไปตรงมาสำหรับพื้นที่เก็บข้อมูลและการนำทางไฟล์ที่ง่ายดาย รวมถึงการเปลี่ยนแปลงโค้ดเล็กน้อย

หากคุณต้องการลองใช้เบราว์เซอร์ Visual Studio Code คุณสามารถเริ่มต้นได้ทันทีโดยคลิกที่นี่

ทำให้ไฟล์ HTML ของคุณทำงานได้

การเปิดไฟล์ HTML ในเบราว์เซอร์ของคุณทำได้ง่ายด้วยส่วนขยายเฉพาะสำหรับ Visual Studio Code หากคุณตัดสินใจที่จะสำรวจข้อเสนอส่วนขยายมากมายสำหรับเครื่องมือเขียนโค้ดนี้ ฟังก์ชันเปิดในเบราว์เซอร์จะเป็นเพียงจุดเริ่มต้นของการเดินทางของคุณ

คุณเปิดไฟล์ HTML ในเบราว์เซอร์ที่คุณเลือกได้หรือไม่ คุณใช้ส่วนขยายใด แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง