सबलाइम टेक्स्ट प्लगिन

जैसे ही कोई साइट डेवलप करना शुरू किया जाता है, वह पहला टूल टेक्स्ट एडिटर होता है. चाहे वह नोटपैड जितना आसान हो या पूरी तरह से तैयार IDE.

इस एपिसोड में, ऐडी और मैट Sublime Text के अपने प्लगिन के कलेक्शन पर नज़र डालते हैं. साथ ही, वे चर्चा करते हैं कि दोनों प्लगिन अपने वर्कफ़्लो में कैसे मदद कर सकते हैं.

पैकेज कंट्रोल

एपिसोड में बताए गए पैकेज (या प्लग इन) पाने के लिए, आपको पैकेज कंट्रोल इंस्टॉल करना होगा. इसे इंस्टॉल करना अच्छा और आसान है. इसके बारे में निर्देश यहां मिलेंगे.

JSHint

JSHint एक JavaScript लिंटर है, जो आपके JavaScript की जांच करता है और आपके कोड में संभावित गड़बड़ियों या गलत तरीकों को हाइलाइट करता है.

उदाहरण के लिए, अगर आपने गलती से कोई वैरिएबल नाम गलत टाइप कर दिया है, जैसा कि नीचे दिया गया है, तो JSHint बताता है कि fo को कभी तय नहीं किया गया था और इससे गड़बड़ी हो सकती है.

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

JSHint प्लगिन, समस्या के बारे में बताता है. इसके लिए, काम के टेक्स्ट के आस-पास पीले रंग का बॉक्स दिखाने और कर्सर को उस कोड के छोटे से हिस्से में डालने से, Sublime के नीचे बाईं ओर गड़बड़ी का मैसेज दिखेगा.

इसे इन अन्य समस्याओं का पता चलेगा:

• ऐसे वैरिएबल जो तय हैं, लेकिन कभी इस्तेमाल नहीं किए गए
• लूप के अंदर फ़ंक्शन बनाने से बचना
• तुलना करने के सही तरीकों का इस्तेमाल करना

SublimeLinter-JS कमांड पैकेज इंस्टॉल करने के लिए, आपको SublimeLinter पैकेज भी इंस्टॉल करना होगा. साथ ही, SublimeLinter-JSHEAD पैकेज पेज पर दिए गए इंस्टॉल करने के निर्देशों का पालन करना होगा.

कुछ डेवलपर को भी JSHint Gutter प्लगिन भी शामिल करने से मदद मिल सकती है. यह JS ऐंकर समस्या वाली किसी भी लाइन के गटर में एक छोटा सा बिंदु डालता है.

जीएससीएस

JSCS उन जगहों को हाइलाइट करेगा जहां आपका JavaScript किसी खास कोडिंग स्टाइल को फ़ॉलो नहीं करता.

उदाहरण के लिए, JSCS का इस्तेमाल यह तय करने के लिए किया जा सकता है कि 'if' जैसे कीवर्ड के बाद स्पेस का इस्तेमाल किया जाए या नहीं. इसके अलावा, यह भी तय किया जा सकता है कि कर्ली ब्रेसेस का इस्तेमाल उसी लाइन में होना चाहिए या किसी तरीके की नई लाइन पर.

SublimeLinter-JSCS पैकेज किसी भी समस्या को JS ऐंकर की तरह ही इनलाइन तरीके से हाइलाइट करता है. इससे समस्याओं को ठीक करना आसान हो जाता है.

टीम में काम करने के मामले में यह बहुत मददगार होता है, क्योंकि सभी लोग एक ही स्टाइल गाइड का पालन कर सकते हैं. साथ ही, अपना कोड एक जैसा रख सकते हैं.

सबसे सही तरीका यह है कि JSCS-Formatter पैकेज की मदद से, पेज पर मौजूद किसी भी समस्या को अपने-आप ठीक किया जा सकता है. ऐसा करने के लिए, ctrl + shift + p दबाएं, 'JSCS Formatter: इस फ़ाइल को फ़ॉर्मैट करें' टाइप करें और Enter दबाएं. इस बारे में ज़्यादा जानने के लिए, Addy की ब्लॉग पोस्ट पढ़ें.

कलर हाइलाइटर

कलर हाइलाइटर आपके CSS या Sass में दिए गए किसी भी रंग की परिभाषा के बैकग्राउंड में रंग जोड़ देगा.

यह तय किया जा सकता है कि जब आप इस पर कर्सर घुमाएं, तो यह पूरे बैकग्राउंड के साथ अंडरलाइन के रूप में दिखे या नहीं. शुरुआती सेटिंग देखने के लिए, 'पैकेज सेटिंग' > 'कलर हाइलाइटर' > 'सेटिंग - डिफ़ॉल्ट' पर जाएं. इसके बाद, 'सेटिंग - उपयोगकर्ता' में जाकर सेटिंग बदलें.

फ़ुल बैकग्राउंड हाइलाइट करने के लिए, 'सेटिंग - उपयोगकर्ता' फ़ाइल में इन्हें जोड़ें:

{
  "ha_style": "filled"
}

गटर का रंग

गटर का रंग कलर हाइलाइटर का एक विकल्प है, जो कलर वैरिएबल के सबसे ऊपर रंग दिखाने के बजाय उस लाइन के गटर में रंग डालता है.

कलर पिकर

अगर आपको कभी भी अपनी स्क्रीन से रंग चुनने का तेज़ और आसान तरीका चाहिए, तो कलर पिकर पैकेज आपके लिए सही हो सकता है.

ctrl + shift + c दबाएं और बूम करें - आपको एक कलर पिकर मिल गया है.

AutoFileName

AutoFileName एक आसान सा प्लगिन होता है. इससे टाइप करते समय ही, आपको संभावित फ़ाइलों की सूची मिल जाती है. किसी इमेज का नाम टाइप करने या कोई सीएसएस या JS फ़ाइल जोड़ने पर, यह तरीका बहुत आसान होता है. इससे आपका समय बचता है और टाइपिंग की गलतियां कम होती हैं.

ऑटोप्रीफ़िक्स

हमें सभी को यह एहसास हुआ था कि अब हम प्रीफ़िक्स वाली सीएसएस प्रॉपर्टी को जोड़ना भूल गए हैं. Autoप्रीफ़िक्स की मदद से, इसे अपने सीएसएस पर आसानी से चलाया जा सकता है. इससे आपको ज़रूरत के सभी प्रीफ़िक्स जुड़ जाएंगे.

इसका मतलब है कि हम इस बदलाव के बाद आगे बढ़ते हैं..

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

टाइप करने के लिए, ctrl + shift + p दबाएं और 'Autoprefix CSS' टाइप करके Enter दबाएं.

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

आपके पास यह तय करने का भी विकल्प है कि पैकेज सेटिंग में आपको किन ब्राउज़र और ब्राउज़र वर्शन का इस्तेमाल करना है. ज़्यादा जानकारी के लिए पैकेज कंट्रोल पेज देखें.

ज़्यादा दिखाएं...

Sublime टेक्स्ट के लिए कई तरह के दूसरे प्लगिन मौजूद होते हैं, इसलिए पैकेज कंट्रोल के बारे में जानना न भूलें.

ज़्यादा सलाह और सुझाव पाने के लिए, आपको WesBos के कीबोर्ड शॉर्टकट और सबलाइम टेक्स्ट के लिए अन्य प्लगिन वाले शानदार स्लाइड डेक को चेकआउट करना चाहिए.

WesBos चैनल के क्रिएटर ने 'पावर यूज़र के लिए सबसे अच्छा टेक्स्ट' नाम की किताब भी लिखी है. इसमें आपकी दिलचस्पी कुछ अन्य लोगों को भी हो सकती है :)