21 KiB
कोड एडिटर का उपयोग करना
यह पाठ VSCode.dev नामक एक वेब-आधारित कोड एडिटर के उपयोग की मूल बातें कवर करता है, ताकि आप अपने कोड में बदलाव कर सकें और किसी प्रोजेक्ट में योगदान दे सकें, बिना अपने कंप्यूटर पर कुछ भी इंस्टॉल किए।
सीखने के उद्देश्य
इस पाठ में, आप सीखेंगे:
- कोड प्रोजेक्ट में कोड एडिटर का उपयोग करना
- वर्शन कंट्रोल के साथ बदलावों को ट्रैक करना
- विकास के लिए एडिटर को कस्टमाइज़ करना
पूर्वापेक्षाएँ
शुरू करने से पहले, आपको GitHub पर एक खाता बनाना होगा। GitHub पर जाएं और यदि आपने पहले से खाता नहीं बनाया है, तो एक खाता बनाएं।
परिचय
कोड एडिटर प्रोग्राम लिखने और मौजूदा कोडिंग प्रोजेक्ट्स के साथ सहयोग करने के लिए एक आवश्यक उपकरण है। एक बार जब आप एडिटर की मूल बातें और इसकी विशेषताओं का उपयोग करना समझ जाते हैं, तो आप इन्हें कोड लिखने में लागू कर सकते हैं।
VSCode.dev के साथ शुरुआत करना
VSCode.dev एक वेब-आधारित कोड एडिटर है। इसे उपयोग करने के लिए आपको कुछ भी इंस्टॉल करने की आवश्यकता नहीं है, यह किसी अन्य वेबसाइट खोलने जैसा है। एडिटर के साथ शुरुआत करने के लिए, निम्न लिंक खोलें: https://vscode.dev। यदि आप GitHub में साइन इन नहीं हैं, तो साइन इन करने या नया खाता बनाने के लिए दिए गए निर्देशों का पालन करें और फिर साइन इन करें।
लोड होने के बाद, यह इस छवि के समान दिखना चाहिए:
यहां तीन मुख्य खंड हैं, बाईं ओर से दाईं ओर बढ़ते हुए:
- एक्टिविटी बार, जिसमें कुछ आइकन शामिल हैं, जैसे मैग्निफाइंग ग्लास 🔎, गियर ⚙️, और कुछ अन्य।
- विस्तारित एक्टिविटी बार, जो डिफ़ॉल्ट रूप से एक्सप्लोरर पर सेट होता है, जिसे साइड बार कहा जाता है।
- और अंत में, कोड क्षेत्र दाईं ओर।
प्रत्येक आइकन पर क्लिक करें ताकि एक अलग मेनू प्रदर्शित हो। जब हो जाए, तो एक्सप्लोरर पर क्लिक करें ताकि आप वहीं वापस आ जाएं जहां आपने शुरुआत की थी।
जब आप कोड बनाना शुरू करते हैं या मौजूदा कोड में बदलाव करते हैं, तो यह सबसे बड़े क्षेत्र में दाईं ओर होगा। आप इस क्षेत्र का उपयोग मौजूदा कोड को देखने के लिए भी करेंगे, जो आप अगले चरण में करेंगे।
एक GitHub रिपॉजिटरी खोलें
पहली चीज़ जो आपको चाहिए, वह है एक GitHub रिपॉजिटरी खोलना। रिपॉजिटरी खोलने के कई तरीके हैं। इस खंड में आप दो अलग-अलग तरीके देखेंगे जिनसे आप रिपॉजिटरी खोल सकते हैं और बदलावों पर काम शुरू कर सकते हैं।
1. एडिटर के साथ
एडिटर का उपयोग करके एक रिमोट रिपॉजिटरी खोलें। यदि आप VSCode.dev पर जाते हैं, तो आपको एक "Open Remote Repository" बटन दिखाई देगा:
आप कमांड पैलेट का भी उपयोग कर सकते हैं। कमांड पैलेट एक इनपुट बॉक्स है जहां आप किसी भी कमांड या एक्शन का नाम टाइप कर सकते हैं ताकि सही कमांड को निष्पादित किया जा सके। ऊपर-बाईं ओर मेनू का उपयोग करें, फिर View चुनें, और फिर Command Palette चुनें, या निम्न कीबोर्ड शॉर्टकट का उपयोग करें: Ctrl-Shift-P (MacOS पर यह Command-Shift-P होगा)।
मेनू खुलने के बाद, open remote repository टाइप करें, और फिर पहला विकल्प चुनें। कई रिपॉजिटरी जो आपसे संबंधित हैं या जिन्हें आपने हाल ही में खोला है, दिखाई देंगी। आप एक पूर्ण GitHub URL का भी उपयोग कर सकते हैं। निम्न URL का उपयोग करें और इसे बॉक्स में पेस्ट करें:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ यदि सफल रहा, तो आप इस रिपॉजिटरी की सभी फाइलों को टेक्स्ट एडिटर में लोड होते हुए देखेंगे।
2. URL का उपयोग करके
आप सीधे URL का उपयोग करके भी रिपॉजिटरी लोड कर सकते हैं। उदाहरण के लिए, वर्तमान रिपॉजिटरी का पूर्ण URL https://github.com/microsoft/Web-Dev-For-Beginners है, लेकिन आप GitHub डोमेन को VSCode.dev/github से बदल सकते हैं और रिपॉजिटरी को सीधे लोड कर सकते हैं। परिणामी URL होगा https://vscode.dev/github/microsoft/Web-Dev-For-Beginners।
फाइलें संपादित करें
एक बार जब आपने ब्राउज़र/VSCode.dev पर रिपॉजिटरी खोल ली, तो अगला कदम प्रोजेक्ट में अपडेट या बदलाव करना होगा।
1. एक नई फाइल बनाएं
आप या तो मौजूदा फोल्डर के अंदर एक फाइल बना सकते हैं, या इसे रूट डायरेक्टरी/फोल्डर में बना सकते हैं। एक नई फाइल बनाने के लिए, उस स्थान/डायरेक्टरी को खोलें जहां आप फाइल को सेव करना चाहते हैं और 'New file ...' आइकन को एक्टिविटी बार (बाईं ओर) पर चुनें, इसे एक नाम दें और एंटर दबाएं।
2. रिपॉजिटरी पर फाइल संपादित करें और सेव करें
जब भी आप अपने प्रोजेक्ट में त्वरित अपडेट करना चाहते हैं, तो vscode.dev का उपयोग करना सहायक होता है, बिना किसी सॉफ़्टवेयर को स्थानीय रूप से लोड किए।
अपने कोड को अपडेट करने के लिए, 'Explorer' आइकन पर क्लिक करें, जो एक्टिविटी बार पर स्थित है, ताकि रिपॉजिटरी में फाइलें और फोल्डर देख सकें।
एक फाइल चुनें, इसे कोड क्षेत्र में खोलें, अपने बदलाव करें और सेव करें।
जब आप अपने प्रोजेक्ट को अपडेट कर लें, तो source control आइकन चुनें, जिसमें आपके द्वारा रिपॉजिटरी में किए गए सभी नए बदलाव शामिल हैं।
अपने प्रोजेक्ट में किए गए बदलावों को देखने के लिए, विस्तारित एक्टिविटी बार में Changes फोल्डर में फाइल(s) चुनें। यह एक 'Working Tree' खोलेगा, जिससे आप फाइल में किए गए बदलावों को विज़ुअली देख सकते हैं। लाल रंग प्रोजेक्ट में हटाने को दिखाता है, जबकि हरा रंग जोड़ने को दर्शाता है।
यदि आप अपने किए गए बदलावों से संतुष्ट हैं, तो Changes फोल्डर पर होवर करें और बदलावों को स्टेज करने के लिए + बटन पर क्लिक करें। स्टेजिंग का मतलब है कि आप अपने बदलावों को GitHub पर कमिट करने के लिए तैयार कर रहे हैं।
यदि आप कुछ बदलावों से असहज हैं और उन्हें हटाना चाहते हैं, तो Changes फोल्डर पर होवर करें और undo आइकन चुनें।
फिर, एक commit message टाइप करें (आपके द्वारा प्रोजेक्ट में किए गए बदलावों का विवरण), और कमिट और पुश करने के लिए check icon पर क्लिक करें।
जब आप अपने प्रोजेक्ट पर काम पूरा कर लें, तो ऊपर-बाईं ओर hamburger menu icon चुनें ताकि आप github.com पर रिपॉजिटरी पर वापस जा सकें।
एक्सटेंशन का उपयोग करना
VSCode पर एक्सटेंशन इंस्टॉल करने से आप अपने एडिटर में नई सुविधाएं जोड़ सकते हैं और विकास कार्यप्रवाह को बेहतर बनाने के लिए कस्टमाइज़्ड विकल्प प्राप्त कर सकते हैं। ये एक्सटेंशन आपको कई प्रोग्रामिंग भाषाओं के लिए समर्थन जोड़ने में भी मदद करते हैं और अक्सर या तो सामान्य एक्सटेंशन होते हैं या भाषा-आधारित एक्सटेंशन।
सभी उपलब्ध एक्सटेंशनों की सूची ब्राउज़ करने के लिए, एक्टिविटी बार पर Extensions icon पर क्लिक करें और 'Search Extensions in Marketplace' लेबल वाले टेक्स्ट फील्ड में एक्सटेंशन का नाम टाइप करना शुरू करें।
आपको एक्सटेंशनों की एक सूची दिखाई देगी, जिसमें एक्सटेंशन का नाम, प्रकाशक का नाम, एक वाक्य का विवरण, डाउनलोड की संख्या और स्टार रेटिंग शामिल होगी।
आप पहले से इंस्टॉल किए गए सभी एक्सटेंशनों को Installed folder में, अधिकांश डेवलपर्स द्वारा उपयोग किए जाने वाले लोकप्रिय एक्सटेंशनों को Popular folder में और आपके लिए अनुशंसित एक्सटेंशनों को recommended folder में देख सकते हैं।
1. एक्सटेंशन इंस्टॉल करें
एक्सटेंशन इंस्टॉल करने के लिए, सर्च फील्ड में एक्सटेंशन का नाम टाइप करें और इसे चुनें। विस्तारित एक्टिविटी बार पर ब्लू इंस्टॉल बटन पर क्लिक करें या कोड क्षेत्र में दिखाई देने वाले इंस्टॉल बटन का उपयोग करें।
2. एक्सटेंशन कस्टमाइज़ करें
एक्सटेंशन इंस्टॉल करने के बाद, आपको इसकी कार्यक्षमता को संशोधित करने और अपनी प्राथमिकताओं के अनुसार इसे कस्टमाइज़ करने की आवश्यकता हो सकती है। ऐसा करने के लिए, एक्सटेंशन आइकन चुनें, और इस बार, आपका एक्सटेंशन Installed folder में दिखाई देगा। Gear icon पर क्लिक करें और Extensions Setting पर जाएं।
3. एक्सटेंशन प्रबंधित करें
एक्सटेंशन इंस्टॉल और उपयोग करने के बाद, vscode.dev विभिन्न आवश्यकताओं के आधार पर आपके एक्सटेंशन को प्रबंधित करने के विकल्प प्रदान करता है। उदाहरण के लिए, आप चुन सकते हैं:
-
डिसेबल करें: (जब आपको किसी एक्सटेंशन की आवश्यकता नहीं हो लेकिन आप इसे पूरी तरह से अनइंस्टॉल नहीं करना चाहते हैं, तो आप इसे अस्थायी रूप से डिसेबल कर सकते हैं)
विस्तारित एक्टिविटी बार पर इंस्टॉल किए गए एक्सटेंशन का चयन करें > गियर आइकन पर क्लिक करें > 'Disable' या 'Disable (Workspace)' चुनें या कोड क्षेत्र में एक्सटेंशन खोलें और ब्लू Disable बटन पर क्लिक करें।
-
अनइंस्टॉल करें: विस्तारित एक्टिविटी बार पर इंस्टॉल किए गए एक्सटेंशन का चयन करें > गियर आइकन पर क्लिक करें > 'Uninstall' चुनें या कोड क्षेत्र में एक्सटेंशन खोलें और ब्लू Uninstall बटन पर क्लिक करें।
असाइनमेंट
VSCode.dev का उपयोग करके एक रिज़्यूमे वेबसाइट बनाएं
समीक्षा और स्व-अध्ययन
VSCode.dev और इसकी अन्य विशेषताओं के बारे में अधिक पढ़ें।
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।