यदि आप HTML, PHP, या JS फ़ाइलों का उपयोग कर रहे हैं, तो हो सकता है कि आप उन्हें अपने ब्राउज़र में Visual Studio कोड से खोलना चाहें। हालाँकि, ऐसा करने के लिए कोई एकीकृत विकल्प नहीं है। यह निराशाजनक हो सकता है, खासकर यदि आप अपने कोडिंग के परिणाम पर एक त्वरित नज़र डालना चाहते हैं।
सौभाग्य से, आप अन्य तरीकों से "ओपन इन ब्राउज़र" फ़ंक्शन को सक्षम कर सकते हैं। यह लेख आपको दिखाएगा कि यह कैसे करना है।
विंडोज पीसी पर वीएस कोड में ब्राउजर में कैसे खोलें
विंडोज़ में विजुअल स्टूडियो कोड के लिए ओपन इन ब्राउजर विकल्प प्राप्त करने का सबसे आसान तरीका एक एक्सटेंशन का उपयोग करना है। विज़ुअल स्टूडियो कोड में एक्सटेंशन इंस्टॉल करना अपेक्षाकृत सरल है, जैसा कि ब्राउज़र में फ़ाइलों को खोलने के लिए उनका उपयोग करना है।
- विजुअल स्टूडियो कोड एडिटर में अपनी एचटीएमएल फाइल खोलें ।
- सबसे बाईं ओर वर्टिकल टूलबार पर, "एक्सटेंशन" पर क्लिक करें। वैकल्पिक रूप से, आप एक्सटेंशन लॉन्च करने के लिए कीबोर्ड शॉर्टकट "Ctrl + Shift + X" का उपयोग कर सकते हैं।
- लेखन सक्षम करने के लिए खोज बार पर क्लिक करें।
- इनपुट "ब्राउज़र में खोलें।" एक एक्सटेंशन चुनें जो आपके खोज शब्द से मेल खाता हो।
- "इंस्टॉल करें" बटन पर क्लिक करें।
- कार्यक्रम को पुनः लोड करें।
- बाएँ टूलबार से एक्सप्लोरर का चयन करें।
- एक्सप्लोरर में अपनी एचटीएमएल फाइल ढूंढें और उस पर राइट-क्लिक करें। "डिफ़ॉल्ट ब्राउज़र में खोलें" या "अन्य ब्राउज़र में खोलें" चुनें।
- यदि आप "डिफ़ॉल्ट ब्राउज़र में खोलें" विकल्प चुनते हैं, तो HTML फ़ाइल किसी भी ब्राउज़र में डिफ़ॉल्ट के रूप में सेट हो जाएगी। यदि आप "अन्य ब्राउज़र में खोलें" चुनते हैं, तो आपको यह निर्दिष्ट करना होगा कि कौन सा ब्राउज़र उपयोग किया जाएगा।
आप विजुअल स्टूडियो मार्केटप्लेस पर बहुत सारे उपयोगी एक्सटेंशन पा सकते हैं । या आप यहां सर्वाधिक सकारात्मक उपयोगकर्ता समीक्षाओं के साथ ओपन इन ब्राउज़र एक्सटेंशन प्राप्त कर सकते हैं: एक्सटेंशन 1 , एक्सटेंशन 2 , एक्सटेंशन 3 , एक्सटेंशन 4 .
मैक पर वीएस कोड में ब्राउजर में कैसे खोलें
विज़ुअल स्टूडियो कोड को प्रोग्राम की कार्यक्षमता बढ़ाने वाले विभिन्न एक्सटेंशन का उपयोग करके अपग्रेड किया जा सकता है। एक प्रकार का एक्सटेंशन HTML, PHP, या JS फ़ाइलों को डिफ़ॉल्ट या अन्य ब्राउज़र में खोलने में सक्षम कर सकता है। यहां मैक पर उस विकल्प को सक्षम करने का तरीका बताया गया है।
- विज़ुअल स्टूडियो कोड एडिटर का उपयोग करके , वांछित फ़ाइल खोलें।
- बाईं ओर टूलबार पर जाएं और "एक्सटेंशन" चुनें।
- एक्सटेंशन पैनल में सर्च बार पर क्लिक करें और "ब्राउज़र में खोलें" लिखें।
- एक एक्सटेंशन चुनें और "इंस्टॉल करें" पर क्लिक करें।
- सॉफ्टवेयर को पुनः लोड करें।
- बाएं टूलबार पर जाएं और एक्सप्लोरर चुनें।
- उस फ़ाइल का पता लगाएँ जिसे आप एक्सप्लोरर पैनल में खोलना चाहते हैं और उस पर राइट-क्लिक करें। या तो "डिफ़ॉल्ट ब्राउज़र में खोलें" या "अन्य ब्राउज़रों में खोलें" चुनें।
- "डिफ़ॉल्ट ब्राउज़र में खोलें" विकल्प पूर्व-चयनित ब्राउज़र का उपयोग करके फ़ाइल लॉन्च करेगा। "अन्य ब्राउज़रों में खोलें" एक संकेत लाएगा जहां आप अपनी मशीन पर स्थापित ब्राउज़रों में से एक को चुनने में सक्षम होंगे।
विज़ुअल स्टूडियो मार्केटप्लेस में एक्सटेंशन का एक विशाल चयन है जो विज़ुअल स्टूडियो कोड में नए फ़ंक्शन जोड़ सकता है। यदि आप कार्यक्रम को और बेहतर बनाना चाहते हैं तो वेबसाइट तलाशने लायक है। और यदि आप केवल ब्राउज़र एक्सटेंशन में खोलने में रुचि रखते हैं, तो यहां कुछ सुझाव दिए गए हैं: एक्सटेंशन 1 , एक्सटेंशन 2 , एक्सटेंशन 3 , एक्सटेंशन 4 ।
ब्राउज़र शॉर्टकट में खोलें
विज़ुअल स्टूडियो कोड के लिए ब्राउज़र एक्सटेंशन में लगभग हर ओपन कीबोर्ड शॉर्टकट सक्षम के साथ आता है। हालाँकि, शॉर्टकट एक समान नहीं हैं। इसके बजाय, प्रत्येक एक्सटेंशन में कुंजियों का एक विशेष संयोजन होता है जो आपके ब्राउज़र में फ़ाइल खोलने को सक्रिय करेगा।
इस आलेख में सुझाए गए एक्सटेंशन के लिए यहां कीबोर्ड शॉर्टकट दिए गए हैं।
- एक्सटेंशन 1: विंडोज़ पर "Ctrl + 1", मैक पर "कमांड + 1"।
- एक्सटेंशन 2: विंडोज पर "Ctrl + Alt + O", मैक पर "कमांड + ऑप्शन (Alt) + O"।
- एक्सटेंशन 3: विंडोज पर "Ctrl + Shift + F9", मैक पर "कमांड + शिफ्ट + F9"।
- एक्सटेंशन 4: विंडोज़ पर "Ctrl + Shift + P", मैक पर "कमांड + शिफ्ट + पी"।
ध्यान दें कि ये शॉर्टकट केवल इस आलेख में लिंक किए गए उनके संबंधित एक्सटेंशन पर काम करेंगे। यदि आप कोई भिन्न एक्सटेंशन स्थापित करना चुनते हैं, तो प्रासंगिक शॉर्टकट संभवतः उसके मार्केटप्लेस पेज पर सूचीबद्ध होंगे।
विजुअल स्टूडियो कोड में एचटीएमएल चलाना
यदि आप विज़ुअल स्टूडियो कोड में HTML के साथ काम करने में रुचि रखते हैं, तो प्रोग्राम के भीतर HTML कोड चलाने की कुछ विधियाँ यहाँ दी गई हैं।
पहली विधि में उस फ़ाइल को मैन्युअल रूप से लोड करना शामिल है जिसे आप चलाना चाहते हैं।
- विज़ुअल स्टूडियो कोड खोलें और एक नई HTML फ़ाइल बनाएँ।
- "फ़ाइल" पर जाएं, फिर "सहेजें" पर क्लिक करें।
- HTML:5 का उपयोग करके, HTML के लिए टेम्प्लेट सक्रिय करें. फिर, चरण 2 में आपके द्वारा सहेजी गई फ़ाइल को खोलें।
- अपने ब्राउज़र में फ़ाइल लॉन्च करने के लिए आपके द्वारा पहले इंस्टॉल किए गए ओपन इन ब्राउज़र एक्सटेंशन का उपयोग करें।
- ब्राउज़र को खुला छोड़कर, विज़ुअल स्टूडियो कोड पर वापस जाएं और अपने परिवर्तनों को सहेजते हुए HTML फ़ाइल को संपादित करें।
- ब्राउजर पर लौटें और रिफ्रेश पर क्लिक करें। आपको अपने संपादन के आधार पर पृष्ठ परिवर्तन देखना चाहिए।
- HTML फ़ाइल का संपादन जारी रखते हुए अपनी प्रगति की जाँच करने के लिए चरण 5 और 6 को दोहराएँ।
मैनुअल विधि आपके काम का ट्रैक रखने में मदद कर सकती है। हालाँकि, एक और भी बेहतर उपाय है: ऑटो-लोडिंग। इस विकल्प के लिए आपको एक और एक्सटेंशन स्थापित करने की आवश्यकता होगी, लेकिन समय के लायक होना चाहिए।
- विजुअल स्टूडियो कोड में, एक्सटेंशन पर जाएं, जो बाएं टूलबार के नीचे स्थित है।
- एक्सटेंशन सर्च बार में, "लाइव सर्वर" टाइप करें।
- लाइव सर्वर एक्सटेंशन के बगल में स्थित "इंस्टॉल करें" बटन पर क्लिक करें।
- एक नई HTML फाइल बनाएं और सेव करें।
- विज़ुअल स्टूडियो कोड एक्सप्लोरर में, अपनी नई फ़ाइल पर राइट-क्लिक करें। "ओपन लाइव सर्वर" चुनें।
- HTML फाइल ब्राउजर में खुल जाएगी। एक बार जब यह हो जाए, तो HTML कोड को संपादित करने का प्रयास करें। अपनी प्रगति को बचाओ।
- जैसे ही आप कोड में बदलाव करते हैं और इसे सहेजते हैं, आपके ब्राउज़र को नई सामग्री दिखाते हुए रीफ्रेश करना चाहिए। आपको पृष्ठ को मैन्युअल रूप से ताज़ा करने की आवश्यकता नहीं होगी और इसके बजाय वास्तविक समय में परिवर्तनों की दृश्य पुष्टि करने में सक्षम होंगे।
अन्य उपयोगी विज़ुअल स्टूडियो कोड HTML एक्सटेंशन
जैसा कि उल्लेख किया गया है, विज़ुअल स्टूडियो मार्केटप्लेस उत्कृष्ट उपकरणों से भरा है, जिनमें से कई HTML के लिए तैयार हैं। यहां HTML के लिए दस सबसे उपयोगी और सर्वश्रेष्ठ श्रेणी के एक्सटेंशन दिए गए हैं।
- लिट-प्लगइन : एक उपकरण जो सिंटैक्स को हाइलाइट करता है, टाइपिंग की जांच करता है, और त्रुटियों के बिना कोड को पूरा करने में आपकी सहायता करता है। इस एक्सटेंशन में अनुकूलन योग्य नियम हैं।
- एससीएसएस हर जगह : एचटीएमएल, एससीएसएस, एलिक्सिर, एसएएसएस, पीएचपी, सीएसएस, और कई अन्य फाइल प्रकारों के लिए कक्षा परिभाषाओं के लिए एक स्वत: पूर्ण विस्तार।
- Angular Snippets : HTML और TypeScript में आसान उपयोग के लिए Angular Snippets जोड़ता है। आंशिक रूप से टाइप आउट होने के बाद एक्सटेंशन एक स्निपेट को खोलकर काम करता है।
- ES6 स्ट्रिंग HTML : सिंटैक्स हाइलाइटिंग के लिए es6 स्ट्रिंग कोड समर्थन को सक्षम करता है। एचटीएमएल, सीएसएस, एक्सएमएल, जीएलएसएल और अन्य प्रारूपों के साथ काम करता है।
- स्प्लिट HTML विशेषताएँ : यह एक्सटेंशन HTML विशेषताओं, साथ ही कोणीय, Vue और रिएक्ट प्रॉप्स और निर्देशों को विभाजित करेगा। आप इसे ओपनिंग और सेल्फ-क्लोजिंग टैग्स के साथ-साथ मल्टीपल सिलेक्शन पर इस्तेमाल कर सकते हैं।
- Djaneiro - Django Snippets : django HTML टेम्पलेट्स के लिए एक व्यापक स्निपेट संग्रह। इस एक्सटेंशन का उपयोग करने से टाइपिंग में लगने वाला समय काफी कम हो जाएगा।
- लाइव पूर्वावलोकन : Microsoft का लाइव पूर्वावलोकन एक्सटेंशन स्थानीय सर्वर होस्टिंग की अनुमति देता है। यदि आपके पास कोई ऐसा प्रोजेक्ट है जो Angular, React, या अन्य सर्वर टूल्स का उपयोग नहीं करता है, तो यह एक्सटेंशन वास्तविक समय में पेज रिफ्रेश के साथ नियमित और एम्बेडेड HTML पूर्वावलोकन को सक्षम करेगा।
- Oracle JET Core : Oracle Corporation द्वारा बनाया गया यह एक्सटेंशन Oracle JET कस्टम HTML डेटा के लिए पूर्ण समर्थन प्रदान करता है। शामिल किए गए स्निपेट किसी भी JET विशेषता और टैग को स्वतः पूर्ण कर देंगे।
- CSS नेविगेशन : HTML से CSS, HTML से कम और HTML से Sass के लिए परिभाषा पर जाने में सक्षम बनाता है। पीक डेफिनिशन कमांड भी सक्षम है।
- HTML उच्चारण वर्ण परिवर्तक : उपयुक्त HTML संस्थाओं के साथ विशेष वर्णों को मूल रूप से बदल देता है। यह विस्तार स्थितिजन्य रूप से मददगार है, लेकिन स्थानीयकरण योग्य स्ट्रिंग्स को संभालते समय आवश्यक है।
आप अपने ब्राउज़र से विज़ुअल स्टूडियो कोड चला सकते हैं
किसी ब्राउज़र में HTML फ़ाइलें चलाने के अलावा, पूरे विज़ुअल स्टूडियो कोड का ऑनलाइन उपयोग करना भी संभव है। इसके लिए आपको ब्राउज़र उपयोग के लिए विकसित प्रोग्राम के एक विशेष संस्करण को लॉन्च करने की आवश्यकता है।
यह ध्यान देने योग्य है कि डेस्कटॉप विज़ुअल स्टूडियो कोड की तुलना में यह संस्करण बहुत अधिक हल्का है। हालाँकि, यह आसान रिपॉजिटरी और फ़ाइल नेविगेशन के साथ-साथ मामूली कोड परिवर्तन के लिए एक सीधा समाधान हो सकता है।
यदि आप विज़ुअल स्टूडियो कोड ब्राउज़र संस्करण को आज़माना चाहते हैं, तो आप यहां क्लिक करके तुरंत प्रारंभ कर सकते हैं ।
अपनी HTML फ़ाइलें तैयार करें और चलाएँ
विज़ुअल स्टूडियो कोड के लिए समर्पित एक्सटेंशन के साथ आपके ब्राउज़र में HTML फ़ाइलें खोलना आसान हो गया है। यदि आप इस कोडिंग टूल के लिए एक्सटेंशन की विशाल पेशकशों का पता लगाने का निर्णय लेते हैं, तो ओपन इन ब्राउज़र फ़ंक्शन आपकी यात्रा की शुरुआत होगी।
क्या आपने अपनी HTML फ़ाइल को अपनी पसंद के ब्राउज़र में खोलने का प्रबंध किया था? आपने किस एक्सटेंशन का इस्तेमाल किया? नीचे टिप्पणी अनुभाग में हमें बताएं।