एक उदाहरण के रूप में Vue का उपयोग करके विकास उत्पादकता में सुधार - भाग 1

आप हर दिन एक ही कार्य को कितनी बार करते हैं? मुझे लगता है कि आप जितना सोचते हैं उससे अधिक शर्त लगाते हैं। जब आप एप्लिकेशन बनाते हैं, तो सरल क्रियाएं, जैसे कि गुण, द्रष्टा, या नए तरीके बनाना, बार-बार किया जाता है।

यह प्रतीत होता है कि छोटी क्रियाएं लंबे समय तक चलती हैं। हमारा लक्ष्य जितना संभव हो उतना कम कार्यों के साथ करना है।

कोड संपादक

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

विजुअल स्टूडियो कोड - डाउनलोड

यद्यपि कई कोड संपादक उपलब्ध हैं, मैं Microsoft VS कोड से संपादक की सुविधाओं का उपयोग करने पर ध्यान केंद्रित करूंगा। इसमें देशी टाइपस्क्रिप्ट समर्थन है, साथ ही एक बहुत बड़ा विस्तार मोडिंग समुदाय है। डाउनलोड लिंक का उपयोग करें और अपने ऑपरेटिंग सिस्टम का चयन करें।

स्थापना पूर्ण होने के बाद, vscode चलाएं। अब आप एक्सटेंशन इंस्टॉल करना जारी रखने के लिए तैयार हैं।

एक्सटेंशन / प्लगइन्स

नीचे अनुशंसित एक्सटेंशन की एक सूची है। उनका लक्ष्य vscode के साथ आपके विकास के समय में सुधार करना है, वे बस स्थापित करना आसान है, बस एक्सटेंशन पृष्ठ पर स्थापित करें पर क्लिक करें ।

आप वीएस कोड इंटरफ़ेस से शीर्ष फलक में दृश्य> एक्सटेंशन पर क्लिक करके भी ऐसा कर सकते हैं। एक्सटेंशन पैनल खुलता है।

सेटिंग्स सिंक - स्थापित करें

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

वेतुर - स्थापित करें

Vue में काम करते समय, उपयोगी एक्सटेंशन की कोई कमी नहीं है जिसे आप प्लग इन कर सकते हैं। सभी एक्सटेंशन में से, vetur एक आवश्यक है। यह आपको सिंटैक्स हाइलाइटिंग, स्निपेट्स, इंटेलीसेन्स, डीबगिंग और बहुत कुछ करने में मदद करेगा।

ऑटो बंद टैग - स्थापित करें

विज़ुअल स्टूडियो आईडीई या उदात्त पाठ की तरह ही एक बंद HTML / XML टैग को स्वचालित रूप से जोड़ता है।

ऑटो आयात - स्थापित करें

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

ऑटो का नाम बदलें - स्थापित करें

विज़ुअल स्टूडियो आईडीई में स्वचालित रूप से एक जोड़ा HTML / XML टैग का नाम बदलें।

ब्रैकेट जोड़ी Colorizer - स्थापित करें

यह एक्सटेंशन आपको रंगों का उपयोग करके संबंधित ब्रैकेट की पहचान करने की अनुमति देता है। उपयोगकर्ता यह निर्धारित कर सकता है कि कौन से वर्ण मेल खाते हैं और कौन से रंगों का उपयोग करना है।

ESLint - स्थापित करें

ESLint को VS कोड में एकीकृत करता है। यदि आप ESLint से परिचित नहीं हैं, तो आप प्रलेखन पढ़ सकते हैं।

GitLens - स्थापित करें

GitLens विजुअल स्टूडियो कोड में निर्मित Git की क्षमताओं का विस्तार करता है। यह आपको आसानी से Git-blame एनोटेशन के साथ कोड ऑथरशिप की कल्पना करने में मदद करता है, Git रिपॉजिटरी को आसानी से नेविगेट और एक्सप्लोर करता है, शक्तिशाली तुलना आदेशों के साथ बहुमूल्य जानकारी प्राप्त करता है, और बहुत कुछ।

वी.एस. लाइव शेयर - स्थापित करें

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

सूत्र

यह एक व्यक्तिपरक पूरक है, और आपको हमेशा यह चुनना चाहिए कि आपको सबसे अच्छा क्या सूट करता है।

सामग्री थीम - स्थापित करें

हर दिन मैटेरियल डिज़ाइन पर काम करना मुझे व्यापक रूप से लोकप्रिय सामग्री थीम के प्रति उदासीन बना देता है। इसमें नरम रंग होते हैं और आंखें लगातार कई घंटों तक कोड को नहीं देखती हैं। यह 8 विषयों की विविधता और बड़े विकल्प विकल्पों के साथ आता है।

थीम आइकन थीम - इंस्टॉल करें

जबकि सामग्री थीम में आपके फ़ोल्डर आइकन को अनुकूलित करने की क्षमता है, सामग्री आइकन थीम में कई नए फ़ाइल प्रकारों के लिए अधिक विकल्प और कस्टम विकल्प हैं, जैसे कि नया vue-cli-3 vue.config.js ।

फोंट

हमारे विकास का एक अन्य महत्वपूर्ण पहलू संपादक फ़ॉन्ट है।

FiraCode - स्थापित करें

बहुत अच्छी तरह से बनाया खुला स्रोत मोनो-फ़ॉन्ट और मुफ्त !

FiraFlott - स्थापित करें

एक फ़ॉन्ट जो FiraCode (भी एक बोल्ड बोल्ड फ़ॉन्ट है) से मोनो फ़ॉन्ट को जोड़ता है, जिसमें इटैलिक फ़ॉन्ट के रूप में FlottFlott के साथ Font-Ligatures शामिल है।

OperatorMono - स्थापित करें

एकमात्र भुगतान किए गए फोंट में से एक जिसे मैं सुझाऊंगा। महान italics के साथ बहुत साफ है।

फ़ॉन्ट बदलने के लिए, फ़ाइल> प्राथमिकताएं> सेटिंग पर जाएं और खोज बार में फ़ॉन्ट दर्ज करें।

अतिरिक्त सुझाव

हालांकि वेतुर जैसे प्लगइन्स में पहले से ही कुछ उपयोगी स्निपेट जैसे स्कैफोल्ड होते हैं , सुधार के लिए अभी भी जगह है।

स्निपेट्स - इंस्टॉल करें

स्निपेट में बदलकर दोहराए जाने वाले कार्यों की संख्या कम करें। मुझे Vue गुणों को छोटा करना पसंद है जैसे डेटा , गणना , आदि।

कमिश्नर - स्थापित करें

यदि आप सेमेस्टर का पालन करते हैं , तो आपको इसे रखना होगा, कमिटमेंट प्रतिबद्ध संदेशों के लेखन को मानता है और आपको रिलीज पर टिप्पणी लिखने जैसी चीजों को स्वचालित करने की अनुमति देता है।

गिट उपनाम - स्थापित करें

इस तथ्य के बावजूद कि ग्राफिकल इंटरफ़ेस के साथ काम करने के लिए कई बेहतरीन विकल्प हैं और vscode के लिए अंतर्निहित समर्थन, मैं अभी भी अक्सर cli का उपयोग करता हूं। अपने समय का अनुकूलन करने के लिए, मेरे पास अपना अनुभव सुधारने के लिए कुछ उपनाम हैं।

निष्कर्ष

इस लेख में, हमने एक प्रभावी वर्कफ़्लो बनाने के लिए बुनियादी स्थितियों पर चर्चा की। ये टिप्स आपको अपनी प्रक्रिया के बारे में सोचने और इसे बेहतर बनाने के लिए हैं।

अगले लेख में, मैं आपको सिखाऊंगा कि नए उपकरणों का उपयोग कैसे करें और कोडिंग मानकों, निरंतर एकीकरण, परीक्षण और बहुत कुछ का उपयोग करके उनका उपयोग कैसे करें।