कोड अनुकूलन के लिए 10 सीएसएस और जावास्क्रिप्ट लाइनिंग उपकरण
लाइनिंग टूल डेवलपर्स को काफी मदद कर सकता है अच्छी गुणवत्ता, अनुकूलित कोड लिखें. लाइनिंग एक कोड-जाँच प्रक्रिया है जो स्रोत कोड में त्रुटियों की तलाश करती है, और संभावित बगों को चिह्नित करती है। अधिकांश लिंटर स्थिर कोड विश्लेषण तकनीक का उपयोग करते हैं, जिसका अर्थ है वास्तव में निष्पादित किए बिना कोड की जाँच की जाती है.
आप कोड लिखते समय, वास्तविक समय में, जैसे कि आप फ़ाइल को सहेजते हैं, जब आप बदलाव करते हैं, या कोड के उत्पादन में जाने से पहले, आप विभिन्न अवसरों पर एक बार में देख सकते हैं। जो भी आपके वर्कफ़्लो की तरह है, महत्वपूर्ण बात यह है एक नियमित आधार पर लिंट, क्योंकि यह आपको भविष्य में कई सिरदर्द से बचा सकता है.
लिंटर्स केवल बग रोकथाम उपकरण नहीं हैं, लेकिन उन्हें डीबगिंग के दौरान भी प्रभावी ढंग से उपयोग किया जा सकता है उन त्रुटियों को खोजने के लिए जिन्हें पकड़ना मुश्किल है अन्यथा। इस पोस्ट में हम आपके कोड की गुणवत्ता में सुधार करने के लिए अपने सीएसएस और जावास्क्रिप्ट फ़ाइलों का उपयोग करने के लिए 10 शक्तिशाली लाइनिंग टूल की जांच करेंगे।.
1. CSSLint
CSSLint ने स्पष्ट रूप से "आपकी भावनाओं को चोट पहुँचाने" का इरादा किया है, लेकिन बदले में यह "आपको कोड को बेहतर बनाता है"। CSSLint वर्तमान में CSS linting के बाजार का नेतृत्व करता है। यह जावास्क्रिप्ट में लिखा गया है, यह खुला-स्रोत है, और इसमें कई प्रकार के विन्यास विकल्प हैं.
CSSLint आपको अनुमति देता है त्रुटियों और चेतावनियों का चयन करें (संगतता, प्रदर्शन, दोहराव, आदि) आप के लिए परीक्षण करना चाहते हैं, तथा आपके द्वारा चुने गए नियमों के विरुद्ध अपने CSS सिंटैक्स को मान्य करता है.
यह न केवल ब्राउज़र में काम करता है, बल्कि इसमें कमांड लाइन इंटरफ़ेस भी है, और आप इसे अपने स्वयं के बिल्ड सिस्टम में भी एकीकृत कर सकते हैं.
2. सबलाइम लेल सीएसएस लिंट
CSSLint एक ऐसा प्रभावी CSS linter है, जो एक प्रतियोगी को खोजना मुश्किल है जो इसे मापता है। संभवतः यही कारण है कि SublimeLinter लाइनिंग फ्रेमवर्क ने इसके ऊपर अपने CSS linting plugin का निर्माण किया। SublimeLinter एक SublimeText प्लगइन है उपयोगकर्ताओं को अपने कोड (सीएसएस, पीएचपी, पायथन, जावा, रूबी, आदि) को एक साधन प्रदान करने का अधिकार प्रदान करता हैआर.
इससे पहले कि आप SublimeLinter CSSLint प्लगइन स्थापित करें, आपको CSSLint को Node.js मॉड्यूल के रूप में स्थापित करना होगा। इस आसान उपकरण के बारे में महान बात यह है कि आप केवल एक बार सेटिंग्स को कॉन्फ़िगर करना होगा, या यदि आप उन चूक से खुश हैं जो आपको भी नहीं करनी हैं, तो आप हमेशा अपने चेतावनी के बिना प्रासंगिक चेतावनी और सूचनाएं किसी भी और परेशानी के बिना संपादक को प्राप्त कर सकते हैं.
3. स्टाइललिंट
StyleLint डेवलपर्स को CSS, SCSS, या किसी भी अन्य वाक्यविन्यास में त्रुटियों से बचने में मदद करता है जो PostCSS पार्स कर सकते हैं। स्टाइललिंट सौ से अधिक नियमों का परीक्षण करता है, और आप कर सकते हैं चुनें कि आप किन पर स्विच करना चाहते हैं (एक उदाहरण विन्यास देखें).
यदि आप अपना स्वयं का कॉन्फ़िगरेशन नहीं बनाना चाहते हैं, तो आप पूर्व-लिखित, मानक कॉन्फ़िगरेशन का विकल्प भी चुन सकते हैं, जिसमें लगभग 60 स्टाइललिंट नियम शामिल हैं। StyleLint एक काफी लचीला उपकरण है, इसे अतिरिक्त प्लगइन्स द्वारा बढ़ाया जा सकता है, और 3 अलग-अलग रूपों में उपयोग किया जा सकता है: कमांड लाइन टूल के रूप में, Node.js मॉड्यूल के रूप में, या पोस्टसीएसएस प्लगइन के रूप में।.
4. W3C CSS Validator
हालांकि W3C का CSS Validator आमतौर पर एक लाइनिंग टूल के रूप में नहीं सोचा जाता है, लेकिन यह डेवलपर्स को W3C के आधिकारिक मानकों के खिलाफ अपने CSS स्रोत कोड की जांच करने का एक शानदार अवसर देता है। W3C ने सी भाषा के लिंट प्रोग्राम चेकर के समान एक उपकरण प्रदान करने के इरादे से अपने सत्यापनकर्ताओं का निर्माण किया.
सबसे पहले, उन्होंने HTML मार्कअप सत्यापनकर्ता बनाया जो बाद में सीएसएस सत्यापनकर्ता द्वारा पीछा किया गया था। W3C की CSS सत्यापनकर्ता के पास CSSLint के जितने विकल्प नहीं हैं, लेकिन यह है विस्तृत, आसानी से समझने में त्रुटि संदेश और सूचनाएं देता है.
एक अतिरिक्त सुविधा के रूप में, आप अपने कोड को W3C के हालिया मोबाइल वेब मानकों के खिलाफ भी देख सकते हैं, जो मोबाइल वेब के युग में कोई बुरी बात नहीं है.
5. गंदा मार्कअप
डर्टी मार्कअप आपके HTML, CSS और जावास्क्रिप्ट कोड को क्लीन, फॉर्मेट और वेरिफाई करता है। यह एक बढ़िया विकल्प हो सकता है यदि आप सीधे डिजाइन पसंद करते हैं और एक त्वरित समाधान चाहते हैं। गंदा मार्कअप वास्तविक समय में त्रुटि संदेश और सूचनाएं फेंकता है जब तुम संपादक के अंदर अपना कोड लिखें या संशोधित करें.
जब तुम मारो “स्वच्छ” बटन, यह एक बार में सिंटैक्स त्रुटियों को ठीक करता है, प्रारूप को दिखाता है, लेकिन चेतावनी को बरकरार रखता है आप उन्हें हल करना चाहते हैं लेकिन आप चाहते हैं। आप यह नहीं चुन सकते कि आप किन नियमों के लिए परीक्षण करना चाहते हैं, लेकिन सभी तीन फ़ाइल प्रकार कुछ सेटिंग्स हैं जो आपको प्रारूप तय करने में सक्षम बनाती हैं साफ उत्पादन का.
6. JSLint
JSLint को पहली बार 2002 में डगलस क्रॉकफोर्ड द्वारा जारी किया गया था, और तब से गति नहीं खोई है, इसलिए आप सुरक्षित रूप से मान सकते हैं कि यह एक स्थिर और विश्वसनीय जावास्क्रिप्ट लाइनिंग उपकरण है.
JSLint जावास्क्रिप्ट स्रोत कोड और JSON पाठ को संसाधित कर सकता है, और यह एक के साथ आता है जेएस सर्वोत्तम प्रथाओं का अनुसरण करने वाले तैयार कॉन्फ़िगरेशन क्रॉकफोर्ड ने अपनी पुस्तक के बारे में लिखा है जिसका शीर्षक है जावास्क्रिप्ट: द गुड पार्ट्स.
JSLint के पास कुछ विकल्प हैं जिन्हें आप चुन सकते हैं, लेकिन आप अपने स्वयं के कस्टम नियम नहीं जोड़ सकते हैं, या अधिकांश सुविधाओं को अक्षम कर सकते हैं. JSLint ने पहले से ही नवीनतम ECMAScript 6 मानकों को शामिल करना शुरू कर दिया है, आप यहां ES6 कार्यान्वयन के वर्तमान चरण की जांच कर सकते हैं.
7. जेएसहिंट
JSHint JSLint का एक अत्यधिक लोकप्रिय कांटा है, और इसका उपयोग फेसबुक, ट्विटर और माध्यम जैसी प्रमुख टेक कंपनियों द्वारा किया जाता है
JSHint एक समुदाय-संचालित परियोजना है जो कि प्रयास के साथ शुरू हुई JSLint का अधिक कॉन्फ़िगर करने योग्य और कम राय वाला संस्करण बनाएँ. JSHint डेवलपर्स को अपने किसी भी लाइनिंग विकल्प को कॉन्फ़िगर करने की अनुमति देता है, और अनुकूलित कॉन्फ़िगरेशन को एक अलग फ़ाइल में रखता है, एक विकल्प जो उपकरण को आसानी से पुन: प्रयोज्य बनाता है, और बड़ी परियोजनाओं के लिए एक अच्छा फिट है।.
आप न केवल JSHint का उपयोग वेनिला जावास्क्रिप्ट को लिंट करने के लिए कर सकते हैं, इसमें कई लोकप्रिय JS पुस्तकालयों के लिए आउट-ऑफ-द-बॉक्स समर्थन भी है, जैसे jQuery, Mootools, Mocha, और Node.js.
8. ESLint
ESLint जावास्क्रिप्ट लाइनिंग परिदृश्य पर नवीनतम बड़ी बात है। इसकी लोकप्रियता इसकी अत्यधिक लचीली प्रकृति से उपजी है। आप न केवल इसके परिष्कृत लाइनिंग नियमों के टन को अनुकूलित कर सकते हैं, और इसे सभी प्रमुख कोड संपादकों के साथ एकीकृत कर सकते हैं, लेकिन आप आसानी से भी कर सकते हैं इसकी कार्यक्षमता का विस्तार करें इसमें अलग-अलग प्लगइन्स जोड़कर.
पार्सर विकल्पों को निर्दिष्ट करके, आप भी कर सकते हैं जिस जेएस भाषा का आप समर्थन करना चाहते हैं, उसका मानक चुनें लाइनिंग प्रक्रिया के दौरान, जिसका अर्थ है कि आप न केवल अपनी स्क्रिप्ट को डिफ़ॉल्ट ECMAScript 5 सिंटैक्स के खिलाफ देख सकते हैं, बल्कि ECMAScript 6, ECMAScript 7 और JSX के खिलाफ भी देख सकते हैं।.
9. जेएससीएस
JSCS, या जावास्क्रिप्ट कोड शैली जावास्क्रिप्ट के लिए एक प्लगेबल कोड शैली लाइनर है, जो कोड स्वरूपण नियमों के लिए जाँच करता है.
JSCS का लक्ष्य एक साधन प्रदान करना है प्रोग्रामेटिक रूप से एक निश्चित कोडिंग शैली गाइड के पालन को लागू करता है. हालांकि JSCS बग और त्रुटियों की जांच नहीं करता है, लेकिन यह अभी भी तकनीकी उद्योग में कई प्रमुख खिलाड़ियों द्वारा उपयोग किया जाता है, जैसे कि Google, AirBnB, और AngularJS, क्योंकि यह डेवलपर्स को अत्यधिक पठनीय, सुसंगत कोड आधार रखने में मदद करता है.
JSCS एक वास्तविक समय-बचतकर्ता है, क्योंकि यह स्वचालित रूप से आपकी फ़ॉर्मेटिंग त्रुटियों को ठीक करता है, इसलिए आपको एक-एक करके उनके माध्यम से नहीं जाना है। इसमें बड़ी परियोजनाओं से संबंधित कई अलग-अलग प्रीसेट हैं, जैसे कि Google, ग्रंट, या विकिमीडिया कोडिंग स्टाइल प्रीसेट, जिसे आप आसानी से अपनी परियोजनाओं में उपयोग कर सकते हैं, लेकिन आप अपना स्वयं का कस्टम कॉन्फ़िगरेशन भी बना सकते हैं.
10. मानकज
StandardJS, या जावास्क्रिप्ट स्टैण्डर्ड स्टाइल JSCS की तरह एक कोड स्टाइल लाइनर है, लेकिन इसकी सादगी और सीधेपन में इससे भिन्नता है। StandardJS एक उत्कृष्ट विकल्प हो सकता है, यदि आप कॉन्फ़िगरेशन के साथ समय बिताना नहीं चाहते हैं, बस एक प्रभावी उपकरण चाहते हैं जो बॉक्स से बाहर हो.
StandardJS मुट्ठी भर पूर्व लिखित नियमों का पालन करता है, और इसका मुख्य मूल्य आपके कोडिंग वर्कफ़्लो को व्याकुलता-मुक्त रखना है, इसलिए आप उन नियमों को नहीं बदल सकते जिनसे आप असहमत हैं। यदि आप कस्टम कॉन्फ़िगरेशन नहीं करना चाहते हैं, और केवल चाहते हैं तो StandardJS चुनें अपनी जावास्क्रिप्ट फ़ाइलों में एक सुसंगत कोड शैली लागू करें.