<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f8d4b0284f3fc1de7eb65073d8338cca",
  "translation_date": "2025-10-03T09:17:36+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "mr"
}
-->
***

# कोड एडिटर वापरणे: [VSCode.dev](https://vscode.dev) मध्ये प्रावीण्य मिळवा

**स्वागत आहे!**  
ही शिकवण तुम्हाला [VSCode.dev](https://vscode.dev)—शक्तिशाली, वेब-आधारित कोड एडिटर—मूलभूत गोष्टींपासून प्रगत वापरापर्यंत घेऊन जाते. तुम्ही कोड संपादित करणे, प्रकल्प व्यवस्थापित करणे, बदल ट्रॅक करणे, विस्तार स्थापित करणे आणि व्यावसायिकासारखे सहयोग करणे शिकाल—तेही तुमच्या ब्राउझरमधून, कोणतीही स्थापना न करता.

***

## शिकण्याची उद्दिष्टे

या शिकवणीच्या शेवटी, तुम्ही हे करू शकाल:

- कोणत्याही प्रकल्पावर, कुठेही कोड एडिटर कार्यक्षमतेने वापरणे
- अंगभूत व्हर्जन कंट्रोलसह तुमचे काम सहजपणे ट्रॅक करणे
- एडिटर सानुकूलने आणि विस्तारांसह तुमचा विकास कार्यप्रवाह वैयक्तिकृत करणे आणि वाढवणे

***

## पूर्वतयारी

सुरुवात करण्यासाठी, **[GitHub](https://github.com) खाते मोफत तयार करा**, जे तुम्हाला कोड रिपॉझिटरी व्यवस्थापित करण्यास आणि जगभरात सहयोग करण्यास अनुमती देते. जर तुमच्याकडे खाते नसेल, तर [येथे एक तयार करा](https://github.com/).

***

## वेब-आधारित कोड एडिटर का वापरावा?

**कोड एडिटर** जसे VSCode.dev तुमच्या कोड लिहिणे, संपादित करणे आणि व्यवस्थापित करण्यासाठीचे मुख्य केंद्र आहे. सहज समजणारे इंटरफेस, अनेक वैशिष्ट्ये आणि ब्राउझरद्वारे त्वरित प्रवेशासह, तुम्ही हे करू शकता:

- कोणत्याही डिव्हाइसवर प्रकल्प संपादित करा
- स्थापनेचा त्रास टाळा
- त्वरित सहयोग करा आणि योगदान द्या

VSCode.dev चा आत्मविश्वासाने वापर केल्यानंतर, तुम्ही कुठूनही, कधीही कोडिंग कार्ये हाताळण्यासाठी तयार असाल.

***

## VSCode.dev सह सुरुवात करणे

**[VSCode.dev](https://vscode.dev)** वर जा—कोणतीही स्थापना नाही, कोणतेही डाउनलोड नाही. GitHub सह साइन इन केल्याने पूर्ण प्रवेश अनलॉक होतो, ज्यामध्ये तुमच्या सेटिंग्ज, विस्तार आणि रिपॉझिटरी समक्रमित करणे समाविष्ट आहे. जर विचारले गेले, तर तुमचे GitHub खाते कनेक्ट करा.

लोड झाल्यानंतर, तुमचे कार्यक्षेत्र असे दिसेल:

![Default VSCode.dev](../images/default-vscode-dev तीन मुख्य विभाग आहेत डावीकडून उजवीकडे:
- **अॅक्टिव्हिटी बार:** 🔎 (शोध), ⚙️ (सेटिंग्ज), फाइल्स, सोर्स कंट्रोल इत्यादी आयकॉन.
- **साइडबार:** अॅक्टिव्हिटी बार आयकॉन निवडल्यावर संदर्भ बदलतो (डिफॉल्ट *Explorer* फाइल्स दाखवण्यासाठी).
- **एडिटर/कोड क्षेत्र:** उजवीकडील सर्वात मोठा विभाग—जिथे तुम्ही प्रत्यक्षात कोड संपादित आणि पाहू शकता.

वैशिष्ट्ये एक्सप्लोर करण्यासाठी आयकॉनवर क्लिक करा, परंतु तुमचे स्थान ठेवण्यासाठी _Explorer_ वर परत जा.

***

## GitHub रिपॉझिटरी उघडणे

### पद्धत 1: एडिटरमधून

1. [VSCode.dev](https://vscode.dev) वर जा. **"Open Remote Repository"** वर क्लिक करा.

   ![Open remote repository](../../../../8-code-editor/images/open-remote-repository _Command Palette_ (Ctrl-Shift-P, किंवा Mac वर Cmd-Shift-P) वापरा.

   ![Palette Menu](../images/palette-menu.pngremote repository उघडा.”
   - पर्याय निवडा.
   - तुमचा GitHub रिपॉझिटरी URL (उदा., `https://github.com/microsoft/Web-Dev-For-Beginners`) पेस्ट करा आणि Enter दाबा.

यशस्वी झाल्यास, तुम्हाला संपूर्ण प्रकल्प लोड झालेला आणि संपादित करण्यासाठी तयार दिसेल!

***

### पद्धत 2: URL द्वारे त्वरित

कोणत्याही GitHub रिपॉझिटरी URL ला VSCode.dev मध्ये थेट उघडण्यासाठी `github.com` ला `vscode.dev/github` ने बदला.  
उदा.:

- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`

ही सुविधा कोणत्याही प्रकल्पावर जलद प्रवेशासाठी सुपरचार्ज करते.

***

## तुमच्या प्रकल्पातील फाइल्स संपादित करणे

तुमची रिपॉझिटरी उघडल्यानंतर, तुम्ही हे करू शकता:

### 1. **नवीन फाइल तयार करा**
- *Explorer* साइडबारमध्ये, तुमच्या इच्छित फोल्डरकडे जा किंवा रूट वापरा.
- _‘New file ...’_ आयकॉनवर क्लिक करा.
- तुमच्या फाइलचे नाव द्या, **Enter** दाबा, आणि तुमची फाइल त्वरित दिसेल.

![Create a new file](../images/create-new-file 2. **फाइल्स संपादित करा आणि सेव्ह करा**

- *Explorer* मधील फाइलवर क्लिक करा जेणेकरून ती कोड क्षेत्रात उघडेल.
- आवश्यकतेनुसार तुमचे बदल करा.
- VSCode.dev तुमचे बदल आपोआप सेव्ह करते, परंतु तुम्ही Ctrl+S दाबून मॅन्युअली सेव्ह करू शकता.

![Edit a file](../images/edit-a-file.png. **व्हर्जन कंट्रोलसह बदल ट्रॅक करा आणि कमिट करा**

VSCode.dev मध्ये **Git** व्हर्जन कंट्रोल समाकलित आहे!

- _'Source Control'_ आयकॉनवर क्लिक करा जेणेकरून केलेले सर्व बदल पाहता येतील.
- `Changes` फोल्डरमधील फाइल्समध्ये जोडलेले (हिरवे) आणि हटवलेले (लाल) बदल दिसतात.  
  ![View changes](../images/working-tree.png फाइल्सच्या बाजूला असलेल्या `+` वर क्लिक करून बदल कमिटसाठी तयार करा.
- **Discard** नको असलेले बदल अंडू आयकॉनवर क्लिक करून हटवा.
- स्पष्ट कमिट संदेश टाइप करा, नंतर चेकमार्कवर क्लिक करून कमिट आणि पुश करा.

GitHub वर तुमच्या रिपॉझिटरीवर परत जाण्यासाठी, वरच्या डाव्या बाजूला हॅमबर्गर मेनू निवडा.

![Stage & commit changes](../images/edit-vscode.dev विस्तारांसह कार्यक्षमता वाढवा

विस्तार तुम्हाला VSCode.dev मध्ये भाषा, थीम्स, डिबगर्स आणि उत्पादकता साधने जोडण्याची परवानगी देतात—तुमचे कोडिंग जीवन सोपे आणि अधिक मजेदार बनवतात.

### विस्तार ब्राउझ करणे आणि व्यवस्थापित करणे

- अॅक्टिव्हिटी बारवरील **Extensions आयकॉन** वर क्लिक करा.
- _'Search Extensions in Marketplace'_ बॉक्समध्ये विस्तार शोधा.

  ![Extension details](../images/extension-details:
  - **Installed**: तुम्ही जोडलेले सर्व विस्तार
  - **Popular**: उद्योगातील आवडते
  - **Recommended**: तुमच्या कार्यप्रवाहासाठी सानुकूलित

  ![View extensions](

  

***

### 1. **विस्तार स्थापित करा**

- शोधात विस्ताराचे नाव टाका, त्यावर क्लिक करा आणि एडिटरमध्ये तपशील पहा.
- साइडबारमध्ये _किंवा_ मुख्य कोड क्षेत्रात **निळ्या Install बटणावर** क्लिक करा.

  ![Install extensions](../images/install-extension 2. **विस्तार सानुकूलित करा**

- तुमचा स्थापित केलेला विस्तार शोधा.
- **Gear आयकॉन** → _Extension Settings_ निवडा जेणेकरून तुमच्या आवडीनुसार वर्तन बदलता येईल.

  ![Modify extension settings](../images/extension-settings 3. **विस्तार व्यवस्थापित करा**
तुम्ही हे करू शकता:

- **Disable:** विस्तार तात्पुरता बंद करा परंतु स्थापित ठेवून
- **Uninstall:** जर गरज नसेल तर कायमस्वरूपी काढा

  विस्तार शोधा, Gear आयकॉनवर क्लिक करा आणि ‘Disable’ किंवा ‘Uninstall’ निवडा, किंवा कोड क्षेत्रातील निळ्या बटणांचा वापर करा.

***

## असाइनमेंट

तुमचे कौशल्य तपासा: [vscode.dev वापरून एक रिझ्युम वेबसाइट तयार करा](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)

***

## पुढील अन्वेषण आणि स्व-अभ्यास

- [VSCode Web Docs](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) च्या अधिकृत दस्तऐवजांसह अधिक खोलवर जा.
- प्रगत कार्यक्षेत्र वैशिष्ट्ये, कीबोर्ड शॉर्टकट्स आणि सेटिंग्ज एक्सप्लोर करा.

***

**आता तुम्ही कुठूनही, कोणत्याही डिव्हाइसवर VSCode.dev वापरून कोड लिहिण्यास, तयार करण्यास आणि सहयोग करण्यास तयार आहात!**

---

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