ดาวน์โหลดบทความดาวน์โหลดบทความX
บทความนี้ ร่วมเขียน โดย Stan Kats. สแตน แคทส์ เป็นนักเทคโนโลยีมืออาชีพ และเป็น COO และหัวหน้านักเทคโนโลยีของ STG IT Consulting Group ในเวสต์ฮอลลีวูด แคลิฟอร์เนีย สแตนมีการแก้ปัญหาทางเทคโนโลยีแบบครบวงจรให้แก่ธุรกิจต่างๆ ผ่านบริการด้านไอทีที่มีการจัดการ และสำหรับบุคคลผ่านธุรกิจบริการผู้บริโภคชื่อ Stan's Tech Garage สแตนสำเร็จการศึกษาระดับปริญญาตรีศิลปศาสตรบัณฑิตสาขาความสัมพันธ์ระหว่างประเทศจากมหาวิทยาลัยเซาเทิร์นแคลิฟอร์เนีย เขาเริ่มต้นอาชีพโดยทำงานที่ Fortune 500 IT world สแตนก่อตั้งบริษัทเพื่อเสนอความชำนาญระดับองค์กรให้แก่ธุรกิจขนาดเล็กและบุคคลต่างๆ
บทความนี้ถูกเข้าชม 7,527 ครั้ง
Visual Studio Code เป็น source code editor ที่พัฒนาโดย Microsoft แต่มีให้ใช้งานกันทั้งใน Windows, macOS และ Linux เลย คุณใช้เขียนและแก้ไขโค้ดเขียนโปรแกรมภาษาต่างๆ ได้ เช่น HTML แต่จะทำยังไงถ้าอยาก run โค้ด HTML ว่าจะออกมาแบบไหน โชคดีที่มีสารพัด extensions ไว้ใช้กับ Visual Studio Code แล้ว run โค้ด HTML ได้ง่ายๆ จากใน Visual Studio Code เลย หรือจะเปิดไฟล์ HTML ด้วย Terminal ก็ได้ บทความวิกิฮาวนี้จะแนะนำวิธีการเปิดไฟล์ HTML ใน Visual Studio Code ให้คุณเอง
ขั้นตอน
เปิด Visual Studio Code. ไอคอนของ Visual Studio Code จะเป็นโบว์สีฟ้า ให้คลิกไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code ขึ้นมา ไอคอนนี้ปกติจะอยู่ในเมนู Windows Start ของ Windows ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Apps ของ Linux- ถ้ายังไม่ได้ดาวน์โหลด ก็ไปดาวน์โหลด Visual Studio Code ได้ฟรี ที่ https://code.visualstudio.com/ แค่คลิกปุ่ม Download ในหน้าเว็บ แล้วเปิดไฟล์ติดตั้งในเบราว์เซอร์ หรือโฟลเดอร์ Downloads จากนั้นติดตั้งไปตามขั้นตอนได้เลย
เปิดหรือสร้างไฟล์ HTML ใหม่. เลือกทำตามขั้นตอนต่อไปนี้ เพื่อเปิด หรือสร้างไฟล์ใหม่- ถ้าจะสร้างไฟล์ใหม่ ให้คลิก File ในแถบเมนูด้านบน แล้วคลิก New File จากนั้นเริ่มพิมพ์โค้ด HTML ได้เลย
- ถ้าจะเปิดไฟล์ที่มี ให้คลิก File ในแถบเมนูด้านบน แล้วคลิก Open File ไปยังไฟล์ HTML ที่จะเปิด แล้วคลิกเพื่อเลือก จากนั้นคลิก Open
เซฟไฟล์เป็น HTML. พอพร้อมเปิดไฟล์ HTML ใน Visual Studio Code แล้ว ขั้นแรกก็ต้องเซฟไฟล์เป็น HTML ซะก่อน พอเซฟไฟล์ HTML แล้ว ก็เปิดไฟล์ในเบราว์เซอร์ที่ถนัดได้เลย ต่อไปนี้เป็นขั้นตอนการเซฟไฟล์ HTML ใน Visual Studio Code- คลิก File ในแถบเมนูด้านบน
- คลิก Save as
- พิมพ์ชื่อไฟล์ข้าง "File Name"
- เลือก "HTML" ในเมนูที่ขยายลงมาข้าง "Save as type"
- คลิก Save
โฆษณา
เปิด Visual Studio Code. ไอคอนของ Visual Studio Code จะเป็นโบว์สีฟ้า ให้คลิกไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code ขึ้นมา ไอคอนนี้ปกติจะอยู่ในเมนู Windows Start ของ Windows ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Apps ของ Linux
เปิดหรือสร้างไฟล์ HTML ใหม่. ถ้ายังไม่ได้ทำ ให้เปิดไฟล์ HTML ที่มี หรือสร้างไฟล์ HTML ใหม่ แล้วเซฟเป็นไฟล์ HTML ถ้าเปิดไฟล์ HTML ไว้แล้ว ให้คลิก tab ที่มีไฟล์ HTML ด้านบนของหน้าจอ
เปิด Terminal ใหม่. โดยคลิก Terminal ด้านบนของหน้าจอ แล้วคลิก New Terminal การใช้ Terminal เป็นวิธีเดียวที่จะเปิดไฟล์ HTML ใน Visual Studio Code ได้โดยไม่ต้องพึ่ง extension แต่ก็จะยุ่งยากกว่าเช่นกัน- หรือคลิก View ด้านบน แล้วคลิก Terminal
พิมพ์ cd ตามด้วย path ของไฟล์ HTML แล้วกด ↵ Enter. เพื่อไปยังตำแหน่งที่มีไฟล์ HTML เช่น ถ้าไฟล์ HTML ที่ต้องการ เป็นไฟล์ HTML ในโฟลเดอร์ Documents ให้พิมพ์ cd \Users\username\Documents แล้วกด Enter- ถ้าเซฟไฟล์ HTML ไว้ในไดรฟ์อื่น (อักษรอื่น) ไม่ใช่ที่มีระบบปฏิบัติการ ก็ต้องสลับไปที่อักษรประจำไดรฟ์นั้นใน terminal ก่อน ถึงจะไปตาม path ของไฟล์ HTML ได้ โดยพิมพ์อักษรประจำไดรฟ์ (เช่น D: ถ้าเป็นไดรฟ์ D:) แล้วกด Enter
- ถ้าไม่แน่ใจว่าเซฟไฟล์ HTML ไว้ที่ไหน ให้คลิกขวา tab ของไฟล์ HTML ด้านบนของหน้าจอ แล้วคลิก Copy Path พิมพ์ cd ใน Terminal จากนั้น paste path ต่อท้าย แล้วลบชื่อไฟล์ท้าย path สุดท้ายกด Enter
- ถ้าชื่อโฟลเดอร์ไหนใน path ของไฟล์ HTML มีการเว้นวรรค Terminal จะไปที่โฟลเดอร์นั้นไม่ได้ ให้ใช้ File Explorer ใน Windows หรือ Finder ใน Mac ไปยังโฟลเดอร์ที่ชื่อเว้นวรรค แล้วเปลี่ยนชื่อโฟลเดอร์ไม่ให้มีเว้นวรรค (เช่น ถ้ามีโฟลเดอร์ชื่อ "HTML Files" ให้เปลี่ยนเป็น "HTML_Files" แทน)
พิมพ์ start ตามด้วยชื่อไฟล์ HTML แล้วกด ↵ Enter. เช่น ถ้าอยากเปิดไฟล์ index HTML ให้พิมพ์ start index.html แล้วกด Enter เพื่อเปิดไฟล์ HTML ขึ้นมาในอีกหน้าต่าง แล้วดูตัวอย่างไฟล์ HTML ได้- ถ้าจะปิด preview ให้คลิกไอคอน "x" ด้านบนของหน้าต่าง[1]
โฆษณา
เปิด Visual Studio Code. ไอคอนของ Visual Studio Code จะเป็นโบว์สีฟ้า ให้คลิกไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code ขึ้นมา ไอคอนนี้ปกติจะอยู่ในเมนู Windows Start ของ Windows ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Apps ของ Linux
คลิกปุ่ม Extensions. ไอคอนจะเป็นสี่เหลี่ยม 4 อัน ในแถบเมนูทางซ้าย คลิกแล้วจะเห็นเมนูค้นหา Extensions
พิมพ์ HTML Preview ในแถบค้นหา. แถบค้นหาจะอยู่ด้านบนของเมนู Extensions ทางซ้าย จะมีรายชื่อ extensions ที่ตรงกับคำค้นหาโผล่มา "HTML Preview" เป็น extension สำหรับให้ Visual Studio Code แสดงตัวอย่างไฟล์ HTML ใน Visual Studio Code เป็นแบบแบ่งครึ่งหน้าจอ หรือแบบเต็มหน้าต่างก็ได้
คลิก "HTML Preview" extension. ปกติจะเป็น extension แรกด้านบนของรายชื่อ extension พัฒนาโดย Thomas Haakon Townsend จะเห็นไอคอนโล่สีส้ม มีเลข "5" ตรงกลาง (โลโก้ HTML 5)
คลิก Install. ล่างหัวข้อ "HTML Preview" ในหน้า information ทางขวาของเมนู extensions เพื่อติดตั้ง extension แล้วรอ 1 - 2 นาทีจนติดตั้งเสร็จ
เปิดหรือสร้างไฟล์ HTML ใหม่. ถ้ายังไม่ได้ทำ ให้เปิดไฟล์ HTML ที่มี หรือสร้างไฟล์ HTML ใหม่ แล้วเซฟเป็นไฟล์ HTML ถ้าเปิดไฟล์ HTML ไว้แล้ว ให้คลิก tab ที่มีไฟล์ HTML ด้านบนของหน้าจอเพื่อดูไฟล์
คลิกปุ่ม preview แบ่งจอ. ไอคอนจะเป็นการแบ่งหน้าจอ มีแว่นขยายทางซ้าย ไอคอนจะอยู่มุมขวาบนของหน้าจอ คลิกแล้วจะมีตัวอย่างไฟล์ HTML ให้ดูแบบแบ่งหน้าจอใน Visual Studio Code- กด Alt ค้างไว้ แล้วคลิกปุ่ม preview เพื่อดูตัวอย่างโค้ด HTML แบบเต็มจอ
- ถ้าจะปิด preview ให้คลิกไอคอน "x" ใน tab preview ด้านบนของหน้าจอ
โฆษณา
เปิด Visual Studio Code. ไอคอนของ Visual Studio Code จะเป็นโบว์สีฟ้า ให้คลิกไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code ขึ้นมา ไอคอนนี้ปกติจะอยู่ในเมนู Windows Start ของ Windows ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Apps ของ Linux
คลิกปุ่ม Extensions. ไอคอนจะเป็นสี่เหลี่ยม 4 อัน ในแถบเมนูทางซ้าย คลิกแล้วจะเห็นเมนูค้นหา Extensions
พิมพ์ open in browser ในแถบค้นหา. แถบค้นหาจะอยู่ด้านบนของเมนู Extensions ทางซ้าย แล้วจะเห็นรายชื่อ extensions ที่ตรงกับคำค้นหา "Open in browser" เป็น extension ของ Visual Studio Code ที่ให้คุณเปิดไฟล์ HTML ในเบราว์เซอร์ที่ต้องการ จากใน Visual Studio Code ได้
คลิก "open in browser" extension. ปกติจะเป็น extension แรกด้านบนของรายชื่อ อันที่เป็นตัวพิมพ์เล็กทั้งหมด และพัฒนาโดย TechER ให้คลิก extension เพื่อเลือก
คลิก Install. ล่างหัวข้อ "open in browser" ในหน้า information ทางขวาของเมนู extensions เพื่อติดตั้ง extension แล้วรอ 1 - 2 นาทีจนติดตั้งเสร็จ
เปิดหรือสร้างไฟล์ HTML ใหม่. ถ้ายังไม่ได้ทำ ให้เปิดไฟล์ HTML ที่มี หรือสร้างไฟล์ HTML ใหม่ แล้วเซฟเป็นไฟล์ HTML ถ้าเปิดไฟล์ HTML ไว้แล้ว ให้คลิก tab ที่มีไฟล์ HTML ด้านบนของหน้าจอเพื่อดูไฟล์
คลิกขวาตรงไหนก็ได้ในโค้ด HTML. แล้วจะมีเมนูคลิกขวาโผล่มา
คลิก Open in Default Browser. เพื่อเปิดไฟล์ HTML ในเบราว์เซอร์หลักของเครื่อง เพื่อดูไฟล์ HTML[2]- หรือคลิก Open in Other Browser แล้วดับเบิลคลิกเบราว์เซอร์ที่ต้องการ
- ถ้ามีให้เลือกเบราว์เซอร์หลัก ให้คลิกเบราว์เซอร์ที่จะใช้เปิดไฟล์ แล้วคลิก Ok
โฆษณา
ข้อมูลอ้างอิง
เกี่ยวกับวิกิฮาวนี้
นักเทคโนโลยีมืออาชีพ
บทความนี้ ร่วมเขียน โดย Stan Kats. สแตน แคทส์ เป็นนักเทคโนโลยีมืออาชีพ และเป็น COO และหัวหน้านักเทคโนโลยีของ STG IT Consulting Group ในเวสต์ฮอลลีวูด แคลิฟอร์เนีย สแตนมีการแก้ปัญหาทางเทคโนโลยีแบบครบวงจรให้แก่ธุรกิจต่างๆ ผ่านบริการด้านไอทีที่มีการจัดการ และสำหรับบุคคลผ่านธุรกิจบริการผู้บริโภคชื่อ Stan's Tech Garage สแตนสำเร็จการศึกษาระดับปริญญาตรีศิลปศาสตรบัณฑิตสาขาความสัมพันธ์ระหว่างประเทศจากมหาวิทยาลัยเซาเทิร์นแคลิฟอร์เนีย เขาเริ่มต้นอาชีพโดยทำงานที่ Fortune 500 IT world สแตนก่อตั้งบริษัทเพื่อเสนอความชำนาญระดับองค์กรให้แก่ธุรกิจขนาดเล็กและบุคคลต่างๆ บทความนี้ถูกเข้าชม 7,527 ครั้ง
หมวดหมู่: อินเทอร์เน็ต
มีการเข้าถึงหน้านี้ 7,527 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
⚠️ Disclaimer:
Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
โฆษณา
