वेब विकास के लिए सर्वश्रेष्ठ 22 विज़ुअल स्टूडियो कोड एक्सटेंशन

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

विज़ुअल स्टूडियो कोड अपने बेहतरीन संपादन अनुभव, विशाल विस्तार पारिस्थितिकी तंत्र और अंतर्निहित सुविधाओं की मेजबानी के कारण वेब डेवलपर्स के बीच बेहद लोकप्रिय है।

इस लेख में, हम सर्वश्रेष्ठ में से 22 को कवर करते हैं वेब विकास के लिए वीएस कोड एक्सटेंशन - भाषाओं, फ़्रेमवर्क, परीक्षण, डिबगिंग और बहुत कुछ में!

1. ES7 रिएक्ट/रिडक्स/ग्राफक्यूएल/रिएक्ट-नेटिव स्निपेट

यह एक्सटेंशन JS/TS में React, Redux, GraphQL और React Native के लिए रिच कोड स्निपेट प्रदान करता है। इन लाइब्रेरीज़ के साथ काम करते समय बॉयलरप्लेट कोड के लिए उपयोगी शॉर्टकट।

प्रमुख विशेषताऐं

  • घटकों के लिए RFC जैसे रिएक्ट और Reduxsnippets
  • प्रश्नों/उत्परिवर्तनों के लिए ग्राफक्यूएल स्निपेट
  • प्रतिक्रियाशील मूल घटक/एपीआई स्निपेट
  • जावास्क्रिप्ट (ES6) और टाइपस्क्रिप्ट का समर्थन करता है
रिएक्ट और रिडक्स कोड स्निपेट्स

इंस्टालेशन

|_+_|

2. ब्रैकेट पेयर कलराइज़र

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

ब्रैकेट पेयर कलराइज़र

प्रमुख विशेषताऐं

  • मेल खाने वाले ब्रैकेट, ब्रेसिज़, टैग को रंगीन करता है
  • अनुकूलन योग्य रंग नियम
  • जेएस, टीएस, सीएसएस, एससीएसएस, एचटीएमएल आदि का समर्थन करता है

इंस्टालेशन

|_+_|

3. जावास्क्रिप्ट (ES6) कोड स्निपेट

आधुनिक ES6+ जावास्क्रिप्ट सुविधाओं जैसे आयात, निर्यात, क्लास, एरो फ़ंक्शन आदि के लिए आसान कोड स्निपेट शॉर्टकट जोड़ता है।

प्रमुख विशेषताऐं

  • निर्यात, आयात, वर्ग, पैरामीटर आदि के लिए स्निपेट
  • ES6, ES7 और ES8 समर्थन
  • टाइपस्क्रिप्ट अनुकूलता
जावास्क्रिप्ट ES6 कोड स्निपेट

इंस्टालेशन

|_+_|

4. पथ Intellisense

आयात और अन्य फ़ाइल पथों में फ़ाइल नामों को स्वतः पूर्ण करता है। फ़ाइलों/मॉड्यूल को नेविगेट करने और आयात करने के लिए बहुत उपयोगी।

प्रमुख विशेषताऐं

  • फ़ाइल नाम टाइप करते समय पथ स्वत: पूर्ण हो जाते हैं
  • सापेक्ष और निरपेक्ष पथों के साथ काम करता है
  • वर्तमान फ़ाइल स्थान से पथ दिखाता है
पथ इंटेलीसेंस

इंस्टालेशन

|_+_|

5. सीएसएस पीक

आपको फ़ाइलों के बीच कूदने के बजाय होवर पर सीएसएस परिभाषाओं को देखने/देखने की सुविधा देता है। शैलियों का निरीक्षण करते समय HTML पर ध्यान केंद्रित रखता है।

प्रमुख विशेषताऐं

  • होवर/पीक पर पीक शैली नियम
  • शैली परिभाषाओं पर आसानी से जाएँ
  • SCSS और LESS को भी सपोर्ट करता है
सीएसएस पीक एक्सटेंशन

इंस्टालेशन

|_+_|

...[संक्षिप्तता के लिए सामग्री को छोटा किया गया]

21. थंडर क्लाइंट - रेस्ट एपीआई परीक्षण

एक एकीकृत HTTP क्लाइंट के माध्यम से सीधे VS कोड के भीतर REST API का परीक्षण करना आसान बनाता है।

प्रमुख विशेषताऐं

  • साइडबार में अनुरोधों के लिए सहज ज्ञान युक्त जीयूआई
  • GET, POST, PUT, DELETE जैसी विधियाँ
  • हेडर, पैरामीटर और बॉडी संपादन
  • पर्यावरण और संग्रह
  • परीक्षण इतिहास
  • कोड स्निपेट के रूप में निर्यात अनुरोध
थंडर क्लाइंट

इंस्टालेशन

|_+_|

22. बेहतर टिप्पणियाँ

आपके कोड में अधिक पठनीय/व्यवस्थित टिप्पणियों के लिए रंग और स्टाइलिंग विकल्प जोड़ता है।

प्रमुख विशेषताऐं

  • हाइलाइट करें, रेखांकित करें, बोल्ड टिप्पणियाँ
  • टिप्पणियों को अलर्ट, सूचना आदि प्रकार के अनुसार टैग करें।
  • कस्टम हाइलाइटिंग कॉन्फ़िगर करें
बेहतर टिप्पणियाँ

इंस्टालेशन

|_+_|

निष्कर्ष

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

उन्हें आज़माएं और अपने फ्रंटएंड वर्कफ़्लो को टर्बो-चार्ज करें!

यह सभी देखें: