मुखपृष्ठ » कोडिंग » एटम में कस्टम कोड स्निपेट कैसे जोड़ें
एटम में कस्टम कोड स्निपेट कैसे जोड़ें
यह एक संयोग नहीं है कि परमाणु, जीथब द्वारा निर्मित स्रोत कोड संपादक वेब विकास समुदाय में लोकप्रिय है। यह है ही नहीं आसानी से एक्स्टेंसिबल हजारों एटम पैकेज के साथ, और ए विस्तृत भाषा समर्थन, लेकिन लगभग इसका हर हिस्सा है अनुकूलन उपयोगकर्ता द्वारा.
एटम का लाभ उठाकर स्निपेट की सुविधा है, आप अपने कोडिंग वर्कफ़्लो को और अधिक उत्पादक बना सकते हैं, जैसे कि आवर्ती कोड स्निपेट्स का पुन: उपयोग करना आप अपने काम के दोहराव वाले हिस्से को कम कर सकते हैं। इस पोस्ट में, मैं आपको दिखाता हूँ कि आप कैसे कर सकते हैं एटम के अंतर्निहित कोड स्निपेट्स का उपयोग करें, तथा अपने स्वयं के कस्टम स्निपेट बनाएं.
अंतर्निहित कोड स्निपेट का उपयोग करें
डिफ़ॉल्ट रूप से, एटम के साथ आता है अंतर्निहित कोड स्निपेट, जिनमें से प्रत्येक है एक दायरे के लिए बाध्य एक निश्चित फ़ाइल प्रकार से संबंधित है। उदाहरण के लिए, यदि आप किसी फ़ाइल के साथ काम कर रहे हैं .js विस्तार, जावास्क्रिप्ट स्कोप से संबंधित केवल स्निपेट उस फ़ाइल के लिए उपलब्ध होंगे.
देखना सभी उपलब्ध स्निपेट्स अपने वर्तमान फ़ाइल प्रकार के लिए, Alt + Shift + S दबाएं। यदि आप ड्रॉप-डाउन सूची में से एक स्निपेट चुनते हैं और उस पर क्लिक करते हैं, तो एटम पूर्ण स्निपेट को आपके संपादक में बिना किसी परेशानी के सम्मिलित करेगा.
यदि आप पहले से ही विकल्पों के बारे में जानते हैं, तो आपको पूरी सूची लोड करने की आवश्यकता नहीं है। जब आप टाइप करना शुरू करते हैं, तो एटम पॉप करता है स्वत: पूर्ण परिणाम बॉक्स ऊपर, जिसमें कुछ निश्चित स्कोप से संबंधित उपलब्ध कोड स्निपेट और आपके द्वारा अब तक लिखे गए स्ट्रिंग शामिल हैं.
उदाहरण के लिए, यदि आप टाइप करते हैं ज एक में चरित्र .एचटीएमएल फ़ाइल, सभी अंतर्निहित HTML स्निपेट्स के साथ एक ड्रॉपडाउन सूची ज दिखाई देगा.
किसी भी विकल्प पर क्लिक करके, एटम होगा पूरा HTML टैग पेस्ट करें (उदाहरण,. ), तथा प्रारंभ और समापन टैग के भीतर कर्सर रखें.
यदि आप ड्रॉपडाउन सूची के साथ परेशान नहीं करना चाहते हैं, तो आप टाइप करके उसी परिणाम को प्राप्त कर सकते हैं h1, और टैब मारना या दर्ज करना - ये दोनों चाबियां पूर्ण कोड स्निपेट डालें स्निपेट के उपसर्ग से संबंधित.
अपने कस्टम कोड स्निपेट को जोड़ना
1. कॉन्फ़िगरेशन फ़ाइल ढूंढें
एटम में अपने स्वयं के कस्टम कोड स्निपेट को जोड़ने के लिए, सबसे पहले आपको खोजने की आवश्यकता है कॉन्फ़िगरेशन फ़ाइल कहा जाता है snippets.cson यह है कॉफ़ीस्क्रिप्ट ऑब्जेक्ट नोटेशन फ़ाइल.
पर क्लिक करें फ़ाइल> स्निपेट्स… शीर्ष पट्टी में मेनू, और एटम खुल जाएगा snippets.cson फ़ाइल जिसमें आप अपने स्वयं के कस्टम स्निपेट जोड़ सकते हैं.
2. राइट स्कोप का पता लगाएं
आपको चाहिये होगा चार बातें अपने कस्टम स्निपेट को जोड़ने के लिए:
स्कोप का नाम
स्निपेट का नाम
उपसर्ग स्निपेट के हैंडल के रूप में कार्य करेगा
स्निपेट का शरीर
नाम, उपसर्ग, और स्निपेट (2-4) का शरीर पूरी तरह से आप पर निर्भर करता है, हालांकि आपको होना चाहिए गुंजाइश का नाम खोजें (1) अपने कस्टम स्निपेट को जोड़ने से पहले.
आपको जो स्कोप चाहिए, उसे ढूंढने के लिए, पर क्लिक करें फ़ाइल> सेटिंग्स शीर्ष मेनू बार में मेनू, फिर खोजें संकुल सेटिंग्स के बीच टैब। यहां, आपके द्वारा आवश्यक गुंजाइश के लिए एक खोज चलाएँ, उदाहरण के लिए यदि आप HTML भाषा में कोड स्निपेट जोड़ना चाहते हैं, तो टाइप करें एचटीएमएल खोज बार में.
पर क्लिक करें भाषा समर्थन पैकेज चुनी हुई भाषा में, और अपनी सेटिंग्स खोलें। के बीच में व्याकरण की सेटिंग्स, आप जल्दी से गुंजाइश का नाम पा सकते हैं, जैसा कि आप नीचे स्क्रीनशॉट पर देख सकते हैं.
यहाँ कुछ स्कॉप्स हैं जिन्हें आप अपने एटम प्रोजेक्ट्स में इस्तेमाल करना चाहते हैं:
सादे पाठ: .text.plain
HTML: .text.html.basic
सीएसएस: .source.css
सास: .source.sass
कम से: .source.css.less
जावास्क्रिप्ट: .source.js
पीएचपी: .text.html.php
अजगर: .source.python
जावा: .source.java
मत भूलो कि आप की आवश्यकता होगी एक डॉट जोड़ें (.) स्कोप के नाम के सामने में इसका उपयोग करने के लिए snippets.cson फ़ाइल.
3. सिंगल-लाइन कोड स्निपेट बनाएं
बनाने के लिए सिंगल-लाइन कोड स्निपेट, आपको स्कोपेट के स्कोप, नाम, उपसर्ग और बॉडी को जोड़ने की आवश्यकता है snippets.cson निम्न सिंटैक्स का उपयोग करके फ़ाइल:
यह उदाहरण स्निपेट एक जोड़ता है के साथ टैग विजेट शीर्षक HTML दायरे के लिए वर्ग। आप इस वाक्य रचना के बाद अपने एटम संपादक में किसी अन्य एकल-पंक्ति कोड स्निपेट को जोड़ सकते हैं.
कॉन्फ़िगरेशन फ़ाइल सहेजने के बाद, जब भी आप उपसर्ग टाइप करें और टैब कुंजी को हिट करें, एटम आपके कोड संपादक में संबंधित स्निपेट बॉडी पेस्ट करेगा। स्निपेट का नाम (उदाहरण में विजेट शीर्षक) स्वतः पूर्ण परिणाम बॉक्स में प्रदर्शित किया जाएगा.
4. मल्टी-लाइन कोड स्निपेट बनाएं
मल्टी-लाइन कोड स्निपेट्स थोड़ा अलग सिंटैक्स का उपयोग करें। आपको सिंगल-लाइन स्निपेट के लिए समान डेटा जोड़ने की आवश्यकता है - स्क्रिपेट का नाम, नाम, उपसर्ग और शरीर.
यहां जो अलग है वह यह है कि आपको स्निपेट बॉडी रखने की जरूरत है की एक जोड़ी के भीतर "" " (तीन दोहरे उद्धरण).
आप आगे जोड़कर अपने कस्टम कोड स्निपेट्स के उपयोग को सुविधाजनक बना सकते हैं टैब बंद हो जाता है स्निपेट बॉडी के लिए। टैब स्टॉप उन स्थानों को इंगित करता है जहां उपयोगकर्ता टैब कुंजी का उपयोग करके नेविगेट कर सकता है। टैब स्टॉप के साथ आप उस समय को बचा सकते हैं जिसमें इन-टेक्स्ट नेविगेशन की आवश्यकता होती है.
आप टैब स्टॉप जोड़ सकते हैं का उपयोग करते हुए $ 1, $ 2, $ 3,… वाक्य - विन्यास. एटम कर्सर को उस स्थान पर रखेगा जहां वह पाता है $ 1, तब आप कूद सकते हैं $ 2 टैब कुंजी के साथ, फिर $ 3, और इसी तरह.
एटम आपको अनुमति देता है अतिरिक्त जानकारी जोड़ें अपने स्निपेट्स का उपयोग करके वैकल्पिक पैरामीटर. यह सुविधा उपयोगी हो सकती है यदि कोई व्यक्ति आपके संपादक का उपयोग करता है और आप उन्हें स्निपेट के उद्देश्य से अवगत कराना चाहते हैं, या यदि आपके पास इतने जटिल कस्टम स्निपेट हैं कि आपको उनसे नोट्स जोड़ने की आवश्यकता है.
वैकल्पिक मापदंडों के मूल्य हैं स्वत: पूर्ण परिणाम बॉक्स में प्रदर्शित किया जाता है जब आप एक उपसर्ग टाइप करना शुरू करते हैं तो यह सामने आता है। नीचे दिए गए उदाहरण में, मैंने एक विवरण और एक जोड़ा अधिक… पिछले करने के लिए लिंक विजेट शीर्षक कस्टम स्निपेट:
'.text.html.basic': 'विजेट शीर्षक': 'उपसर्ग': 'wti "निकाय': '"विवरण": 'आप इस स्निपेट के साथ एक विजेट शीर्षक अपने साइडबार विजेट में जोड़ सकते हैं। "विवरणमोरल': 'http://hongkiat.com'
जब उपयोगकर्ता उपसर्ग टाइप करने लगता है WTI, अतिरिक्त जानकारी (विवरण + लिंक) स्वतः पूर्ण परिणाम बॉक्स के नीचे प्रदर्शित की जाएगी। पर एक नजर है अन्य वैकल्पिक पैरामीटर आप अपने कस्टम स्निपेट्स में अतिरिक्त जानकारी जोड़ने के लिए उपयोग कर सकते हैं.
