วิธีการ เปิดไฟล์ HTML ใน Visual Studio Code

ดาวน์โหลดบทความ
ร่วมเขียน โดย Stan Kats

ดาวน์โหลดบทความ

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 ให้คุณเอง

วิธีการ 1
วิธีการ 1 ของ 4:

สร้าง เปิด และเซฟไฟล์ HTML

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1e\/Run-a-HTML-File-in-Visual-Studio-Code-Step-1-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1e\/Run-a-HTML-File-in-Visual-Studio-Code-Step-1-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ไอคอนของ 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 จากนั้นติดตั้งไปตามขั้นตอนได้เลย
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d6\/Run-a-HTML-File-in-Visual-Studio-Code-Step-2-Version-3.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d6\/Run-a-HTML-File-in-Visual-Studio-Code-Step-2-Version-3.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เลือกทำตามขั้นตอนต่อไปนี้ เพื่อเปิด หรือสร้างไฟล์ใหม่
    • ถ้าจะสร้างไฟล์ใหม่ ให้คลิก File ในแถบเมนูด้านบน แล้วคลิก New File จากนั้นเริ่ม พิมพ์โค้ด HTML ได้เลย
    • ถ้าจะเปิดไฟล์ที่มี ให้คลิก File ในแถบเมนูด้านบน แล้วคลิก Open File ไปยังไฟล์ HTML ที่จะเปิด แล้วคลิกเพื่อเลือก จากนั้นคลิก Open
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/64\/Run-a-HTML-File-in-Visual-Studio-Code-Step-3-Version-3.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/64\/Run-a-HTML-File-in-Visual-Studio-Code-Step-3-Version-3.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    พอพร้อมเปิดไฟล์ HTML ใน Visual Studio Code แล้ว ขั้นแรกก็ต้องเซฟไฟล์เป็น HTML ซะก่อน พอเซฟไฟล์ HTML แล้ว ก็ เปิดไฟล์ ในเบราว์เซอร์ที่ถนัดได้เลย ต่อไปนี้เป็นขั้นตอนการเซฟไฟล์ HTML ใน Visual Studio Code
    • คลิก File ในแถบเมนูด้านบน
    • คลิก Save as
    • พิมพ์ชื่อไฟล์ข้าง "File Name"
    • เลือก " HTML " ในเมนูที่ขยายลงมาข้าง "Save as type"
    • คลิก Save
    โฆษณา
วิธีการ 2
วิธีการ 2 ของ 4:

ใช้ Terminal

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5c\/Run-a-HTML-File-in-Visual-Studio-Code-Step-4-Version-3.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5c\/Run-a-HTML-File-in-Visual-Studio-Code-Step-4-Version-3.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ไอคอนของ Visual Studio Code จะเป็นโบว์สีฟ้า ให้คลิกไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code ขึ้นมา ไอคอนนี้ปกติจะอยู่ในเมนู Windows Start ของ Windows ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Apps ของ Linux
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/96\/Run-a-HTML-File-in-Visual-Studio-Code-Step-5-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/96\/Run-a-HTML-File-in-Visual-Studio-Code-Step-5-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ถ้ายังไม่ได้ทำ ให้เปิดไฟล์ HTML ที่มี หรือสร้างไฟล์ HTML ใหม่ แล้วเซฟเป็นไฟล์ HTML ถ้าเปิดไฟล์ HTML ไว้แล้ว ให้คลิก tab ที่มีไฟล์ HTML ด้านบนของหน้าจอ
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/34\/Run-a-HTML-File-in-Visual-Studio-Code-Step-6-Version-3.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/34\/Run-a-HTML-File-in-Visual-Studio-Code-Step-6-Version-3.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    โดยคลิก Terminal ด้านบนของหน้าจอ แล้วคลิก New Terminal การใช้ Terminal เป็นวิธีเดียวที่จะเปิดไฟล์ HTML ใน Visual Studio Code ได้โดยไม่ต้องพึ่ง extension แต่ก็จะยุ่งยากกว่าเช่นกัน
    • หรือคลิก View ด้านบน แล้วคลิก Terminal
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a2\/Run-a-HTML-File-in-Visual-Studio-Code-Step-7-Version-3.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-7-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a2\/Run-a-HTML-File-in-Visual-Studio-Code-Step-7-Version-3.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-7-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เพื่อไปยังตำแหน่งที่มีไฟล์ 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" แทน)
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/00\/Run-a-HTML-File-in-Visual-Studio-Code-Step-8-Version-3.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/00\/Run-a-HTML-File-in-Visual-Studio-Code-Step-8-Version-3.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เช่น ถ้าอยากเปิดไฟล์ index HTML ให้พิมพ์ start index.html แล้วกด Enter เพื่อเปิดไฟล์ HTML ขึ้นมาในอีกหน้าต่าง แล้วดูตัวอย่างไฟล์ HTML ได้
    • ถ้าจะปิด preview ให้คลิกไอคอน "x" ด้านบนของหน้าต่าง [1]
    โฆษณา
วิธีการ 3
วิธีการ 3 ของ 4:

ใช้ "HTML Preview" Extension

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Run-a-HTML-File-in-Visual-Studio-Code-Step-9-Version-3.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-9-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Run-a-HTML-File-in-Visual-Studio-Code-Step-9-Version-3.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-9-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ไอคอนของ Visual Studio Code จะเป็นโบว์สีฟ้า ให้คลิกไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code ขึ้นมา ไอคอนนี้ปกติจะอยู่ในเมนู Windows Start ของ Windows ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Apps ของ Linux
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/19\/Run-a-HTML-File-in-Visual-Studio-Code-Step-10-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Run-a-HTML-File-in-Visual-Studio-Code-Step-10-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ไอคอนจะเป็นสี่เหลี่ยม 4 อัน ในแถบเมนูทางซ้าย คลิกแล้วจะเห็นเมนูค้นหา Extensions
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/57\/Run-a-HTML-File-in-Visual-Studio-Code-Step-11-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-11-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/57\/Run-a-HTML-File-in-Visual-Studio-Code-Step-11-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-11-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    แถบค้นหาจะอยู่ด้านบนของเมนู Extensions ทางซ้าย จะมีรายชื่อ extensions ที่ตรงกับคำค้นหาโผล่มา "HTML Preview" เป็น extension สำหรับให้ Visual Studio Code แสดงตัวอย่างไฟล์ HTML ใน Visual Studio Code เป็นแบบแบ่งครึ่งหน้าจอ หรือแบบเต็มหน้าต่างก็ได้
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-12-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-12-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-12-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-12-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ปกติจะเป็น extension แรกด้านบนของรายชื่อ extension พัฒนาโดย Thomas Haakon Townsend จะเห็นไอคอนโล่สีส้ม มีเลข "5" ตรงกลาง (โลโก้ HTML 5)
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3e\/Run-a-HTML-File-in-Visual-Studio-Code-Step-13-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-13-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3e\/Run-a-HTML-File-in-Visual-Studio-Code-Step-13-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-13-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ล่างหัวข้อ "HTML Preview" ในหน้า information ทางขวาของเมนู extensions เพื่อติดตั้ง extension แล้วรอ 1 - 2 นาทีจนติดตั้งเสร็จ
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-14-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-14-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-14-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-14-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ถ้ายังไม่ได้ทำ ให้เปิดไฟล์ HTML ที่มี หรือสร้างไฟล์ HTML ใหม่ แล้วเซฟเป็นไฟล์ HTML ถ้าเปิดไฟล์ HTML ไว้แล้ว ให้คลิก tab ที่มีไฟล์ HTML ด้านบนของหน้าจอเพื่อดูไฟล์
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a0\/Run-a-HTML-File-in-Visual-Studio-Code-Step-15-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-15-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a0\/Run-a-HTML-File-in-Visual-Studio-Code-Step-15-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-15-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ไอคอนจะเป็นการแบ่งหน้าจอ มีแว่นขยายทางซ้าย ไอคอนจะอยู่มุมขวาบนของหน้าจอ คลิกแล้วจะมีตัวอย่างไฟล์ HTML ให้ดูแบบแบ่งหน้าจอใน Visual Studio Code
    • กด Alt ค้างไว้ แล้วคลิกปุ่ม preview เพื่อดูตัวอย่างโค้ด HTML แบบเต็มจอ
    • ถ้าจะปิด preview ให้คลิกไอคอน "x" ใน tab preview ด้านบนของหน้าจอ
    โฆษณา
วิธีการ 4
วิธีการ 4 ของ 4:

ใช้ "Open in Browser" Extension

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-16-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-16-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-16-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-16-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ไอคอนของ Visual Studio Code จะเป็นโบว์สีฟ้า ให้คลิกไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code ขึ้นมา ไอคอนนี้ปกติจะอยู่ในเมนู Windows Start ของ Windows ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Apps ของ Linux
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Run-a-HTML-File-in-Visual-Studio-Code-Step-17-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-17-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Run-a-HTML-File-in-Visual-Studio-Code-Step-17-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-17-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ไอคอนจะเป็นสี่เหลี่ยม 4 อัน ในแถบเมนูทางซ้าย คลิกแล้วจะเห็นเมนูค้นหา Extensions
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/38\/Run-a-HTML-File-in-Visual-Studio-Code-Step-18-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-18-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/38\/Run-a-HTML-File-in-Visual-Studio-Code-Step-18-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-18-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    แถบค้นหาจะอยู่ด้านบนของเมนู Extensions ทางซ้าย แล้วจะเห็นรายชื่อ extensions ที่ตรงกับคำค้นหา "Open in browser" เป็น extension ของ Visual Studio Code ที่ให้คุณเปิดไฟล์ HTML ในเบราว์เซอร์ที่ต้องการ จากใน Visual Studio Code ได้
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2a\/Run-a-HTML-File-in-Visual-Studio-Code-Step-19-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-19-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2a\/Run-a-HTML-File-in-Visual-Studio-Code-Step-19-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-19-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ปกติจะเป็น extension แรกด้านบนของรายชื่อ อันที่เป็นตัวพิมพ์เล็กทั้งหมด และพัฒนาโดย TechER ให้คลิก extension เพื่อเลือก
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/61\/Run-a-HTML-File-in-Visual-Studio-Code-Step-20-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-20-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/61\/Run-a-HTML-File-in-Visual-Studio-Code-Step-20-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-20-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ล่างหัวข้อ "open in browser" ในหน้า information ทางขวาของเมนู extensions เพื่อติดตั้ง extension แล้วรอ 1 - 2 นาทีจนติดตั้งเสร็จ
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-21-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-21-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7b\/Run-a-HTML-File-in-Visual-Studio-Code-Step-21-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-21-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ถ้ายังไม่ได้ทำ ให้เปิดไฟล์ HTML ที่มี หรือสร้างไฟล์ HTML ใหม่ แล้วเซฟเป็นไฟล์ HTML ถ้าเปิดไฟล์ HTML ไว้แล้ว ให้คลิก tab ที่มีไฟล์ HTML ด้านบนของหน้าจอเพื่อดูไฟล์
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/Run-a-HTML-File-in-Visual-Studio-Code-Step-22-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-22-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/Run-a-HTML-File-in-Visual-Studio-Code-Step-22-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-22-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    แล้วจะมีเมนูคลิกขวาโผล่มา
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Run-a-HTML-File-in-Visual-Studio-Code-Step-23-Version-2.jpg\/v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-23-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Run-a-HTML-File-in-Visual-Studio-Code-Step-23-Version-2.jpg\/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code-Step-23-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เพื่อเปิดไฟล์ HTML ในเบราว์เซอร์หลักของเครื่อง เพื่อดูไฟล์ HTML [2]
    • หรือคลิก Open in Other Browser แล้วดับเบิลคลิกเบราว์เซอร์ที่ต้องการ
    • ถ้ามีให้เลือกเบราว์เซอร์หลัก ให้คลิกเบราว์เซอร์ที่จะใช้เปิดไฟล์ แล้วคลิก Ok
    โฆษณา

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

วิธีการ
ดาวน์โหลดวิดีโอจากทุกเว็บไซต์ได้แบบฟรีๆ
วิธีการ
แก้ปัญหาเข้าบางเว็บไม่ได้
วิธีการ
หาวันที่เผยแพร่ข้อมูลของเว็บไซต์
วิธีการ
ดูว่าใครแชร์โพสต์ของคุณบนเฟซบุ๊ก
วิธีการ
แก้ปัญหาเซิร์ฟเวอร์ DNS ไม่ตอบสนอง
วิธีการ
เช็คตำแหน่งปัจจุบันใน Google Maps
รู้ความหมายของอีโมจิรูปหัวใจสีดำ
วิธีการ
ตั้งชื่ออีเมลให้โดนใจ
วิธีการ
เชื่อมต่ออินเทอร์เน็ตในคอมพิวเตอร์ Windows
วิธีการ
เปิดใช้งานคุกกี้ในเว็บเบราว์เซอร์อินเตอร์เน็ตของคุณ
วิธีการ
หาละติจูดกับลองจิจูดใน Google Maps
วิธีการ
เว้นวรรคห่างๆ ใน HTML
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
วิธีการ
หา URL ของเว็บไซต์
โฆษณา

ข้อมูลอ้างอิง

  1. ↑ http://www.techtutorhub.com/article/How-to-Create-Run-HTML-Website-from-Visual-Studio-Code/80
  2. ↑ https://medium.com/geekculture/how-to-run-html-in-visual-studio-code-ba4c6818c919

เกี่ยวกับวิกิฮาวนี้

ในภาษาอื่น
มีการเข้าถึงหน้านี้ 8,061 ครั้ง

บทความนี้เป็นประโยชน์กับคุณไหม

โฆษณา