फ्रंट-एंड के लिए उदात्त पाठ 2 की तैयारी

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

उदात्त पाठ 2 एक लोकप्रिय एक्स्टेंसिबल क्रॉस-प्लेटफॉर्म टेक्स्ट एडिटर है जिसके लिए कई प्लगइन्स लिखे गए हैं, यदि सभी अवसरों के लिए नहीं, तो कई के लिए। इस पोस्ट में मैं यह बताने की कोशिश करूँगा कि इस कंस्ट्रक्टर से HTML, CSS और जावास्क्रिप्ट के साथ काम करने के लिए सुविधाजनक फ्रंट-एंड डेवलपर टूल कैसे बनाया जाए। एक छोटा अस्वीकरण: मैं मैक ओएस एक्स पर काम करता हूं, इसलिए कुछ "क्रॉस-प्लेटफॉर्म क्षणों" में मैं कुछ खत्म नहीं कर सकता हूं, लेकिन मैं पूरी जानकारी प्रदान करने का प्रयास करूंगा। और एक और बात: मैं परम सत्य का ढोंग नहीं करता और आपके विकल्पों की प्रतीक्षा करता हूं।



यह समझने के लिए कि कहां और क्या चर्चा की जाएगी, मैं सबसे पहले लेख की संरचना का परिचय दूंगा:
परिचय
मुख्य बिंदुओं, आवश्यक लिंक आदि का विवरण।
प्लग-इन

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

लाइव पुनः लोड और सीएसएस प्रीप्रोसेसर समर्थन
मैंने दो अलग-अलग चीजों को एक खंड में क्यों जोड़ा? सभी कुछ सॉफ़्टवेयर की बारीकियों के कारण, जिनकी मैं बाद में चर्चा करूंगा। लाइव पुनः लोड (या लाइव पूर्वावलोकन), अगर अचानक किसी को पता नहीं है, यह ब्राउज़र में देख रहा है कि आपने पृष्ठ को ताज़ा करने की आवश्यकता के बिना, संपादक में क्या किया, अर्थात। CSS प्रीप्रोसेसर समर्थन द्वारा, मेरा मतलब है कि SASS / SCSS, LESS, स्टाइलस, या जो भी आप सबलिम टेक्स्ट 2 में उपयोग करना पसंद करते हैं, साथ ही साथ इस सभी सामग्री (बिल्ड / वॉच सिस्टम) का स्वत: संकलन का आयोजन करना चाहते हैं। । वास्तव में, यह सब एक खंड में संयुक्त है, न केवल ऊपर वर्णित कारण की वजह से, बल्कि इसलिए भी कि मेरा (मुझे तुम्हारा भी लगता है) लक्ष्य कुछ बदलाव करना संभव था, उदाहरण के लिए, scss में- फ़ाइल, इसे सहेजें और तुरंत ब्राउज़र में परिणाम देखें, अर्थात् पृष्ठ को संकलित करने और अपडेट करने की प्रक्रिया को स्वचालित करें। इसलिए हमारे पास श्रृंखला "सेव फ़ाइल"> "संकलन"> "अपडेट" है, जो लेख के एक भाग में काफी तार्किक रूप से डालता है।

परिचय

प्लगइन्स को आराम से स्थापित करने, हटाने और अद्यतन करने के लिए, उदात्त पैकेज नियंत्रण का उपयोग किया जाता है , इस पृष्ठ पर इसकी स्थापना बहुत सरल और वर्णित है। लगभग सभी प्लगइन्स जिनकी आपको आवश्यकता हो सकती है पैकेज कंट्रोल में हैं, इसलिए उन्हें यहाँ देखना सुविधाजनक है । मैं इस प्लगइन को अनदेखा करने और मैन्युअल रूप से कुछ स्थापित करने की अनुशंसा नहीं करता, जब तक कि आपके पास इसका कोई विशेष कारण न हो। आप कह सकते हैं कि पैकेज नियंत्रण अब उदात्त पाठ 2 के लिए वास्तविक मानक है।

सभी सबमिट किए गए प्लगइन्स को GitHub पर होस्ट किया गया है, लगभग सभी में एक रीडमी है जो पढ़ने के लिए बेहतर है। यह सभी बारीकियों का वर्णन करने के लिए समझ में नहीं आता है, क्योंकि सब कुछ बदल जाता है, इसलिए इस लेख में मैं एक संक्षिप्त विवरण दूंगा, और लेखक स्वयं प्लगइन्स के विवरण का पूरी तरह से वर्णन करते हैं।

प्लग-इन

मुख्य प्लगइन्स

ZenCoding
ZenCoding शायद ही टिप्पणी की जरूरत है, यह करता है? 2008 में pepelsbey द्वारा लॉन्च किया गया, इस "कोडिंग त्वरक" ने विकास के समय की एक भयानक राशि को बचाया। इसके बाद से इसे कई संपादकों और IDE के प्लगइन्स के रूप में लागू किया गया है।

बहुत पहले नहीं, ZenCoding प्लगइन का एक वारिस है - Emmet । जैसा कि टिप्पणियों में सुझाव दिया गया है , यह पहले से ही इसका उपयोग करने के लिए पर्याप्त स्थिर है।

SublimeLinter
यह प्लगइन HTML, CSS और जावास्क्रिप्ट सहित कई भाषाओं के लिए एक प्रकार का समर्थन जोड़ता है। बेहतर प्रदर्शन के लिए, नोड .js स्थापित करें , GitHub पर इसके बारे में अधिक पढ़ें। सामान्य तौर पर, यह उन प्लगइन्स में से एक है जिसके लिए रीडमी को पूरी तरह से पढ़ना बेहतर है।

SublimeCodeIntel
यह आईडीई की क्षमताओं के लिए सब्लिम टेक्स्ट 2 की क्षमताओं को लाता है, विशेष रूप से "कोड इंटेलिजेंस" और "स्मार्ट स्वतः पूर्ण" को जोड़ता है, विशेष रूप से, यह घोषणा में जल्दी से कूदने की क्षमता को जोड़ता है, import'ov के लिए स्वत: पूर्ण और स्टेटस बार में फ़ंक्शन के बारे में जानकारी प्रदर्शित करता है।

संरेखण
Sublime Package Control द्वारा यह प्लगइन मल्टी-लाइन और कई चयनित कोड वर्गों को संरेखित करना आसान बनाता है।

CSSComb
CSSComb के बारे में यह विस्तार से पढ़ा जा सकता है कि एक हब्र पर यह उपयोगी उपकरण आपके सीएसएस को निर्दिष्ट क्रम में गुणों की व्यवस्था करके और उन्हें समूहों में तोड़कर ब्रश करेगा।

HTML5 और jQuery
ये HTML5 टैग स्निपेट्स और jQuery के तरीकों के सेट हैं, जिनकी एक पूरी सूची टूल्स> स्निपेट्स में मिल सकती है।

JsFormat
Jsbeautifier.org सर्विस का उपयोग करते हुए JS / JSON कोड को फॉर्मेट करने और काफी लचीली सेटिंग्स रखने के लिए एक प्लगइन। यदि कोई चयन नहीं है, तो कोड का एक चयनित अनुभाग या संपूर्ण फ़ाइल को प्रारूपित करता है। यह जाँच नहीं करता है कि फ़ाइल में * .js एक्सटेंशन है, इसलिए सावधानी के साथ इसका उपयोग करें।

minifier
Minifier जावास्क्रिप्ट ( Google क्लोजर कंपाइलर या UglifyJS ) और CSS ( Reducisaurus ) को छोटा कर सकता है। पूरे प्लगइन में दो मुख्य संयोजन होते हैं, एक वर्तमान फ़ाइल में परिणाम बचाता है, और दूसरा नाम name.min.ext के साथ एक अलग से होता है।

Prefixr
एक निश्चित रूप से उन लोगों के लिए होना चाहिए जो प्रीप्रोसेसरों का उपयोग नहीं करते हैं, और बाकी सभी भी काम में आएंगे। जहाँ आवश्यक हो , उपसर्ग.कॉम सेवा के साथ विक्रेता उपसर्ग (और यहां तक ​​कि सही क्रम में) जोड़ता है । यह बस काम करता है - उपसर्गों के बिना संपत्ति लिखें, कुंजी संयोजन दबाएं और आपका काम हो गया।

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

अतिरिक्त प्लगइन्स

क्लिपबोर्ड का इतिहास
शायद यह कार्यक्षमता पूरे ओएस में होना बेहतर है, लेकिन मेरे पास संपादक में पर्याप्त है। प्लगइन क्लिपबोर्ड के इतिहास को याद करता है, इसलिए आप न केवल अंतिम कॉपी किए गए टुकड़े को चिपका सकते हैं, बल्कि पिछले वाले भी।

EncodingHelper
अन्य बातों के अलावा, स्टेटस बार में खुली फाइल के एन्कोडिंग को प्रदर्शित करता है। सामान्य तौर पर, मैंने इस प्लगइन को स्थापित करने का एकमात्र कारण है, लेकिन इसकी अन्य विशेषताएं हैं, उदाहरण के लिए, यह चेतावनी दे सकता है कि गलत एन्कोडिंग में खोली गई फ़ाइल क्षतिग्रस्त हो सकती है।

प्लेसहोल्डर
क्या आपको अक्सर कोड में मछली को एम्बेड करना पड़ता है? लॉरम इप्सम के सभी प्रेमियों के लिए, स्निपेट्स का यह सेट निश्चित रूप से उपयोगी है। सरल पाठ के अलावा, यह पैराग्राफ, सूची, चित्र आदि सम्मिलित कर सकता है।

थीम - सोडा
मैक ओएस एक्स मालिकों के लिए यह मेरी व्यक्तिपरक सिफारिश है। सोडा विषय देशी उदात्त पाठ 2 इंटरफ़ेस खींचता है। दो रंग भिन्नताएं हैं - लाइट और डार्क, साथ ही रेटिना डिस्प्ले के लिए समर्थन। हालाँकि, थीम तीन OS के लिए उपलब्ध है।

लाइव पुनः लोड और सीएसएस प्रीप्रोसेसर समर्थन

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

सिंटेक्स सपोर्ट

शुरुआत के लिए, आइए जटिलताओं के बारे में भूल जाएं और सिर्फ उन प्रीप्रोसेसरों के लिए सिंटैक्स हाइलाइटिंग करें जिनकी हमें आवश्यकता है। प्रत्येक के पास अपना स्वयं का प्लगइन है, इसलिए आपको जो कुछ भी करने की ज़रूरत है उसे चुनना है: लेस , एसएएसएस और एससीएसएस , स्टाइलस (किट में एक निर्माण प्रणाली भी है)।

प्लग-इन

यह उन प्लगइन्स का वर्णन करता है जो आपके लिए उपयोगी होंगे यदि आप किसी भी तृतीय-पक्ष प्रोग्राम का उपयोग नहीं करना चाहते हैं, लेकिन केवल उपशीर्ष पाठ 2 के साथ प्रबंधन करना पसंद करते हैं।

स्वचालित संकलन

संपादक के लिए कुछ बिल्ड सिस्टम के प्रत्यक्ष जोड़ के साथ नहीं, बल्कि SublimeOnSaveBuild प्लगइन के साथ शुरू करना बेहतर है। फ़ाइल को सहेजते समय आपके द्वारा चुने गए बिल्ड सिस्टम के लिए वह जो कुछ भी करता है वह स्वचालित रूप से बिल्ड (मेनू में, यह टूल> बिल्ड) है।

बिल्ड सिस्टम को जोड़ने के लिए, यहां सब कुछ सिंटैक्स समर्थन के समान है, जिसे आपको ज़रूरत है उसे चुनें: लेस-बिल्ड , एसएएस बिल्ड (और, ज़ाहिर है, कम्पास )।

लाइव पुनः लोड करें

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

अलग कार्यक्रम

जैसे, इन कार्यक्रमों का सबलेम टेक्स्ट 2 से कोई संबंध नहीं है, लेकिन चूंकि सब कुछ प्लगइन्स की मदद से लागू नहीं किया गया है, इसलिए कुछ कार्यों के लिए कई अलग-अलग सॉफ़्टवेयर का उपयोग करना पसंद करेंगे।

LiveReload

अवसरों
LiveReload, सबसे पहले और जैसा कि नाम से पता चलता है, ब्राउज़र में फ़ाइल परिवर्तनों को मॉनिटर करने और उन्हें अपडेट करने में सक्षम है, और दूसरी बात, यदि सब कुछ स्वचालित रूप से संकलित नहीं किया गया है, तो बहुत कुछ: LESS, SASS, कम्पास, स्टाइलस, कॉफीस्क्रिप्ट, IcedCfishScript, Eco , एसएलआईएम, एचएएमएल, जेड। लाइव पुनः लोड करने के लिए, आपको अपने ब्राउज़र में संलग्न एक्सटेंशन को स्थापित करना होगा, सफारी, क्रोम और फ़ायरफ़ॉक्स के लिए संस्करण हैं।

क्रॉस-प्लेटफॉर्म
सामान्य तौर पर, प्रोग्राम मैक ओएस एक्स के लिए है। विंडोज के लिए एक संस्करण है, लेकिन आज यह प्री-अल्फा संस्करण है। लिनक्स के लिए, गार्ड-लिवरेलैड का उपयोग करने का सुझाव दिया गया है।

कीमत
मैक ओएस एक्स संस्करण की कीमत ऐप स्टोर में $ 9.99 है, और एक नि: शुल्क परीक्षण भी है। लिनक्स और विंडोज के लिए संस्करण मुफ्त हैं।

CodeKit

अवसरों
यह कार्यक्रम व्यापक संभावनाएं प्रदान करता है और, सामान्य रूप से, सबसे सुविधाजनक और कार्यात्मक जीयूआई। ब्राउज़र एक्सटेंशन के बिना पुनः लोड करने में सक्षम, स्वचालित रूप से कम, सास, स्टाइलस, जेड, हैम, स्लिम, कॉफीस्क्रिप्ट, जावास्क्रिप्ट और कम्पास को संकलित करें; स्क्रिप्ट को संयोजित और छोटा करें, छवियों को अनुकूलित करें, आदि।

क्रॉस-प्लेटफॉर्म
वह नहीं है, कार्यक्रम केवल मैक ओएस एक्स के लिए है।

कीमत
$ 25। एक नि: शुल्क परीक्षण है।

स्काउट

अवसरों
अन्य कार्यक्रमों के विपरीत, स्काउट केवल एसएएसए और कंपास को संकलित कर सकता है, लेकिन इसके जीयूआई में आप आउटपुट मोड निर्दिष्ट कर सकते हैं, और यह मुफ़्त है।

क्रॉस-प्लेटफॉर्म
विंडोज और मैक ओएस एक्स के लिए संस्करण हैं, इस बार विंडोज के लिए संस्करण भरा हुआ है। लिनक्स के लिए, दुर्भाग्य से, कोई संस्करण नहीं है।

कीमत
मुफ्त में।

निजी तौर पर, मैंने LiveReload का विकल्प चुना, इस तथ्य के बावजूद कि कोडकिट अधिक कार्यात्मक है। मैंने इस कार्यक्षमता को आंशिक रूप से सबलेम टेक्स्ट 2 प्लगइन्स के साथ बदल दिया (आखिरकार, यह लेख उदात्त के बारे में है), और मुझे बाकी की आवश्यकता नहीं है (वेब ​​सेवाएं हैं या मैं अभी इसका उपयोग नहीं करता हूं)।

मुझे लगता है कि कई "उदात्त पाठ 2 पर आधारित फ्रंट-एंड डेवलपमेंट पर्यावरण" के लिए अन्य विकल्पों के बारे में जानने में रुचि रखेंगे, इसलिए मैं सुझाव देता हूं कि आप टिप्पणियों में प्लगइन्स का चयन करें।

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

टिप्पणियों का उल्लेख है कि मैंने वीसीएस और एसएफटीपी प्लगइन्स के बारे में नहीं लिखा है। तथ्य यह है कि यह या तो सभी के लिए नहीं है, या अलग-अलग चीजों के लिए (किसी Git के लिए, किसी SVN के लिए, किसी के लिए कुछ भी आवश्यक नहीं है)। खैर, चूंकि सभी प्लगइन्स स्वयं प्रौद्योगिकियों के नाम पर हैं, जिनमें से समर्थन वे जोड़ते हैं, यदि आवश्यक हो तो उन्हें ढूंढना मुश्किल नहीं होगा।

और अंत में, टिप्पणियों की सिफारिश की गई प्लगइन्स की एक सूची (और उन उपयोगकर्ताओं के उपनाम, जिन्होंने ऐसा किया, निश्चित रूप से):

• Bektimirov : LiveCSS । CSS में निर्दिष्ट रंगों का एक दृश्य प्रदर्शन जोड़ता है।
• साइबरएप : सबलाइमफाइलडिफ्स । एक फ़ाइल तुलना समारोह जोड़ता है।
• roman01la : YUI- कंप्रेसर । एक और JS और CSS मिनिफिकेशन प्लगइन जो Yahoo से एक ही नाम के टूल का उपयोग करता है!
• जेसीएचओ : सबलाइमोडोडो । टिप्पणियों में नोट्स का उपयोग करके उपयोगी।