कैसे Visual Studio Code में एक HTML फ़ाइल रन करें (Run a HTML File in Visual Studio Code)

Visual Studio Code माइक्रोसॉफ़्ट (Microsoft) द्वारा बनाया एक सोर्स कोड एडिटर है। ये Windows, macOS, और Linux के लिए उपलब्ध है। ये आपको HTML सहित कई तरह की कोडिंग लेंग्वेज में कोड लिखने और एडिट करने की सुविधा देता है। लेकिन जब आप अपने HTML कोड को देखने के लिए उसे रन करना चाहें, तब आप क्या करेंगे। अच्छी बात ये है कि विजुअल स्टुडियो कोड के लिए ऐसे कई सारे एक्सटैन्शन हैं, जो आपको Visual Studio Code के अंतर्गत आसानी से HTML कोड रन करने की सुविधा देते हैं। आप HTML फ़ाइल को रन करने के लिए टर्मिनल (Terminal) का इस्तेमाल कर सकते हैं। ये विकिहाउ गाइड आपको विजुअल स्टुडियो कोड में HTML फ़ाइल रन करना सिखाएगी।

विधि 1

विधि 1 का 4:

HTML फ़ाइल को बनाना, ओपन करना और सेव करना (Creating, Opening, and Saving an HTML File)

आर्टिकल डाउनलोड करें

1
विजुअल स्टुडियो कोड ओपन करें: विजुअल स्टुडियो कोड का एक आइकॉन होता है, जो एक ब्लू रिबन के जैसा दिखता है। विजुअल स्टुडियो कोड लॉन्च करने के लिए विजुअल स्टुडियो कोड आइकॉन को क्लिक करें। विंडोज पर इसे आप विंडोज स्टार्ट मेनू में, मैक पर Applications फोल्डर में या लिनक्स पर Apps मेनू में पा सकते हैं।
- अगर आपने पहले ऐसा नहीं किया है, तो आप https://code.visualstudio.com/ से मुफ्त में विजुअल स्टुडियो कोड डाउनलोड कर सकते हैं। वेब पेज पर केवल Download बटन को क्लिक करें और अपने वेब ब्राउज़र के अंदर से या Downloads फोल्डर से इन्स्टालेशन फ़ाइल ओपन करें। इन्स्टालेशन पूरा करने के लिए इन्सट्रक्शन फॉलो करें।
2
एक नई HTML फ़ाइल ओपन करें या तैयार करें: एक नई फ़ाइल ओपन करने या तैयार करने के लिए इनमें से किसी एक स्टेप का इस्तेमाल करें:
- एक नई फ़ाइल क्रिएट करने के लिए सबसे ऊपर मेनू बारे में File क्लिक करें। फिर New File क्लिक करें। अपना HTML कोड टाइप करना शुरू करें।
- एक मौजूदा फ़ाइल को ओपन करने के लिए, सबसे ऊपर के मेनू बार में File क्लिक करें। फिर Open File क्लिक करें। आप जिस HTML फ़ाइल को ओपन करना चाहते हैं, उस तक नेविगेट करें और उसे सिलेक्ट करने के लिए क्लिक करें। फिर Open क्लिक करें।
3
फ़ाइल को एक HTML फ़ाइल की तरह सेव करें: जब आप HTML फ़ाइल को विजुअल स्टुडियो कोड में रन करने को तैयार हों, तब आपको पहले फ़ाइल को एक HTML फ़ाइल की तरह सेव करने क जरूरत पड़ेगी। जब आप HTML फ़ाइल को सेव कर लेते हैं, फिर उसे अपनी पसंद के किसी भी ब्राउज़र में रन करें। अपनी HTML फ़ाइल को विजुअल स्टुडियो कोड में सेव करने के लिए इन दिए हुए स्टेप्स का इस्तेमाल करें:
- सबसे ऊपर मेनू बार में File क्लिक करें।
- Save as क्लिक करें।
- "File Name" के सामने एक फ़ाइल नेम एंटर करें।
- "HTML" सिलेक्ट करने के लिए "Save as type" के सामने ड्रॉप-डाउन मेनू का इस्तेमाल करें।
- Save क्लिक करें।

विधि 2

विधि 2 का 4:

टर्मिनल इस्तेमाल करना (Using the Terminal)

आर्टिकल डाउनलोड करें

विजुअल स्टुडियो कोड का एक आइकॉन होता है, जो एक ब्लू रिबन के जैसा दिखता है। विजुअल स्टुडियो कोड लॉन्च करने के लिए विजुअल स्टुडियो कोड आइकॉन को क्लिक करें। विंडोज पर इसे आप विंडोज स्टार्ट मेनू में, मैक पर Applications फोल्डर में या लिनक्स पर Apps मेनू में पा सकते हैं।
अगर आपने पहले ऐसा नहीं किया है, तो एक मौजूदा HTML फ़ाइल ओपन करें या फिर एक नई HTML फ़ाइल बनाएँ और उसे HTML फ़ारमैट में सेव कर लें। अगर आपके पास में पहले से HTML फ़ाइल खुली है, तो उसे देखने के लिए स्क्रीन के सबसे ऊपर मौजूद उस टैब को क्लिक करें, जिसमें आपकी HTML फ़ाइल मौजूद है।
3
एक नया टर्मिनल ओपन करें: ऐसा करने के लिए, स्क्रीन पर सबसे ऊपर Terminal क्लिक करें। फिर, New Terminal क्लिक करें। टर्मिनल एक एक्सटैन्शन का इस्तेमाल किए बिना विजुअल स्टुडियो कोड में अपनी HTML फ़ाइल को रन करने का एकमात्र तरीका है। ये साथ ही सबसे अधिक मुश्किल तरीका भी है।
- वैकल्पिक रूप से, आप सबसे ऊपर View क्लिक करके और फिर Terminal क्लिक कर सकते हैं।
4
cd को बाद में HTML फ़ाइल के पाथ के साथ में टाइप करें और ↵ Enter दबाएँ: ये आपको अपनी HTML फ़ाइल की लोकेशन तक नेविगेट कर देगा। उदाहरण के लिए, अगर आपकी HTML फ़ाइल आपके Documents फोल्डर में एक HTML फ़ाइल है, तो आप cd \Users\username\Documents टाइप करके और Enter दबाएँगे।
- अगर आपकी HTML फ़ाइल आपके ऑपरेटिंग सिस्टम के अलावा किसी और शब्द की ड्राइव में सेव है, तो आपको HTML फ़ाइल के पाथ पर नेविगेट करने के लिए टर्मिनल में उसी शब्द को लिखना होगा। ऐसा करने के लिए, केवल ड्राइव लेटर टाइप करें (जैसे D: ड्राइव के लिए D:) और Enter दबाएँ।
- अगर आप सुनिश्चित नहीं हैं कि HTML फ़ाइल कहाँ पर सेव है, तो आप स्क्रीन पर सबसे ऊपर अपनी HTML फ़ाइल के लिए टैब को राइट-क्लिक करके और फिर Copy Path क्लिक कर सकते हैं। टर्मिनल में cd टाइप करें और फिर इसके तुरंत बाद पाथ पेस्ट कर दें। पाथ के आखिर में फ़ाइल नेम डिलीट करें और फिर Enter दबाएँ।
- अगर आपकी HTML फ़ाइल के पाथ में किसी भी फोल्डर के नाम में स्पेस है, तो टर्मिनल उस फोल्डर तक नेविगेट नहीं कर पाएगा। जिन भी फोल्डर में उनके नाम में स्पेस है, उन तक नेविगेट करने के लिए Windows पर File Explorer यूज करें और Mac पर Finder यूज करें और स्पेस को हटाने के लिए उन फोल्डर को रिनेम कर दें। जैसे अगर आपके पास में "HTML Files" नाम का एक फोल्डर है, तो उसके नाम को "HTML_Files" चेंज कर दें)।
5
start के बाद में HTML फ़ाइल नेम टाइप करें और ↵ Enter दबाएँ: उदाहरण के लिए, अगर आप अपनी इंडेक्स HTML फ़ाइल को रन करना चाहते हैं, तो आप start index.html टाइप करेंगे और Enter दबाएँगे। ये HTML फ़ाइल को एक अलग विंडो में लॉन्च कर देगा, जहां से आपको अपनी HTML फ़ाइल को प्रिव्यू करने मिलेगा।
- प्रिव्यू बंद करने के लिए, केवल विंडो के ऊपर मौजूद "x" आइकॉन को क्लिक करें।^{[१]Xरिसर्च सोर्स}

विधि 3

विधि 3 का 4:

"HTML Preview" एक्सटैन्शन यूज करना

आर्टिकल डाउनलोड करें

विजुअल स्टुडियो कोड का एक आइकॉन होता है, जो एक ब्लू रिबन के जैसा दिखता है। विजुअल स्टुडियो कोड लॉन्च करने के लिए विजुअल स्टुडियो कोड आइकॉन को क्लिक करें। विंडोज पर इसे आप विंडोज स्टार्ट मेनू में, मैक पर Applications फोल्डर में या लिनक्स पर Apps मेनू में पा सकते हैं।
ये एक आइकॉन है, जो बाएँ तरफ मेनू बार में 4 स्क्वेर की तरह दिखता है। ये Extensions सर्च मेनू को डिस्प्ले करता है।
सर्च बार बाएँ तरफ Extensions मेनू में सबसे ऊपर होता है। ये आपकी सर्च क्विरी से मैच होते हुए सभी Extensions की एक लिस्ट को डिस्प्ले कर देता है। "HTML Preview" विजुअल स्टुडियो कोड के लिए एक एक्सटैन्शन है, जो आपको एक स्प्लिट-स्क्रीन का या फुल-विंडो मोड का इस्तेमाल करके विजुअल स्टुडियो कोड के अंदर HTML फाइल्स को प्रिव्यू करने की सुविधा देता है।
इसे एक्सटैन्शन की लिस्ट में सबसे ऊपर पहला एक्सटैन्शन होना चाहिए। इसे Thomas Haakon Townsend द्वारा बनाया गया है। इसका एक आइकॉन होता है, जो एक ऑरेंज शील्ड की तरह होता है, जिस पर बीच में एक "5" (HTML 5 लोगो) बना होता है।
क्लिक करें: ये एक्सटैन्शन मेनू के दाएँ तरफ इन्फोर्मेशन पेज में "HTML Preview" हैडर के नीचे होता है। ये एक्सटैन्शन को इन्स्टाल कर देता है। इन्स्टालेशन पूरा होने के लिए कुछ मिनट का समय दें।
अगर आपने पहले ऐसा नहीं किया है, तो एक मौजूदा HTML फ़ाइल ओपन करें या फिर एक नई HTML फ़ाइल बनाएँ और उसे HTML फ़ारमैट में सेव कर लें। अगर आपके पास में पहले से HTML फ़ाइल खुली है, तो उसे देखने के लिए स्क्रीन के सबसे ऊपर मौजूद उस टैब को क्लिक करें, जिसमें आपकी HTML फ़ाइल मौजूद है।
7
स्प्लिट-स्क्रीन प्रिव्यू बटन क्लिक करें: ये एक आइकॉन है, जो बाएँ तरफ एक मैग्निफाइंग ग्लास के साथ एक स्प्लिट स्क्रीन की तरह दिखता है। ये स्क्रीन के ऊपरी-दाएँ कोने में होता है। ये HTML फ़ाइल के प्रिव्यू को विजुअल स्टुडियो कोड के अंदर एक स्प्लिट-स्क्रीन में ओपन कर देता है।
- Alt दबाएँ और HTML कोड के फुल-स्क्रीन प्रिव्यू को देखने के लिए प्रिव्यू बटन क्लिक करें।
- प्रिव्यू को बंद करने के लिए, केवल स्क्रीन में सबसे ऊपर प्रिव्यू टैब में "x" आइकॉन क्लिक करें।

विधि 4

विधि 4 का 4:

"Open in Browser" एक्सटैन्शन यूज करना

आर्टिकल डाउनलोड करें

विजुअल स्टुडियो कोड का एक आइकॉन होता है, जो एक ब्लू रिबन के जैसा दिखता है। विजुअल स्टुडियो कोड लॉन्च करने के लिए विजुअल स्टुडियो कोड आइकॉन को क्लिक करें। विंडोज पर इसे आप विंडोज स्टार्ट मेनू में, मैक पर Applications फोल्डर में या लिनक्स पर Apps मेनू में पा सकते हैं।
ये एक आइकॉन है, जो बाएँ तरफ मेनू बार में 4 स्क्वेर की तरह दिखता है। ये Extensions सर्च मेनू को डिस्प्ले करता है।
सर्च बार बाएँ तरफ एक्सटैन्शन मेनू में सबसे ऊपर होता है। ये आपकी सर्च क्विरी से मैच होते हुए सभी एक्सटैन्शन को डिस्प्ले करता है। "Open in browser" विजुअल स्टुडियो कोड के लिए एक एक्सटैन्शन है, जो आपको विजुअल स्टुडियो कोड के अंदर आपकी पसंद के एक वेब ब्राउज़र का इस्तेमाल करके एक HTML फ़ाइल को ओपन करने की सुविधा देता है।
इसे लिस्ट में सबसे ऊपर सबसे पहला एक्सटैन्शन होना चाहिए। ये एक वो होगा जिसमें सभी लोअरकेस लेटर होंगे और TechER द्वारा बनाया गया होगा। एक्सटैन्शन को सिलेक्ट करने के लिए उसे क्लिक करें।
क्लिक करें: ये एक्सटैन्शन मेनू के दाएँ तरफ इन्फोर्मेशन पेज में "open in browser" हैडर के नीचे होता है। ये एक्सटैन्शन को इन्स्टाल कर देता है। इन्स्टालेशन पूरा होने के लिए कुछ मिनट का समय दें।
अगर आपने पहले ऐसा नहीं किया है, तो एक मौजूदा HTML फ़ाइल ओपन करें या फिर एक नई HTML फ़ाइल बनाएँ और उसे HTML फ़ारमैट में सेव कर लें। अगर आपके पास में पहले से HTML फ़ाइल खुली है, तो उसे देखने के लिए स्क्रीन के सबसे ऊपर मौजूद उस टैब को क्लिक करें, जिसमें आपकी HTML फ़ाइल मौजूद है।
ये कांटेक्स्ट मेनू डिस्प्ले करता है।
8
क्लिक करें: ये HTML फ़ाइल को आपके डिफ़ाल्ट ब्राउज़र में ओपन कर देती है। ये आपको HTML फ़ाइल को देखने की अनुमति देता है।^{[२]Xरिसर्च सोर्स}
- वैकल्पिक रूप से आप Open in Other Browser क्लिक करके और अपने पसंद के वेब ब्राउज़र पर डबल-क्लिक कर सकते हैं।
- अगर आप से एक डिफ़ाल्ट वेब ब्राउज़र चुनने के लिए नहीं पूछा गया है, तो उस ब्राउज़र को क्लिक करें, जिस पर आप अपनी फ़ाइल को ओपन करना चाहते हैं और Ok क्लिक करें।