<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
  "translation_date": "2025-08-25T23:17:32+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "mr"
}
-->
# कोड एडिटर वापरणे

ही धडा [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/) मध्ये साइन इन केलेले नसेल, तर साइन इन करण्यासाठी किंवा नवीन खाते तयार करण्यासाठी सूचना अनुसरा आणि नंतर साइन इन करा.

लोड झाल्यावर, ते खालील प्रतिमेसारखे दिसेल:

![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.mr.png)

तीन मुख्य विभाग आहेत, डावीकडून उजवीकडे:

1. _ऍक्टिव्हिटी बार_, ज्यामध्ये काही चिन्हे आहेत, जसे की 🔎 (मॅग्निफाइंग ग्लास), ⚙️ (गियर) आणि इतर काही.
2. विस्तारित ऍक्टिव्हिटी बार, जो डीफॉल्टने _एक्सप्लोरर_ (_साइड बार_ म्हणून ओळखला जातो) असतो.
3. आणि शेवटी, उजवीकडे कोड क्षेत्र.

प्रत्येक चिन्हावर क्लिक करा आणि वेगवेगळे मेनू पाहा. नंतर, _एक्सप्लोरर_ वर परत जा.

जेव्हा तुम्ही कोड तयार करणे किंवा विद्यमान कोडमध्ये बदल करणे सुरू कराल, तेव्हा ते उजव्या बाजूच्या मोठ्या क्षेत्रात होईल. तुम्ही विद्यमान कोड पाहण्यासाठी देखील हे क्षेत्र वापराल, जे तुम्ही पुढे कराल.

## GitHub रेपॉजिटरी उघडा

तुम्हाला प्रथम GitHub रेपॉजिटरी उघडणे आवश्यक आहे. रेपॉजिटरी उघडण्यासाठी अनेक पद्धती आहेत. या विभागात, तुम्ही रेपॉजिटरी उघडण्यासाठी दोन वेगवेगळ्या पद्धती पाहाल.

### 1. एडिटर वापरून

एडिटरचा वापर करून रिमोट रेपॉजिटरी उघडा. जर तुम्ही [VSCode.dev](https://vscode.dev) वर गेला, तर तुम्हाला _"Open Remote Repository"_ बटण दिसेल:

![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.mr.png)

तुम्ही कमांड पॅलेट देखील वापरू शकता. कमांड पॅलेट म्हणजे एक इनपुट बॉक्स आहे, जिथे तुम्ही कोणत्याही कमांडचा भाग असलेला शब्द टाइप करू शकता किंवा योग्य कमांड शोधण्यासाठी कृती करू शकता. वरच्या डावीकडील मेनू वापरा, नंतर _View_ निवडा, आणि नंतर _Command Palette_ निवडा, किंवा कीबोर्ड शॉर्टकट वापरा: Ctrl-Shift-P (MacOS वर Command-Shift-P).

![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.mr.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 ...'_ चिन्ह निवडा, फाइलला नाव द्या आणि एंटर दाबा.

![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.mr.png)

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

VSCode.dev वापरणे उपयुक्त आहे, जेव्हा तुम्हाला तुमच्या प्रकल्पात जलद अद्यतने करायची असतील आणि स्थानिक सॉफ्टवेअर लोड करायचे नसेल.

तुमचा कोड अद्यतनित करण्यासाठी, ऍक्टिव्हिटी बारवरील 'Explorer' चिन्हावर क्लिक करा, जे रेपॉजिटरीतील फाइल्स आणि फोल्डर्स पाहण्यासाठी आहे. फाइल निवडा, ती कोड क्षेत्रात उघडा, बदल करा आणि सेव्ह करा.

![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.mr.png)

तुमच्या प्रकल्पातील बदल पूर्ण झाल्यावर, _`source control`_ चिन्ह निवडा, ज्यामध्ये तुम्ही केलेले सर्व नवीन बदल असतील.

तुमच्या प्रकल्पातील बदल पाहण्यासाठी, विस्तारित ऍक्टिव्हिटी बारमधील `Changes` फोल्डरमधील फाइल्स निवडा. यामुळे 'Working Tree' उघडेल, जिथे तुम्ही केलेले बदल दृश्य स्वरूपात पाहू शकता. लाल रंग प्रकल्पातील वगळलेले भाग दर्शवतो, तर हिरवा रंग जोडलेले भाग दर्शवतो.

![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.mr.png)

जर तुम्ही केलेल्या बदलांवर समाधानी असाल, तर `Changes` फोल्डरवर होवर करा आणि `+` बटण क्लिक करा, ज्यामुळे बदल स्टेज होतील. स्टेजिंग म्हणजे बदल GitHub वर कमिट करण्यासाठी तयार करणे.

जर तुम्हाला काही बदल नको असतील आणि ते रद्द करायचे असतील, तर `Changes` फोल्डरवर होवर करा आणि `undo` चिन्ह निवडा.

त्यानंतर, `commit message` टाइप करा _(तुमच्या प्रकल्पात केलेल्या बदलांचे वर्णन)_, आणि `check icon` क्लिक करून बदल कमिट आणि पुश करा.

प्रकल्पावर काम पूर्ण झाल्यावर, वरच्या डावीकडील `hamburger menu icon` निवडा आणि github.com वर रेपॉजिटरीवर परत जा.

![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)

## एक्स्टेंशन्स वापरणे

VSCode वर एक्स्टेंशन्स इन्स्टॉल केल्याने तुम्हाला नवीन वैशिष्ट्ये आणि सानुकूलित विकास पर्याय जोडता येतात, ज्यामुळे तुमचा विकास कार्यप्रवाह सुधारतो. हे एक्स्टेंशन्स अनेक प्रोग्रामिंग भाषांसाठी समर्थन जोडण्यास मदत करतात आणि सामान्यतः सामान्य किंवा भाषा-आधारित असतात.

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

![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.mr.png)

तुम्ही आधी इन्स्टॉल केलेली सर्व एक्स्टेंशन्स _`Installed folder`_ मध्ये पाहू शकता, बहुतेक विकसकांनी वापरलेली लोकप्रिय एक्स्टेंशन्स _`Popular folder`_ मध्ये आणि तुमच्यासाठी शिफारस केलेली एक्स्टेंशन्स _`recommended folder`_ मध्ये पाहू शकता.

![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.mr.png)

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

एखादे एक्स्टेंशन इन्स्टॉल करण्यासाठी, शोध फील्डमध्ये एक्स्टेंशनचे नाव टाइप करा आणि विस्तारित ऍक्टिव्हिटी बारमध्ये दिसल्यावर त्यावर क्लिक करा. विस्तारित ऍक्टिव्हिटी बारवरील _निळ्या इन्स्टॉल बटणावर_ क्लिक करा किंवा कोड क्षेत्रात दिसणाऱ्या इन्स्टॉल बटणाचा वापर करा.

![Install extensions](../../../../8-code-editor/images/install-extension.gif)

### 2. एक्स्टेंशन्स सानुकूलित करा

एक्स्टेंशन इन्स्टॉल केल्यानंतर, तुम्हाला त्याचे वर्तन बदलावे लागेल आणि ते तुमच्या पसंतीनुसार सानुकूलित करावे लागेल. यासाठी, एक्स्टेंशन्स चिन्ह निवडा, आणि यावेळी, तुमचे एक्स्टेंशन _Installed folder_ मध्ये दिसेल. _**Gear icon**_ क्लिक करा आणि _Extensions Setting_ निवडा.

![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.mr.png)

### 3. एक्स्टेंशन्स व्यवस्थापित करा

एक्स्टेंशन इन्स्टॉल आणि वापरल्यानंतर, vscode.dev विविध गरजांनुसार तुमचे एक्स्टेंशन व्यवस्थापित करण्याचे पर्याय देते. उदाहरणार्थ, तुम्ही हे करू शकता:

- **डिसेबल:** _(जर तुम्हाला एखादे एक्स्टेंशन तात्पुरते अक्षम करायचे असेल, पण ते पूर्णपणे अनइन्स्टॉल करायचे नसेल)_

    विस्तारित ऍक्टिव्हिटी बारमधील इन्स्टॉल केलेले एक्स्टेंशन निवडा > Gear icon क्लिक करा > 'Disable' किंवा 'Disable (Workspace)' निवडा **किंवा** कोड क्षेत्रात एक्स्टेंशन उघडा आणि निळ्या Disable बटणावर क्लिक करा.

- **अनइन्स्टॉल:** विस्तारित ऍक्टिव्हिटी बारमधील इन्स्टॉल केलेले एक्स्टेंशन निवडा > Gear icon क्लिक करा > '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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.