वेब विकास के लिए एटम संपादक को कैसे कॉन्फ़िगर करें

संपादित 1 एक महीना पहले द्वारा ExtremeHow संपादकीय टीम

परमाणुवेब विकासएचटीएमएलसीएसएसजावास्क्रिप्टप्रोग्रामिंगविकाससॉफ्टवेयरडेवलपर उपकरणटेक्स्ट संपादकविंडोमैकलिनक्स

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

एटम के साथ शुरुआत करना

एटम विंडोज़, मैकोएस और लिनक्स के लिए उपलब्ध है। आरंभ करने के लिए, पहला कदम आधिकारिक वेबसाइट से एटम डाउनलोड और इंस्टॉल करना है। एक बार इंस्टॉल हो जाने पर, आप विभिन्न विशेषताओं की खोज कर सकते हैं जो एटम को वेब विकास के लिए एक शक्तिशाली संपादक बनाते हैं।

एटम में सुधार के लिए पैकेज स्थापित करना

एटम की सबसे शक्तिशाली विशेषताओं में से एक इसका विस्तृत पैकेज लाइब्रेरी है, या प्लगइन्स हैं, जिन्हें आप संपादक की कार्यक्षमता का विस्तार और अनुकूलित करने के लिए उपयोग कर सकते हैं। ये पैकेज सिंटैक्स हाइलाइटिंग, कोड लिंटिंग, और ऑटो-कम्प्लीशन सहित अन्य कार्यों में सहायता कर सकते हैं।

पैकेज को कैसे इंस्टॉल करें

एटम में पैकेज इंस्टॉल करने के लिए, इन चरणों का पालन करें:

1. एटम खोलें और फाइल > सेटिंग्स (या मैकोएस पर एटम > प्रेफरेंसेस) पर क्लिक करें।
2. साइडबार से इंस्टॉल सेक्शन पर जाएं।
3. जिस पैकेज को आप इंस्टॉल करना चाहते हैं उसका नाम सर्च बार में दर्ज करें और एंटर दबाएं।
4. जिस पैकेज को आप इंस्टॉल करना चाहते हैं उसके बगल में इंस्टॉल बटन पर क्लिक करें।

वेब विकास के लिए अनुशंसित पैकेज

वेब विकास के लिए निम्नलिखित पैकेज अत्यधिक अनुशंसित हैं:

• Emmet: HTML और CSS कोड लिखने के लिए कुशल शॉर्टकट प्रदान करता है।
• Atom Beautify: आपके कोड को स्वतः स्वरूपित करता है जिससे यह अधिक पठनीय बनता है।
• Linter: विभिन्न लिंटर के समर्थन के साथ आपके कोड में मानकों और गुणवत्ता को बनाए रखने के लिए एक ढांचा जोड़ता है।
• autocomplete-plus: आपके कोड के लिए स्मार्ट ऑटो-कम्प्लीशन प्रदान करता है।
• Minimap: आपके कोड का पूर्वावलोकन संपादक के किनारे पर जोड़ता है।

एटम के उपयोगकर्ता इंटरफेस को अनुकूलित करना

एटम आपको इसके इंटरफेस को अपनी पसंद के अनुसार अनुकूलित करने की अनुमति देता है। यहां कुछ तरीके बताए गए हैं जिनसे आप एटम की उपस्थिति और कार्यक्षमता को अनुकूलित कर सकते हैं।

विषय सामग्री

एटम में कई निर्मित विषय हैं, जो सत्य और उपयोगकर्ता इंटरफेस (यूआई) दोनों के लिए हैं। आप अपने विषय बदल सकते हैं फाइल > सेटिंग्स > थीम्स पर जाकर।

• यूआई थीम बदलने के लिए, यूआई थीम ड्रॉपडाउन मेनू में एक विकल्प चुनें।
• सिंटैक्स थीम बदलने के लिए, सिंटैक्स थीम ड्रॉपडाउन मेनू में एक विकल्प चुनें।

यदि निर्मित विषयों में से कोई भी आपके अनुकूल नहीं है, तो आप नए थीम्स को सेटिंग्स में इंस्टॉल सेक्शन पर जाकर इंस्टॉल कर सकते हैं, जैसे आप पैकेज इंस्टॉल करते हैं।

कीबाइंडिंग्स को अनुकूलित करना

एटम में अनुकूलनीय कीबाइंडिंग्स विशेषता है। आप इनकी कंफिगरेशन अपने एटम > कीमैप... मेनू में keymap.cson फ़ाइल को संपादित करके कर सकते हैं। यहां एक कस्टम कीबाइंडिंग का उदाहरण है:

  { 'atom-workspace': 'ctrl-alt-o': 'application:open' }

यह मैपिंग आपको कीबोर्ड शॉर्टकट्स के साथ ऐप्लिकेशन्स खोलने की अनुमति देती है।

एटम में वर्शन कंट्रोल को समझना

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

एटम में गिट का उपयोग करना

एटम में गिट का उपयोग शुरू करने के लिए, सुनिश्चित करें कि आपके सिस्टम पर गिट इंस्टॉल हो। कमांड लाइन से, आप निम्नलिखित कमांड चलाकर इंस्टॉलेशन की पुष्टि कर सकते हैं:

  git --version

एटम में, आप निचले दाएं कोने में गिटहब और गिट टैब का उपयोग करके बदलाव कमिट कर सकते हैं या उन्हें सीधे गिटहब रिपॉजिटरी पर भेज सकते हैं।

एटम में अपना पहला वेब प्रोजेक्ट बनाना

अब जब एटम सेट अप हो गया है, तो चलिए एक सरल वेब प्रोजेक्ट बनाते हैं। हम एटम की क्षमताओं से परिचित होने के लिए एक बेसिक HTML पेज बनाएंगे।

अपना पहला प्रोजेक्ट बनाने के लिए, इन चरणों का पालन करें:

1. अपने प्रोजेक्ट के लिए एक नया फोल्डर बनाएं और उसमें नेविगेट करें।
2. एटम खोलें और फाइल > नई फाइल चुनें।
3. अपनी फाइल को index.html के रूप में सेव करें और निम्नलिखित बॉयलरप्लेट HTML कोड जोड़ें:

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your First Project</title>
  </head>
  <body>
    <h1>Welcome to Your First Project!</h1>
    <p>This is a simple web page to test Atom's configuration.</p>
  </body>
</html>

अपने परिवर्तन को Ctrl+S (या मैकोएस पर Cmd+S) दबाकर सेव करें।

अपना सेटअप टेस्ट करें

आप एक लोकल विकास सर्वर पैकेज जैसे एटम-लाइव-सर्वर का उपयोग करके सेटअप का परीक्षण कर सकते हैं। यह पैकेज आपको एक लोकल सर्वर को लाइव रीलोड फीचर के साथ लॉन्च करने की अनुमति देता है, जिसका मतलब है कि जब भी आप अपने HTML फाइल में बदलाव करते हैं, वेब पेज स्वतः रीलोड हो जाता है।

एटम-लाइव-सर्वर को इंस्टॉल करने के लिए, पहले उल्लेख किए गए पैकेज इंस्टॉलेशन चरणों का पालन करें। इंस्टॉल हो जाने पर, आप अपने index.html फाइल पर एटम में राइट-क्लिक करके और लाइव सर्वर के साथ खोलें चुनकर सर्वर लॉन्च कर सकते हैं।

सारांश

एटम एक अत्यधिक अनुकूलनशील संपादक है जिसे वेब विकास के लिए अनुकूलित किया जा सकता है। संबंधित पैकेजों को इंस्टॉल करके, इंटरफेस को अनुकूलित करके, और निर्मित-इन सुविधाओं जैसे गिट इंटीग्रेशन का उपयोग करके, आप अपने विकास की जरूरतों के लिए एक शक्तिशाली सेटअप बना सकते हैं। इन चरणों के साथ, अब आप एटम के साथ अपने वेब विकास कार्यप्रवाह को बढ़ाने के लिए तैयार हैं।

कोडिंग का आनंद लें!

  इस लेख को साझा करें

यदि आपको लेख की सामग्री में कुछ गलत लगता है, आप कर सकते हैं अपडेट का अनुरोध करें