Airbnb स्टाइल गाइड स्वच्छ और सुसंगत कोड लिखने के लिए दिशानिर्देशों का एक सेट है। यह 2012 में जारी किया गया था और तब से जावास्क्रिप्ट परियोजनाओं के लिए सबसे लोकप्रिय शैली गाइडों में से एक बन गया है।
यह सुसंगत कोड लिखने के लिए दिशानिर्देशों का एक सेट प्रदान करता है जो विभिन्न प्रकार की शैली को लागू करके बनाए रखना आसान है इंडेंटेशन, कमेंट्स, अधिकतम लाइन लेंथ, वेरिएबल नेमिंग कन्वेंशन, कोट्स और फंक्शन डेफिनिशन पर नियम। किसी JavaScript प्रोजेक्ट में Airbnb स्टाइल गाइड सेट अप करने के लिए, आपको ESLint जैसे लाइनिंग टूल का इस्तेमाल करना होगा।
ईएसलिंट स्थापित करें
ESLint एक ओपन-सोर्स जावास्क्रिप्ट है लिंटिंग टूल जो डेवलपर्स को समस्याओं को ढूंढकर और ठीक करके स्वच्छ कोड लिखने में मदद करता है। यह आपके कोड में सिंटैक्स त्रुटियों, अमान्य पैरामीटर और अपरिभाषित चर जैसे मुद्दों का पता लगा सकता है। जब आप ESLint के साथ चलाते हैं - -हल करना टैग, यह स्वचालित रूप से कोड में किसी भी सुधार योग्य मुद्दों की पहचान करता है और उन्हें ठीक करता है जिससे आपका समय बचता है।
आप Airbnb स्टाइल गाइड जैसे स्टाइल गाइड लागू करने के लिए ESLint का उपयोग कर सकते हैं।
आरंभ करने के लिए, ESLint को देव निर्भरता के रूप में स्थापित करने के लिए टर्मिनल में निम्न कमांड चलाएँ:
एनपीएम इंस्टॉल --सेव-देव
फिर ESLint को इनिशियलाइज़ करें।
एनपीएक्स एस्लिंट --init
आपको अपने प्रोजेक्ट के बारे में प्रश्नों के साथ संकेत दिया जाएगा। इसके साथ संकेत दिए जाने पर:
? आप एस्लिंट का उपयोग कैसे करना चाहेंगे?
इस विकल्प को चुनें:
> सिंटैक्स की जांच करने के लिए, समस्याएं ढूंढें और कोड शैली लागू करें
अपनी परियोजना के अनुसार अगले प्रश्नों के उत्तर तब तक दें जब तक कि आपको निम्नलिखित संकेत न मिलें।
? आप अपनी परियोजना के लिए शैली को कैसे परिभाषित करना चाहेंगे?
फिर इस प्रकार उत्तर दें।
> एक लोकप्रिय स्टाइल गाइड का प्रयोग करें
अगले संकेत के लिए Airbnb स्टाइल गाइड चुनें।
? आप किस स्टाइल गाइड का अनुसरण करना चाहते हैं?
> एयरबीएनबी:
अंत में, अगले संकेत में "हां" चुनकर आवश्यक निर्भरताओं को स्थापित करें।
एक बार स्थापना समाप्त हो जाने पर, आपके पास एक होना चाहिए .eslintsrc.json अपने फ़ोल्डर की जड़ में फ़ाइल करें।
Airbnb स्टाइल गाइड को कस्टमाइज़ करना
Airbnb स्टाइल गाइड अनुकूलन की अनुमति देता है। आप इसमें अतिरिक्त नियम जोड़ सकते हैं या मौजूदा नियमों को ओवरराइड कर सकते हैं .eslintsrc.json विन्यास फाइल।
उदाहरण के लिए, प्रति पंक्ति अधिकतम 80 वर्णों की अनुमति देने के लिए, आप इस नियम को नियम अनुभाग में जोड़ सकते हैं।
{
"विस्तार": [
"प्लगइन: प्रतिक्रिया/अनुशंसित",
"एयरबीएनबी"
],
"नियम": {
"मैक्स-लेन": ["गलती", { "कोड": 80 }]
}
}package.json में ESLint चला रहा है
में एक स्क्रिप्ट जोड़ें पैकेज.जेसन फ़ाइल ESLint चलाने के लिए।
"स्क्रिप्ट्स": {
"लिंट": "एस्लिंट"
}
इस आदेश को क्रियान्वित करके किसी भी लाइनिंग त्रुटि की जाँच करने के लिए लिंट स्क्रिप्ट चलाएँ।
एनपीएम रन लिंट
आप कोड का उपयोग करके समस्याओं को ठीक करने के लिए एक स्क्रिप्ट भी जोड़ सकते हैं --हल करना झंडा।
"स्क्रिप्ट्स": {
"लिंट": "एस्लिंट",
"लिंट: फिक्स": "एनपीएम रन लिंट -- फिक्स"
},
दौड़ना एनपीएम रन लिंट: फिक्स टर्मिनल पर स्वचालित रूप से कोई भी समस्या ठीक हो जाएगी जिसे लिंटर ठीक कर सकता है।
वीएस कोड में सेव करने पर लाइनिंग को सक्षम करें
हर बार जब आप अपने कोड को लिंट करना चाहते हैं तो एक स्क्रिप्ट चलाना कठिन हो सकता है। वीएस कोड में सेव करने पर लाइनिंग को सक्षम करने के लिए नीचे दिए गए चरणों का पालन करें।
- वीएस कोड विंडो के बाईं ओर "एक्सटेंशन" टैब पर जाएं।
- के लिए खोजें ईएसलिंट एक्सटेंशन और इसे स्थापित करें।
- एक बार एक्सटेंशन स्थापित हो जाने के बाद, वीएस कोड सेटिंग्स (फ़ाइल> वरीयताएँ> सेटिंग्स या Ctrl + दबाकर) खोलें।
- सेटिंग्स संपादक में, "सहेजने पर कोड क्रियाएं" खोजें।
- "सेटिंग्स.जेसन में संपादित करें" पर क्लिक करें और निम्नलिखित सेटिंग्स को इसमें जोड़ें सेटिंग्स.json फ़ाइल।
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": सत्य
},
"एसलिंट.वैलिडेट": ["जावास्क्रिप्ट"],
"एसलिंट. रन": "ऑनसेव",
}
जब आप सहेजते हैं तो यह ESLint एक्सटेंशन को आपके कोड को स्वचालित रूप से ठीक करने में सक्षम बनाता है।
स्टाइल गाइड का उपयोग करने के लाभ
Airbnb स्टाइल गाइड जैसी स्टाइल गाइड का उपयोग करने का मुख्य लाभ यह है कि यह आपको एक सुसंगत कोड आधार बनाए रखने में मदद करता है। यह एक टीम में उपयोगी है क्योंकि डेवलपर्स कोड बेस को आसानी से समझ और योगदान कर सकते हैं। यह आपको सर्वोत्तम प्रथाओं को लागू करने और सामान्य कोडिंग गलतियों से बचने में भी मदद करता है।
