*** # कोड एडिटर प्रयोग गर्ने: [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. [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 थिच्नुहोस्। यदि सफल भयो भने, तपाईंले सम्पादन गर्न तयार पूरा परियोजना देख्नुहुनेछ! *** ### विधि २: 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` यो सुविधा कुनै पनि परियोजनामा छिटो पहुँचलाई सुपरचार्ज गर्दछ। *** ## आफ्नो परियोजनामा फाइलहरू सम्पादन गर्दै एकपटक तपाईंको रिपो खुल्यो भने, तपाईं गर्न सक्नुहुन्छ: ### १. **नयाँ फाइल सिर्जना गर्नुहोस्** - *Explorer* साइडबारमा, आफ्नो इच्छित फोल्डरमा जानुहोस् वा रुट प्रयोग गर्नुहोस्। - _‘New file ...’_ आइकन क्लिक गर्नुहोस्। - आफ्नो फाइलको नाम दिनुहोस्, **Enter** थिच्नुहोस्, र तपाईंको फाइल तुरुन्त देखिन्छ। ![Create a new file](../images/create-new-file २. **फाइलहरू सम्पादन र बचत गर्नुहोस्** - *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 फाइलहरूको छेउमा रहेको `+` क्लिक गरेर परिवर्तनहरू कमिटको लागि तयार गर्नुहोस्। - अनावश्यक परिवर्तनहरू _undo_ आइकन क्लिक गरेर **Discard** गर्नुहोस्। - स्पष्ट कमिट सन्देश टाइप गर्नुहोस्, त्यसपछि चेकमार्क क्लिक गरेर कमिट र पुश गर्नुहोस्। GitHub मा आफ्नो रिपोजिटरीमा फर्कन, माथि बायाँ रहेको ह्याम्बर्गर मेनु चयन गर्नुहोस्। ![Stage & commit changes](../images/edit-vscode.dev Extensions को साथ सेट अप गर्नुहोस् Extensions ले VSCode.dev मा भाषा, थिम, डिबगर्स, र उत्पादकता उपकरणहरू थप्न अनुमति दिन्छ—तपाईंको कोडिङ जीवनलाई सजिलो र रमाइलो बनाउँदै। ### एक्सटेन्सनहरू ब्राउज र व्यवस्थापन गर्दै - एक्टिभिटी बारमा **Extensions आइकन** क्लिक गर्नुहोस्। - _'Search Extensions in Marketplace'_ बक्समा एक्सटेन्सन खोज्नुहोस्। ![Extension details](../images/extension-details: - **Installed**: तपाईंले थपेका सबै एक्सटेन्सनहरू - **Popular**: उद्योगका मनपर्नेहरू - **Recommended**: तपाईंको कार्यप्रवाहमा उपयुक्त ![View extensions]( *** ### १. **Extensions स्थापना गर्नुहोस्** - खोजमा एक्सटेन्सनको नाम टाइप गर्नुहोस्, क्लिक गर्नुहोस्, र एडिटरमा विवरण समीक्षा गर्नुहोस्। - साइडबारमा _वा_ मुख्य कोड क्षेत्रमा **ब्लू Install बटन** थिच्नुहोस्। ![Install extensions](../images/install-extension २. **Extensions कस्टमाइज गर्नुहोस्** - आफ्नो इन्स्टल गरिएको एक्सटेन्सन फेला पार्नुहोस्। - **Gear आइकन** क्लिक गर्नुहोस् → _Extension Settings_ चयन गरेर आफ्नो रुचिअनुसार व्यवहारहरू परिमार्जन गर्नुहोस्। ![Modify extension settings](../images/extension-settings ३. **Extensions व्यवस्थापन गर्नुहोस्** तपाईं गर्न सक्नुहुन्छ: - **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) प्रयोग गरी अनुवाद गरिएको हो। हामी यथासम्भव सटीकता सुनिश्चित गर्न प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छन्। यसको मूल भाषामा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्त्वपूर्ण जानकारीका लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।