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

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

इस एपिसोड में ऐडी और मैट अपने प्लगिन के कलेक्शन को देखते हैं सबलाइम टेक्स्ट के लिए इसका इस्तेमाल करें और हर एक काम अपने वर्कफ़्लो में मदद करता है.

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

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

JSHint

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

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

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

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

इसके अलावा, नीचे दी गई दूसरी समस्याएं भी आ सकती हैं:

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

SublimeLinter-JS संकेत पैकेज इंस्टॉल करने के लिए आपको SublimeLinter पैकेज भी इंस्टॉल करना होगा और इंस्टॉलेशन की प्रोसेस को फ़ॉलो करना होगा SublimeLinter-JS संकेत पैकेज पेज पर दिए गए निर्देश देखें.

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

जेएससीएस

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

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

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

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

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

कलर हाइलाइटर

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

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

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

{
  "ha_style": "filled"
}

गटर कलर

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

रङ्ग चयन सहायक

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

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

AutoFileName

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

अपने-आप प्रीफ़िक्सर

हम सभी को एहसास का वह पल आया है जहां हम भूल गए हैं प्रीफ़िक्स वाली सीएसएस प्रॉपर्टी जोड़ें. के साथ ऑटो प्रीफ़िक्सर उसे आसानी से अपने सीएसएस पर चलाएं और यह अपनी ज़रूरत के सभी प्रीफ़िक्स जोड़ें.

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

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

बस ctrl + shift + p दबाकर और लिखकर 'अपने-आप प्रीफ़िक्स सीएसएस' और 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;
}

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

ज़्यादा...

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

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

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