फ्रंट-एंड डेवलपर्स के लिए 8 शक्तिशाली विजुअल स्टूडियो कोड एक्सटेंशन

हालाँकि Microsoft ने Visual Studio Code का पहला स्थिर संस्करण जारी किया था, इसके शक्तिशाली कोड संपादक कुछ ही महीने पहले, मार्च 2016 तक, इसमें पहले से ही कई एक्सटेंशन उपलब्ध हैं जो कोडिंग अनुभव को अगले स्तर तक ले जा सकते हैं। आधिकारिक विजुअल स्टूडियो कोड एक्सटेंशन विजुअल स्टूडियो कोड मार्केटप्लेस में होस्ट किए गए हैं, जिनमें से कई वेब डेवलपर्स के लिए एक बड़ी मदद हो सकते हैं.

इस पोस्ट के लिए, मैंने फ्रंट-एंड डेवलपमेंट से संबंधित वीएस कोड एक्सटेंशन का एक गुच्छा परीक्षण किया, और उन लोगों की सूची बनाई जिन्हें मैंने सबसे अधिक पाया सहज, आसान उपयोग और सुविधाजनक. यह सब से अंतिम सूची नहीं है। अपने लिए मार्केटप्लेस ब्राउज़ करने के लिए समय निकालें, और देखें कि यह आपके लिए और क्या पेशकश कर सकता है, खासकर जब से कई महान एक्सटेंशन आने बाकी हैं.

वीएस कोड एक्सटेंशन कैसे स्थापित करें

एक एक्सटेंशन स्थापित करना विजुअल स्टूडियो कोड में बहुत सीधा है, जैसा कि आप कर सकते हैं कोड संपादक के भीतर करें. VS कोड मार्केटप्लेस में हर एक्सटेंशन का अपना पेज होता है, और आप इस पेज के शीर्ष पर दिए गए एक्सटेंशन को स्थापित कर सकते हैं।.

आज्ञा हमेशा से शुरू होती है ext स्थापित अवधि। एक्सटेंशन स्थापित करने के लिए, बस दबाएँ CTRL + P क्विक ओपन पैनल शुरू करने के लिए वीएस कोड के अंदर, इस कमांड को कॉपी-पेस्ट करें इसमें, और अंत में कोड संपादक को पुनरारंभ करें नया विस्तार कार्य करने के लिए.

8 शक्तिशाली दृश्य स्टूडियो कोड एक्सटेंशन

1. HTML स्निपेट

   यदि आप अक्सर Visual Studio Code में HTML लिखना चाहते हैं, तो HTML स्निपेट एक्सटेंशन एक आसान टूल के रूप में आ सकता है, जैसा कि यह है HTML के लिए विस्तृत समर्थन जोड़ता है. हालांकि वीएस कोड को HTML के लिए मूल समर्थन है, जैसे कि सिंटेक्स रंग, HTML स्निपेट एक्सटेंशन बहुत अधिक जानता है.

   

   संभवतः इस विस्तार की सबसे उपयोगी विशेषता यह है कि जब आप HTML टैग का नाम लिखना शुरू करते हैं (प्रारंभिक कोण ब्रैकेट के बिना), HTML स्निपेट जल्दी एक सूची प्रदर्शित करता है प्रत्येक के बारे में एक छोटी जानकारी के साथ उपलब्ध विकल्पों में से.

   

   जब आप उस तत्व पर क्लिक करते हैं, जिसकी आपको आवश्यकता होती है, तो HTML स्निपेट अपने सबसे सामान्य गुणों के साथ पूर्ण HTML5 टैग जोड़ता है। उदाहरण के लिए, यदि आप अपने दस्तावेज़ में एक लिंक (लंगर टैग) जोड़ना चाहते हैं, तो बस टाइप करें ए वीएस कोड में, पॉपअप बॉक्स में सही विकल्प चुनें, और HTML स्निपेट आवश्यक सम्मिलित करेंगे किसी भी परेशानी के बिना अपने संपादक में स्निपेट.

   इस एक्सटेंशन के लेखक ने पदावनत तत्वों को हटाने पर भी ध्यान दिया है, इसलिए यदि आप एक HTML टैग का उपयोग करना चाहते हैं जिसे आप पॉपअप सूची में नहीं पा सकते हैं, तो यह जांचने के लायक है कि यह अभी भी मान्य है या नहीं।.

2. HTML सीएसएस कक्षा समापन

   यदि आपको कई का उपयोग करने की आवश्यकता है तो HTML सीएसएस क्लास कम्प्लीशन एक सहायक एक्सटेंशन हो सकता है सीएसएस कक्षाएं अपने प्रोजेक्ट में यह अक्सर हमारे डेवलपर्स के लिए होता है, कि हम हैं एक वर्ग के सटीक नाम में पूरी तरह से निश्चित नहीं है, लेकिन यह सिर्फ निष्क्रिय ज्ञान के रूप में हमारे दिमाग के पीछे बैठता है.

   यह स्मार्ट विस्तार इस समस्या के लिए एक समाधान देता है, जैसा कि यह है सभी सीएसएस वर्गों के नाम प्राप्त करता है वर्तमान कार्यक्षेत्र में, और उनके बारे में एक सूची प्रदर्शित करता है.

   

   मान लीजिए, आप Zurb Foundation का उपयोग करके एक साइट बनाना चाहते हैं, और आप छोटे ग्रिड का उपयोग करना चाहते हैं। आपको याद नहीं है कि कक्षाएं कैसे नामांकित की जाती हैं, लेकिन आप जानते हैं कि उनके शब्दार्थ नाम हैं.

   HTML सीएसएस कक्षा समापन के साथ आपको केवल शब्द टाइप करने के लिए शुरू करने की आवश्यकता है छोटा, और उपलब्ध विकल्प एक ही बार में आपकी स्क्रीन पर दिखाई देते हैं, इसलिए आप आसानी से अपनी जरूरत का चयन कर सकते हैं.

   

3. ब्राउज़र में देखें

   दृश्य में कोड दृश्य स्टूडियो कोड के लिए एक सरल लेकिन शक्तिशाली विस्तार है। यह आपको अनुमति देकर फ्रंट-एंड डेवलपमेंट की सुविधा प्रदान कर सकता है कोडिंग करते समय ब्राउज़र में अपने काम के परिणाम पर एक त्वरित नज़र डालें. आप अपने HTML को अपने डिफ़ॉल्ट ब्राउज़र में सीधे वीएस कोड से दबाकर खोल सकते हैं CTRL + F1 कुंजीपटल संक्षिप्त रीति.

   ध्यान दें कि ब्राउज़र में देखें केवल HTML का समर्थन करता है, इसलिए यदि आप अपनी साइट को देखना चाहते हैं तो आपको HTML फाइल को खोलना होगा। आप सीधे सीएसएस या जावास्क्रिप्ट फ़ाइल से ब्राउज़र का उपयोग नहीं कर सकते.

   

4. क्रोम के लिए डिबगर

   Chrome के लिए डीबगर Microsoft द्वारा स्वयं बनाया गया था, और यह वर्तमान में विजुअल स्टूडियो कोड एक्सटेंशन में 4 सबसे अधिक बार डाउनलोड किया गया है.

   क्रोम के लिए डिबगर संभव बनाता है कोड क्रोम छोड़ने के बिना गूगल क्रोम में जावास्क्रिप्ट डिबग करें. इसका मतलब है कि ब्राउज़र द्वारा देखे गए ट्रांसप्लड जावास्क्रिप्ट के साथ आपको काम करने की आवश्यकता नहीं है, लेकिन आप कर सकते हैं मूल स्रोत फ़ाइलों से डिबगिंग सही प्रदर्शन करें. यह डेमो देखें कि यह कैसे काम करता है.

   

   विस्तार में हर सुविधा एक सभ्य डिबगर की जरूरत है, जैसे कि ब्रेकपॉइंट सेटिंग, वेरिएबल वॉचिंग, स्टेपिंग, ए आसान डिबग कंसोल, और कई अन्य (पहली रिलीज़ की फीचर सूची देखें).

   इस एक्सटेंशन का उपयोग करने के लिए आपको Chrome को प्रारंभ करना होगा दूरस्थ डिबगिंग सक्षम है, और एक उचित सेट करें launch.json फ़ाइल। इस उत्तरार्ध में कुछ समय लग सकता है, लेकिन आप GitHub पर विस्तृत निर्देश पा सकते हैं कि इसे कैसे ठीक से किया जाए.

5. JSHint

   विजुअल स्टूडियो कोड का JSHint एक्सटेंशन कोड संपादक में लोकप्रिय JSHint जावास्क्रिप्ट लाइनर को सही से एकीकृत करता है, जिससे आप कर सकते हैं जैसे ही आप उन्हें करते हैं, आपकी त्रुटियों के बारे में सूचित किया जाता है. डिफ़ॉल्ट रूप से, JSHint एक्सटेंशन लाइनर के डिफ़ॉल्ट विकल्पों का उपयोग करता है जिसे आप कॉन्फ़िगरेशन फ़ाइल की सहायता से अनुकूलित कर सकते हैं.

   

   इस विस्तार का उपयोग काफी सीधा है, क्योंकि JSHint लाल रंग के साथ त्रुटियों को चिह्नित करता है, और हरे रंग के रेखांकन के साथ सूचनाएं। यदि आप समस्याओं के बारे में अधिक जानकारी चाहते हैं, तो केवल रेखांकित भागों पर होवर करें, और JSHint एक बार समस्या के वर्णन के साथ एक लेबल फ्लोट करेगा।.

   

6. jQuery कोड स्निपेट

   jQuery कोड स्निपेट्स विज़ुअल स्टूडियो कोड में फ्रंट-एंड डेवलपमेंट को बहुत तेज़ कर सकता है, क्योंकि यह आपको बुनियादी सिंटैक्स त्रुटियों के बिना जल्दी से jQuery लिखने की सुविधा देता है. jQuery कोड स्निपेट वर्तमान में चारों ओर है 130 उपलब्ध स्निपेट आप सही ट्रिगर टाइप करके आह्वान कर सकते हैं.

   

   सभी jQuery के स्निपेट लेकिन एक के साथ शुरू होता है JQ उपसर्ग। एक अपवाद है समारोह वह ट्रिगर संपादक में एक अनाम फ़ंक्शन सम्मिलित करता है.

   जब आप उचित सिंटैक्स के बारे में पूरी तरह से सुनिश्चित नहीं होते हैं, तो यह सुविधाजनक विस्तार एक सुविधाजनक सहायता है, और दस्तावेज़ीकरण की जांच करने के लिए समय निकालना चाहते हैं। यह उपलब्ध विकल्पों के माध्यम से जल्दी से स्क्रॉल करना भी आसान बनाता है.

   

7. कुंज

   बोवर वीएस कोड एक्सटेंशन बोवर पैकेज मैनेजर को विजुअल स्टूडियो कोड में एकीकृत करके आपके वेब डेवलपमेंट वर्कफ़्लो को अधिक सहज बना सकता है.

   यदि आप इस एक्सटेंशन का उपयोग करते हैं टर्मिनल और संपादक के बीच आगे-पीछे नहीं करना है, लेकिन आप आसानी से अपने पैकेज प्रबंधन कार्यों को विजुअल स्टूडियो कोड के अंदर कर सकते हैं.

   

   बोवर एक्सटेंशन आपको अपनी परियोजना के निर्माण के माध्यम से ले जाता है bower.json फ़ाइल, और आप इंस्टॉल, अनइंस्टॉल, खोज, अपडेट पैकेज, कैश प्रबंधित कर सकते हैं, और इसके साथ कई अन्य कार्य कर सकते हैं (पूरी सुविधा सूची देखें).

   आप ऐसा कर सकते हैं कमांड पैलेट शुरू करके बोवर से संबंधित कमांड का उपयोग दबाने से एफ 1, टाइपिंग “कुंज” इनपुट बार में, पर क्लिक करना “कुंज” ड्रॉपडाउन सूची में विकल्प जो प्रकट होता है, और उपयुक्त बोवर कमांड को चुनना.

   

8. Git History

   Git History इसे संभव बनाता है Visual Studio कोड के अंदर Git प्रोजेक्ट के परिवर्तन का पालन करें. यह विस्तार विशेष रूप से तब उपयोगी होता है जब आप एक बड़ी गितुब परियोजना में योगदान देना चाहते हैं, और अन्य डेवलपर्स द्वारा किए गए संशोधनों को जल्दी से जांचने का एक तरीका चाहिए.

   Git History एक्सटेंशन इंस्टॉल होने के साथ इतिहास देखें एक पूरी फ़ाइल का, या एक विशेष पंक्ति इसके अंदर। आप भी कर सकते हैं पिछले संस्करणों की तुलना करें उसी फ़ाइल का.

   

   यदि आप शब्द टाइप करते हैं तो आप Git History से संबंधित आदेशों तक पहुँच सकते हैं “Git” कमांड पैलेट में (एफ 1), चुनें “Git” ड्रॉपडाउन सूची के अंदर, और अंत में आपको आवश्यक कमांड का चयन करें। ध्यान दें कि आपको फ़ाइल खोलने की आवश्यकता है इनमें से कोई भी कार्य करने से पहले आप इतिहास देखना चाहते हैं.