# कोड सम्पादक प्रयोग गर्ने यो पाठले [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/) मा साइन इन हुनुहुन्न भने, साइन इन गर्न वा नयाँ खाता बनाउनका लागि निर्देशनहरू पालना गर्नुहोस् र त्यसपछि साइन इन गर्नुहोस्। लोड भएपछि, यो निम्न चित्र जस्तै देखिनु पर्छ:  त्यहाँ तीन मुख्य खण्डहरू छन्, बाँयाबाट दायाँतिर जाँदै: 1. _एक्टिभिटी बार_ जसमा केही आइकनहरू छन्, जस्तै आवर्धक गिलास 🔎, गियर ⚙️, र केही अन्य। 1. विस्तारित एक्टिभिटी बार जसले _एक्सप्लोरर_ लाई डिफल्ट गर्दछ, जसलाई _साइड बार_ भनिन्छ। 1. अन्ततः, दायाँतिरको कोड क्षेत्र। प्रत्येक आइकनमा क्लिक गरेर फरक मेनु प्रदर्शन गर्नुहोस्। एक पटक सकिएपछि, _एक्सप्लोरर_ मा क्लिक गर्नुहोस् ताकि तपाईं सुरु गरेको ठाउँमा फर्कन सक्नुहुन्छ। जब तपाईं कोड सिर्जना गर्न वा विद्यमान कोड परिमार्जन गर्न सुरु गर्नुहुन्छ, यो दायाँतिरको सबैभन्दा ठूलो क्षेत्रमा हुनेछ। तपाईंले यो क्षेत्र विद्यमान कोडलाई दृश्यात्मक बनाउन पनि प्रयोग गर्नुहुनेछ, जुन तपाईंले अर्को गर्नेछ। ## GitHub रिपोजिटरी खोल्नुहोस् पहिलो कुरा तपाईंलाई GitHub रिपोजिटरी खोल्नु आवश्यक छ। रिपोजिटरी खोल्ने विभिन्न तरिकाहरू छन्। यस खण्डमा तपाईंले रिपोजिटरी खोल्ने दुई फरक तरिकाहरू देख्नुहुनेछ ताकि तपाईं परिवर्तनहरूमा काम गर्न सुरु गर्न सक्नुहुन्छ। ### 1. सम्पादकको साथ सम्पादक आफैं प्रयोग गरेर टाढाको रिपोजिटरी खोल्नुहोस्। यदि तपाईं [VSCode.dev](https://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](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 ...'_ आइकन चयन गर्नुहोस्, यसलाई नाम दिनुहोस् र इन्टर थिच्नुहोस्।  ### 2. रिपोजिटरीमा फाइल सम्पादन र बचत गर्नुहोस् vscode.dev प्रयोग गर्नु उपयोगी छ जब तपाईं आफ्नो प्रोजेक्टमा छिटो अपडेटहरू गर्न चाहनुहुन्छ बिना कुनै सफ्टवेयर स्थानीय रूपमा लोड नगरी। आफ्नो कोड अपडेट गर्न, एक्टिभिटी बारमा रहेको 'Explorer' आइकनमा क्लिक गर्नुहोस् ताकि रिपोजिटरीमा फाइलहरू र फोल्डरहरू देख्न सक्नुहुन्छ। फाइल चयन गर्नुहोस् ताकि यो कोड क्षेत्रमा खुलोस्, परिवर्तनहरू गर्नुहोस् र बचत गर्नुहोस्।  एक पटक तपाईं आफ्नो प्रोजेक्ट अपडेट गर्न सक्नुहुन्छ, _`source control`_ आइकन चयन गर्नुहोस् जसमा तपाईंले आफ्नो रिपोजिटरीमा गरेका सबै नयाँ परिवर्तनहरू समावेश छन्। तपाईंले आफ्नो प्रोजेक्टमा गरेका परिवर्तनहरू हेर्न, विस्तारित एक्टिभिटी बारमा `Changes` फोल्डरमा फाइल(हरू) चयन गर्नुहोस्। यसले तपाईंलाई फाइलमा गरेका परिवर्तनहरू दृश्यात्मक रूपमा हेर्न '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 ले तपाईंको विभिन्न आवश्यकताहरूको आधारमा एक्सटेन्सन व्यवस्थापन गर्ने विकल्पहरू प्रदान गर्दछ। उदाहरणका लागि, तपाईंले निम्न गर्न सक्नुहुन्छ: - **अस्थायी रूपमा निष्क्रिय गर्नुहोस्:** _(जब तपाईंलाई एक्सटेन्सनको आवश्यकता छैन तर यसलाई पूर्ण रूपमा अनइन्स्टल गर्न चाहनुहुन्न)_ विस्तारित एक्टिभिटी बारमा स्थापना गरिएको एक्सटेन्सन चयन गर्नुहोस् > Gear आइकन क्लिक गर्नुहोस् > 'Disable' वा 'Disable (Workspace)' चयन गर्नुहोस् **वा** कोड क्षेत्रमा एक्सटेन्सन खोल्नुहोस् र ब्लू Disable बटन क्लिक गर्नुहोस्। - **अनइन्स्टल गर्नुहोस्:** विस्तारित एक्टिभिटी बारमा स्थापना गरिएको एक्सटेन्सन चयन गर्नुहोस् > Gear आइकन क्लिक गर्नुहोस् > '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) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।