Brackets.io ने हाल ही में संस्करण 1.2 जारी किया, कुछ बेहतरीन नई विशेषताओं के साथ, जिनके बारे में आप उनके ब्लॉग पर पढ़ सकते हैं। हमने प्रत्येक एक्सटेंशन के लिए पूर्ण निर्देशों के साथ वहाँ (सर्वश्रेष्ठ कोई विशेष क्रम में) 10 सर्वश्रेष्ठ और सबसे उपयोगी ब्रैकेट एक्सटेंशन की एक सूची तैयार की है।
ब्रैकेट एक्सटेंशन
1.कोड तह
कई अन्य आईडीई और कोड संपादकों के विपरीत, ब्रैकेट में डिफ़ॉल्ट रूप से कोड तह विकल्प उपलब्ध नहीं होता है। कोड तह के साथ, आप आसानी से अपने कोड के बड़े हिस्से को एक ही लाइन में ध्वस्त कर सकते हैं। कोड फोल्डिंग एक्सटेंशन गितूब पर और ब्रैकेट एक्सटेंशन मैनेजर से उपलब्ध है।

कैसे इस्तेमाल करे
किसी भी नेस्टेड टैग को फोल्ड करने के लिए बस ऊपर दिखाए गए अनुसार पैरेंट टैग के बाईं ओर डाउन एरो पर क्लिक करें। जावास्क्रिप्ट या किसी अन्य प्रारूप के लिए समान सिद्धांत। सभी नेस्टेड स्टेटमेंट को एक लाइन में मोड़ने के लिए मूल तत्व के बाईं ओर नीचे तीर पर क्लिक करें। विस्तार करने के लिए, बस धन चिह्न पर क्लिक करें।
मुड़ी हुई रेखाओं की रेखा संख्या छिपी होती है, इसलिए जब आप कोड पर ध्यान केंद्रित कर रहे हों तो मुड़ी हुई रेखाओं को स्पॉट करना आसान होता है।
2. लोरेम पिक्सेल
प्लेसहोल्डर टेक्स्ट उत्पन्न करने के बहुत सारे तरीके हैं, लेकिन फ्रंट एंड वेब डेवलपर्स को अक्सर प्लेसहोल्डर छवियों की आवश्यकता होती है। रिक्त प्लेसहोल्डर छवि बनाने की कोशिश करने के बजाय, लोरेम पिक्सेल एक्सटेंशन का उपयोग करें। यह आपको किसी भी आकार के भव्य प्लेसहोल्डर चित्र सम्मिलित करने देता है। लोरेम पिक्सेल के बारे में अच्छा हिस्सा यह है कि यह आपको उस श्रेणी को चुनने देता है जिससे आप एक छवि चाहते हैं।
यदि वह पर्याप्त रूप से अच्छा नहीं है, तो प्लेसहोल्डर छवियां हर बार जब आप पृष्ठ को फिर से लोड करते हैं तो बदलते रहते हैं! छवियां अक्सर रंग योजनाओं को परेशान कर सकती हैं, इसलिए लोरेम पिक्सेल आपको केवल बी / डब्ल्यू धारक की छवियों का उपयोग करने के लिए एक 'ग्रेस्केल' विकल्प देता है। यह एक्सटेंशन lorempixel.com द्वारा संचालित है और यह ब्रैकेट एक्सटेंशन मैनेजर से उपलब्ध है।

कैसे इस्तेमाल करे
एक बार जब आप लोरेम पिक्सेल एक्सटेंशन स्थापित करते हैं, तो लोरम पिक्सेल लोगो - एक चेक स्क्वायर - एक्सटेंशन फलक (लाइव पूर्वावलोकन बटन के साथ दाईं ओर फलक) पर दिखाई देता है। सेटिंग बॉक्स लाने के लिए लोगो पर क्लिक करें। अपनी आवश्यक छवि आकार और पसंदीदा छवि श्रेणी सेट करें। यदि आप स्केल चित्र चाहते हैं, तो ग्रेस्केल विकल्प की जाँच करें। या तो लिंक को क्लिपबोर्ड पर कॉपी करें और इसे आवश्यकतानुसार उपयोग करें या वर्तमान कर्सर स्थिति में डालें।
3. ऑटोप्रिफ़र
अपने कोड में वेंडर उपसर्ग जोड़ना शराबी है। ऑटोप्रिफ़र एक्सटेंशन आपको बहुत समय (और बहुत काम!) बचा सकता है क्योंकि यह स्वचालित रूप से आपके कोड में आवश्यक विक्रेता उपसर्ग जोड़ता है। हर बार जब आप अपना कोड सहेजते हैं तो उसे किसी भी कॉन्फ़िगरेशन की आवश्यकता नहीं होती है, और आपके उपसर्गों को अपडेट करता है। आप चाहें तो कोड और ऑटो उपसर्ग भी चुन सकते हैं।

कैसे इस्तेमाल करे
ऑटोप्रिफ़र का उपयोग करने के लिए, बस उपसर्ग-मुक्त कोड लिखना शुरू करें। जैसे ही आप सहेजेंगे एक्सटेंशन स्वतः उपसर्ग कोड जोड़ देगा। कुछ चयनित कोड को ऑटो उपसर्ग करने के लिए, पहले कोड का चयन करें और फिर टैब संपादित करें ⇒ ऑटो उपसर्ग चयन।

ऑटोप्रिफ़िशर भी आपको इसकी सेटिंग में कस्टम उपसर्ग जोड़ने देता है। एक्सटेंशन सेटिंग्स पर जाने के लिए: ⇒ ऑटोप्रेकफ़िशर सेटिंग्स संपादित करें ।
सुंदर, कैस्केड, उपसर्ग कोड के लिए, एक्सटेंशन सेटिंग्स में विज़ुअल कैस्केड विकल्प को सक्षम करें।
4. मार्कडाउन पूर्वावलोकन
मार्कडाउन सुंदर सादे-पाठ मार्कअप भाषा है जो HTML में आसानी से परिवर्तनीय है। Markdown पूर्वावलोकन पाठ संस्करण के ठीक नीचे प्रदान किए गए Markdown का पूर्वावलोकन करता है। यह आपको दो अलग-अलग शैलियों के बीच चयन करने देता है, जीथब फ्लेवर्ड मार्कडाउन और स्टैंडर्ड मार्कडाउन।
तीन थीम हैं जिन्हें आप पूर्वावलोकन विंडो के लिए चुन सकते हैं - लाइट, डार्क और क्लासिक। मार्कडाउन पूर्वावलोकन में एक स्क्रॉल सिंक विकल्प (डिफ़ॉल्ट रूप से सक्षम) भी है। एक्सटेंशन को Github से या ब्रैकेट एक्सटेंशन मैनेजर से डाउनलोड किया जा सकता है।

कैसे इस्तेमाल करे
एक .md या एक .markdown फ़ाइल खोलें। यदि आपने मार्कडाउन पूर्वावलोकन स्थापित किया है, तो एम down बटन दाईं ओर दिखाई देना चाहिए। इसे क्लिक करें, और आप रेंडर किए गए मार्कडाउन देखेंगे। थीम को बदलने के लिए, या स्क्रॉल सिंक को अक्षम करने के लिए, बस मार्कडाउन पूर्वावलोकन अनुभाग के ऊपरी दाएं कोने में स्थित गियर आइकन पर क्लिक करें।
5. ब्रैकेट प्रतीक
फ़ाइल आइकन के साथ अपने कोड संपादक को मसाला देना हमेशा मजेदार होता है। ब्रैकेट आइकन साइड बार में सूचीबद्ध सभी फ़ाइलों के लिए, फ़ाइल प्रकार के आधार पर रंगीन आइकन जोड़ता है। इसमें अधिकांश फ़ाइल प्रकारों के लिए आइकन हैं, और आप गिथब पृष्ठ पर आइकन अनुरोध पोस्ट कर सकते हैं।
बोनस टिप:
ब्रैकेट आइकॉन आइकॉन्स प्रोजेक्ट से आइकन का उपयोग करता है। आप एक्सटेंशन फ़ाइल आइकन (ब्रैकेट आइकन्स प्रोजेक्ट का एक कांटा) भी देख सकते हैं, जो फ़ॉन्ट विस्मयकारी परियोजना से आइकन का उपयोग करता है। यह अंत में व्यक्तिगत पसंद को उबालता है।

कैसे इस्तेमाल करे
बस एक्सटेंशन स्थापित करें और ब्रैकेट्स (F5) को पुनः लोड करें।
6. दस्तावेज़ टूलबार
ब्रैकेट में टैब की कमी है। सादा और सरल तथ्य। दस्तावेज़ टूलबार एक्सटेंशन इस कार्यक्षमता को जोड़ता है। साइडबार के 'सक्रिय' सेक्शन में मौजूद सभी फाइलें इस एक्सटेंशन में टैब के रूप में दिखाई देती हैं। आप साइडबार को भी छिपा सकते हैं, और एक अच्छे इंटरफ़ेस के लिए केवल दस्तावेज़ टूलबार का उपयोग कर सकते हैं।

कैसे इस्तेमाल करे
एक्सटेंशन इंस्टॉल करें और ब्रैकेट्स (F5) को पुनः लोड करें।
7. ब्रैकेट गिट
सब कुछ इन दिनों गिट के साथ एकीकृत करने की कोशिश करता है; यह अब तक का सबसे लोकप्रिय संस्करण नियंत्रण प्रणाली (VCS) है। ब्रैकेट गेटिट समान ब्रैकेट एक्सटेंशन के बीच आसानी से सबसे अच्छा है। इसमें सभी git फीचर्स हैं जिनकी आपको आवश्यकता होगी। आप आसानी से स्वयं कोष्ठक के भीतर से बदलाव कर सकते हैं, एक क्लिक के साथ परिवर्तनों को धक्का और खींच सकते हैं, फ़ाइल इतिहास और कुल प्रतिबद्ध इतिहास भी देख सकते हैं। यदि आप Git के साथ अच्छे हैं, तो आपको इस एक्सटेंशन के साथ कोई समस्या नहीं मिलेगी।
नोट: ब्रैकेट Git का उपयोग करने के लिए आपको Git को अपने कंप्यूटर पर इंस्टॉल करना होगा। एक्सटेंशन स्थापित करने के बाद, आपको अपनी Git निष्पादन योग्य फ़ाइल में पथ दर्ज करना पड़ सकता है (यदि यह डिफ़ॉल्ट पथ में नहीं है)।
कैसे इस्तेमाल करे

ब्रैकेट्स गिट का उपयोग करना बहुत सीधे आगे है। अपने स्थानीय Github रेपो फ़ोल्डर को ब्रैकेट में प्रोजेक्ट फ़ोल्डर बनाएँ। फिर एक फ़ाइल खोलें, कुछ बदलाव करें और इसे सहेजें। फिर आप आगे जा सकते हैं और दाईं ओर गिट आइकन पर क्लिक कर सकते हैं और यह नीचे की तरफ ब्रैकेट गिट पेन को खोलेगा। यह आपकी फ़ाइलों में किए गए किसी भी संशोधन को सूचीबद्ध करेगा।
आप जो भी फाइल करना चाहते हैं, उसकी जांच करें और फिर कमिट बटन पर क्लिक करें। यह किए गए परिवर्तनों को सूचीबद्ध करने वाले पॉपअप को खोल देगा। अपना प्रतिबद्ध संदेश दर्ज करें और Ok पर क्लिक करें। और आपने सफलतापूर्वक ब्रैकेट से सीधे जीआईटी के लिए एक फ़ाइल प्रतिबद्ध किया है!
कमिट करने के बाद बस पुश बटन पर क्लिक करें (यह असंबद्ध कमिट की संख्या भी दिखाता है, जैसा कि आप ऊपर GIF में देख सकते हैं)।
सेटिंग्स को कॉन्फ़िगर करना
ब्रैकेट गेट पेन खोलें, और सेटिंग बटन (दाईं ओर से दूसरा) पर क्लिक करें। वैसे भी आप इसे पसंद करने के लिए ब्रैकेट गिट कॉन्फ़िगर करने के लिए स्वतंत्र महसूस करें।

फ़ाइल और प्रतिबद्ध इतिहास देखने के लिए
अपने फाइल इतिहास और प्रतिबद्ध इतिहास को खूबसूरती से सूचीबद्ध करने के लिए संबंधित बटन पर क्लिक करें। क्या हमने उल्लेख किया है कि आप अवतार को एक काले और सफेद अवतार, एक रंगीन अवतार, या अपने Gravatar में बदल सकते हैं?


8. लिंट ऑल थिंग्स
लिंट सभी चीजें। सब कुछ। यह एक्सटेंशन एक बार में आपकी सभी फाइलों को लाइन करता है। बहुत उपयोगी है जब आपके पास बहुत सारी कनेक्टेड फ़ाइलों के साथ एक बड़ी परियोजना है। सभी लिंट त्रुटियां एक फलक में अच्छी तरह से दिखाई देती हैं।
कैसे इस्तेमाल करे

लिंट ऑल थिंग्स का उपयोग करने के लिए, बस व्यू टैब पर जाएं और लिंट पूरी परियोजना पर क्लिक करें।
9. ब्रैकेट टोडो
ब्रैकेट्स टोडो एक छोटा सा विस्तार है जो एक स्वच्छ सूची प्रारूप में सभी TODO टिप्पणियों को दिखाता है। डिफ़ॉल्ट रूप से, यह 5 टैग - TODO, NOTE, FIXME, CHANGES और FUTURE का समर्थन करता है। आप टिप्पणियों को डोन के रूप में भी चिह्नित कर सकते हैं। दृश्य विकल्पों में आप टैग द्वारा टिप्पणियों को फ़िल्टर कर सकते हैं। ब्रैकेट टोडो आपको टैग के साथ-साथ अपने स्वयं के टैग के लिए भी कस्टम रंगों को परिभाषित करने देता है, यदि आप कभी भी अपनी टिप्पणियों के साथ रचनात्मक होना चाहते हैं।
यदि आप एक बड़ी परियोजना पर काम कर रहे हैं, और कई फाइलों से टिप्पणियों का ट्रैक रखने की आवश्यकता है, तो आप ब्रैकेट टोडो की खोज का दायरा बदल सकते हैं। कुछ फ़ाइलों और फ़ोल्डरों जैसे वेंडर फ़ोल्डर को बाहर करना चाहते हैं? कोई चिंता नहीं। केवल बहिष्करण सूची में पथ जोड़ें। आप रूट प्रोजेक्ट निर्देशिका में .todo फ़ाइल को जोड़कर प्रत्येक प्रोजेक्ट के लिए सेटिंग्स को अनुकूलित कर सकते हैं।
आप गितुब डॉक्यूमेंटेशन में सभी सेटिंग्स विकल्पों से गुजर सकते हैं।
कैसे इस्तेमाल करे

ब्रैकेट टोडो का उपयोग करने के लिए, बस अपने कोड में एक टैग के साथ एक टिप्पणी जोड़ें। टैग नाम अपरकेस में होना चाहिए, उसके बाद एक कोलोन (:) होगा। सभी टोडो को देखने के लिए, दाहिने हाथ के विस्तार फलक में टोडो आइकन पर क्लिक करें।
विन्यास:
- टोडो को HTML टिप्पणियों के लिए अनुमति देने के लिए: बस सेटिंग्स खोलें - टोडो आइकन → सेटिंग्स (गियर आइकन) पर क्लिक करें - और .todo फ़ाइल खोलने के लिए क्लिक करें। इस फ़ाइल में, यह कोड जोड़ें:
{"रेगेक्स": {"उपसर्ग": "(! :)!"}}
टोडो सेटिंग्स मेनू कैसा दिखता है - खोज क्षेत्र बदलने के लिए: .todo फ़ाइल में यह कोड जोड़ें:
{"खोज": {"गुंजाइश": "मेरी परियोजना"}}
- किसी भी फ़ाइल / फ़ोल्डर / फ़ाइल एक्सटेंशन को खोज क्षेत्र से बाहर करने के लिए: इस कोड को .todo फ़ाइल में जोड़ें।
{"खोज": {"गुंजाइश": "मेरी परियोजना"
"बहिष्कृत": ["आपका फ़ोल्डर"]
"बहिष्कृत": "" तुम्हारा "" "बहिष्कृत": [".youxtxtension"]}}
10. सुशोभित करना
सुशोभित आपके कोड को अच्छा बनाता है। यह रिक्त स्थान, इंडेंटेशन और लाइनों को ठीक करता है।

कैसे इस्तेमाल करे
सुशोभित का उपयोग करना बहुत आसान है। आपको बस कुछ कोड> राइट क्लिक > ब्यूटीफुल का चयन करना है।
वैकल्पिक रूप से, आप संपादन टैब पर जा सकते हैं और ' सुशोभित ' पर क्लिक कर सकते हैं।