<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
  "translation_date": "2025-08-24T13:04:23+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "hi"
}
-->
# कोड एडिटर का उपयोग करना

यह पाठ [VSCode.dev](https://vscode.dev) नामक एक वेब-आधारित कोड एडिटर के उपयोग की मूल बातें कवर करता है, ताकि आप अपने कोड में बदलाव कर सकें और किसी प्रोजेक्ट में योगदान दे सकें, बिना अपने कंप्यूटर पर कुछ भी इंस्टॉल किए।

## सीखने के उद्देश्य

इस पाठ में, आप सीखेंगे:

- कोड प्रोजेक्ट में कोड एडिटर का उपयोग करना
- वर्शन कंट्रोल के साथ बदलावों को ट्रैक करना
- विकास के लिए एडिटर को कस्टमाइज़ करना

### पूर्वापेक्षाएँ

शुरू करने से पहले, आपको [GitHub](https://github.com) पर एक खाता बनाना होगा। [GitHub](https://github.com/) पर जाएं और यदि आपने पहले से खाता नहीं बनाया है, तो एक खाता बनाएं।

### परिचय

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

## VSCode.dev के साथ शुरुआत करना

[VSCode.dev](https://vscode.dev) एक वेब-आधारित कोड एडिटर है। इसे उपयोग करने के लिए आपको कुछ भी इंस्टॉल करने की आवश्यकता नहीं है, यह किसी अन्य वेबसाइट खोलने जैसा है। एडिटर के साथ शुरुआत करने के लिए, निम्न लिंक खोलें: [https://vscode.dev](https://vscode.dev)। यदि आप [GitHub](https://github.com/) में साइन इन नहीं हैं, तो साइन इन करने या नया खाता बनाने के लिए दिए गए निर्देशों का पालन करें और फिर साइन इन करें।

लोड होने के बाद, यह इस छवि के समान दिखना चाहिए:

![डिफ़ॉल्ट VSCode.dev](../../../../8-code-editor/images/default-vscode-dev.png)

यहां तीन मुख्य खंड हैं, बाईं ओर से दाईं ओर बढ़ते हुए:

1. _एक्टिविटी बार_, जिसमें कुछ आइकन शामिल हैं, जैसे मैग्निफाइंग ग्लास 🔎, गियर ⚙️, और कुछ अन्य।
2. विस्तारित एक्टिविटी बार, जो डिफ़ॉल्ट रूप से _एक्सप्लोरर_ पर सेट होता है, जिसे _साइड बार_ कहा जाता है।
3. और अंत में, कोड क्षेत्र दाईं ओर।

प्रत्येक आइकन पर क्लिक करें ताकि एक अलग मेनू प्रदर्शित हो। जब हो जाए, तो _एक्सप्लोरर_ पर क्लिक करें ताकि आप वहीं वापस आ जाएं जहां आपने शुरुआत की थी।

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

## एक GitHub रिपॉजिटरी खोलें

पहली चीज़ जो आपको चाहिए, वह है एक GitHub रिपॉजिटरी खोलना। रिपॉजिटरी खोलने के कई तरीके हैं। इस खंड में आप दो अलग-अलग तरीके देखेंगे जिनसे आप रिपॉजिटरी खोल सकते हैं और बदलावों पर काम शुरू कर सकते हैं।

### 1. एडिटर के साथ

एडिटर का उपयोग करके एक रिमोट रिपॉजिटरी खोलें। यदि आप [VSCode.dev](https://vscode.dev) पर जाते हैं, तो आपको एक _"Open Remote Repository"_ बटन दिखाई देगा:

![रिमोट रिपॉजिटरी खोलें](../../../../8-code-editor/images/open-remote-repository.png)

आप कमांड पैलेट का भी उपयोग कर सकते हैं। कमांड पैलेट एक इनपुट बॉक्स है जहां आप किसी भी कमांड या एक्शन का नाम टाइप कर सकते हैं ताकि सही कमांड को निष्पादित किया जा सके। ऊपर-बाईं ओर मेनू का उपयोग करें, फिर _View_ चुनें, और फिर _Command Palette_ चुनें, या निम्न कीबोर्ड शॉर्टकट का उपयोग करें: Ctrl-Shift-P (MacOS पर यह Command-Shift-P होगा)।

![पैलेट मेनू](../../../../8-code-editor/images/palette-menu.png)

मेनू खुलने के बाद, _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](https://github.com/microsoft/Web-Dev-For-Beginners) है, लेकिन आप GitHub डोमेन को `VSCode.dev/github` से बदल सकते हैं और रिपॉजिटरी को सीधे लोड कर सकते हैं। परिणामी URL होगा [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners)।

## फाइलें संपादित करें

एक बार जब आपने ब्राउज़र/VSCode.dev पर रिपॉजिटरी खोल ली, तो अगला कदम प्रोजेक्ट में अपडेट या बदलाव करना होगा।

### 1. एक नई फाइल बनाएं

आप या तो मौजूदा फोल्डर के अंदर एक फाइल बना सकते हैं, या इसे रूट डायरेक्टरी/फोल्डर में बना सकते हैं। एक नई फाइल बनाने के लिए, उस स्थान/डायरेक्टरी को खोलें जहां आप फाइल को सेव करना चाहते हैं और _'New file ...'_ आइकन को एक्टिविटी बार _(बाईं ओर)_ पर चुनें, इसे एक नाम दें और एंटर दबाएं।

![नई फाइल बनाएं](../../../../8-code-editor/images/create-new-file.png)

### 2. रिपॉजिटरी पर फाइल संपादित करें और सेव करें

जब भी आप अपने प्रोजेक्ट में त्वरित अपडेट करना चाहते हैं, तो vscode.dev का उपयोग करना सहायक होता है, बिना किसी सॉफ़्टवेयर को स्थानीय रूप से लोड किए।  
अपने कोड को अपडेट करने के लिए, 'Explorer' आइकन पर क्लिक करें, जो एक्टिविटी बार पर स्थित है, ताकि रिपॉजिटरी में फाइलें और फोल्डर देख सकें।  
एक फाइल चुनें, इसे कोड क्षेत्र में खोलें, अपने बदलाव करें और सेव करें।

![फाइल संपादित करें](../../../../8-code-editor/images/edit-a-file.png)

जब आप अपने प्रोजेक्ट को अपडेट कर लें, तो _`source control`_ आइकन चुनें, जिसमें आपके द्वारा रिपॉजिटरी में किए गए सभी नए बदलाव शामिल हैं।

अपने प्रोजेक्ट में किए गए बदलावों को देखने के लिए, विस्तारित एक्टिविटी बार में `Changes` फोल्डर में फाइल(s) चुनें। यह एक 'Working Tree' खोलेगा, जिससे आप फाइल में किए गए बदलावों को विज़ुअली देख सकते हैं। लाल रंग प्रोजेक्ट में हटाने को दिखाता है, जबकि हरा रंग जोड़ने को दर्शाता है।

![बदलाव देखें](../../../../8-code-editor/images/working-tree.png)

यदि आप अपने किए गए बदलावों से संतुष्ट हैं, तो `Changes` फोल्डर पर होवर करें और बदलावों को स्टेज करने के लिए `+` बटन पर क्लिक करें। स्टेजिंग का मतलब है कि आप अपने बदलावों को GitHub पर कमिट करने के लिए तैयार कर रहे हैं।

यदि आप कुछ बदलावों से असहज हैं और उन्हें हटाना चाहते हैं, तो `Changes` फोल्डर पर होवर करें और `undo` आइकन चुनें।

फिर, एक `commit message` टाइप करें _(आपके द्वारा प्रोजेक्ट में किए गए बदलावों का विवरण)_, और कमिट और पुश करने के लिए `check icon` पर क्लिक करें।

जब आप अपने प्रोजेक्ट पर काम पूरा कर लें, तो ऊपर-बाईं ओर `hamburger menu icon` चुनें ताकि आप github.com पर रिपॉजिटरी पर वापस जा सकें।

![स्टेज और कमिट बदलाव](../../../../8-code-editor/images/edit-vscode.dev.gif)

## एक्सटेंशन का उपयोग करना

VSCode पर एक्सटेंशन इंस्टॉल करने से आप अपने एडिटर में नई सुविधाएं जोड़ सकते हैं और विकास कार्यप्रवाह को बेहतर बनाने के लिए कस्टमाइज़्ड विकल्प प्राप्त कर सकते हैं। ये एक्सटेंशन आपको कई प्रोग्रामिंग भाषाओं के लिए समर्थन जोड़ने में भी मदद करते हैं और अक्सर या तो सामान्य एक्सटेंशन होते हैं या भाषा-आधारित एक्सटेंशन।

सभी उपलब्ध एक्सटेंशनों की सूची ब्राउज़ करने के लिए, एक्टिविटी बार पर _`Extensions icon`_ पर क्लिक करें और _'Search Extensions in Marketplace'_ लेबल वाले टेक्स्ट फील्ड में एक्सटेंशन का नाम टाइप करना शुरू करें।  
आपको एक्सटेंशनों की एक सूची दिखाई देगी, जिसमें **एक्सटेंशन का नाम, प्रकाशक का नाम, एक वाक्य का विवरण, डाउनलोड की संख्या** और **स्टार रेटिंग** शामिल होगी।

![एक्सटेंशन विवरण](../../../../8-code-editor/images/extension-details.png)

आप पहले से इंस्टॉल किए गए सभी एक्सटेंशनों को _`Installed folder`_ में, अधिकांश डेवलपर्स द्वारा उपयोग किए जाने वाले लोकप्रिय एक्सटेंशनों को _`Popular folder`_ में और आपके लिए अनुशंसित एक्सटेंशनों को _`recommended folder`_ में देख सकते हैं।

![एक्सटेंशन देखें](../../../../8-code-editor/images/extensions.png)

### 1. एक्सटेंशन इंस्टॉल करें

एक्सटेंशन इंस्टॉल करने के लिए, सर्च फील्ड में एक्सटेंशन का नाम टाइप करें और इसे चुनें। विस्तारित एक्टिविटी बार पर _ब्लू इंस्टॉल बटन_ पर क्लिक करें या कोड क्षेत्र में दिखाई देने वाले इंस्टॉल बटन का उपयोग करें।

![एक्सटेंशन इंस्टॉल करें](../../../../8-code-editor/images/install-extension.gif)

### 2. एक्सटेंशन कस्टमाइज़ करें

एक्सटेंशन इंस्टॉल करने के बाद, आपको इसकी कार्यक्षमता को संशोधित करने और अपनी प्राथमिकताओं के अनुसार इसे कस्टमाइज़ करने की आवश्यकता हो सकती है। ऐसा करने के लिए, एक्सटेंशन आइकन चुनें, और इस बार, आपका एक्सटेंशन _Installed folder_ में दिखाई देगा। _**Gear icon**_ पर क्लिक करें और _Extensions Setting_ पर जाएं।

![एक्सटेंशन सेटिंग्स संशोधित करें](../../../../8-code-editor/images/extension-settings.png)

### 3. एक्सटेंशन प्रबंधित करें

एक्सटेंशन इंस्टॉल और उपयोग करने के बाद, vscode.dev विभिन्न आवश्यकताओं के आधार पर आपके एक्सटेंशन को प्रबंधित करने के विकल्प प्रदान करता है। उदाहरण के लिए, आप चुन सकते हैं:

- **डिसेबल करें:** _(जब आपको किसी एक्सटेंशन की आवश्यकता नहीं हो लेकिन आप इसे पूरी तरह से अनइंस्टॉल नहीं करना चाहते हैं, तो आप इसे अस्थायी रूप से डिसेबल कर सकते हैं)_

    विस्तारित एक्टिविटी बार पर इंस्टॉल किए गए एक्सटेंशन का चयन करें > गियर आइकन पर क्लिक करें > 'Disable' या 'Disable (Workspace)' चुनें **या** कोड क्षेत्र में एक्सटेंशन खोलें और ब्लू Disable बटन पर क्लिक करें।

- **अनइंस्टॉल करें:** विस्तारित एक्टिविटी बार पर इंस्टॉल किए गए एक्सटेंशन का चयन करें > गियर आइकन पर क्लिक करें > 'Uninstall' चुनें **या** कोड क्षेत्र में एक्सटेंशन खोलें और ब्लू Uninstall बटन पर क्लिक करें।

---

## असाइनमेंट

[VSCode.dev का उपयोग करके एक रिज़्यूमे वेबसाइट बनाएं](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)

## समीक्षा और स्व-अध्ययन

[VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) और इसकी अन्य विशेषताओं के बारे में अधिक पढ़ें।

**अस्वीकरण**:  
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।