विज़ुअल स्टूडियो कोड में प्रेटियर कैसे सेट करें

स्वच्छ और पठनीय कोड लिखना आवश्यक है, चाहे आप अकेले काम कर रहे हों या डेवलपर्स की टीम के साथ। जबकि कई कारक कोड पठनीयता में योगदान करते हैं, सबसे महत्वपूर्ण में से एक सुसंगत कोड स्वरूपण है।

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

प्रीटीयर स्थापित करना

आगे बढ़ने से पहले, सुनिश्चित करें कि आपके कंप्यूटर पर Node.js स्थापित है। आप से नवीनतम संस्करण स्थापित कर सकते हैं आधिकारिक Node.js डाउनलोड पृष्ठ. यह इसके साथ आता है नोड पैकेज मैनेजर (एनपीएम) बिल्ट-इन, जिसका उपयोग आप अपने Node.js पैकेज को प्रबंधित करने के लिए करेंगे।

यह पुष्टि करने के बाद कि Node.js स्थानीय रूप से स्थापित है, अपने प्रोजेक्ट के लिए एक खाली निर्देशिका बनाकर प्रारंभ करें। आप निर्देशिका का नाम दे सकते हैं

सुंदर-डेमो.

इसके बाद, कमांड लाइन का उपयोग करके उस डायरेक्टरी में cd करें, फिर Node.js प्रोजेक्ट को इनिशियलाइज़ करने के लिए निम्न कमांड चलाएँ:

एनपीएम init -y

यह आदेश डिफ़ॉल्ट सेटिंग्स वाली एक package.json फ़ाइल उत्पन्न करता है।

प्रीटीयर एक्सटेंशन को स्थापित करने के लिए, इस टर्मिनल कमांड को चलाएँ:

एनपीएम आई - सेव-देव सुंदर

--सेव-देव ध्वज देव निर्भरता के रूप में सुंदर स्थापित करता है, जिसका अर्थ है कि इसका उपयोग केवल विकास के दौरान किया जाता है।

अब जब आपने इसे स्थापित कर लिया है, तो आप कमांड लाइन पर इसका उपयोग करके यह पता लगाना शुरू कर सकते हैं कि प्रीटीयर कैसे काम करता है।

कमांड लाइन के माध्यम से प्रीटीयर का उपयोग करना

ए बनाकर शुरू करें स्क्रिप्ट.जेएस फ़ाइल और इसे निम्न कोड के साथ पॉप्युलेट करना:

समारोहजोड़(ए, बी) { वापस करना ए + बी}
कॉन्स्ट उपयोगकर्ता = { नाम: "काइल", आयु: 27,
 प्रोग्रामर है: सत्य,
 लॉन्गकी: "कीमत",
 अधिक डेटा: 3
}

कमांड लाइन के माध्यम से इस script.js फ़ाइल में कोड को फॉर्मेट करने के लिए, निम्नलिखित कमांड चलाएँ:

npx प्रीटीयर --script.js लिखें

कमांड स्क्रिप्ट.जेएस में जावास्क्रिप्ट कोड को प्रेटियर के डिफ़ॉल्ट मानक में सुधारता है। यह परिणाम होने वाला है:

समारोहजोड़(ए, बी) {
वापस करना ए + बी;
}
कॉन्स्ट उपयोगकर्ता = {
 नाम: "काइल",
 आयु: 27,
 प्रोग्रामर है: सत्य,
 लॉन्गकी: "कीमत",
 अधिक डेटा: 3,
};

आप कमांड लाइन से HTML मार्कअप को भी फॉर्मेट कर सकते हैं। एक बनाएं index.html फ़ाइल को उसी निर्देशिका में स्क्रिप्ट.जेएस. फिर निम्नलिखित खराब-स्वरूपित HTML को फ़ाइल में पेस्ट करें:

"" ऑल्ट =""कक्षा="मौसम-चिह्न बड़ा">

कक्षा="करंट हैडर टेम्प"><अवधि>21अवधि></div>
</div>
 </header>

HTML को फॉर्मेट करने के लिए, यह कमांड चलाएँ:

npx सुंदर --लिखें index.html

यह आदेश HTML को प्रीटीयर के डिफ़ॉल्ट मानक में सुधारता है, जिसके परिणामस्वरूप निम्न कोड होता है:

<हैडर>
<डिव>
<आईएमजीस्रोत=""alt=""कक्षा="मौसम-चिह्न बड़ा" />
<डिवकक्षा="करंट हैडर टेम्प"><अवधि>21अवधि>डिव>
डिव>
हैडर>

आप भी इस्तेमाल कर सकते हैं --जाँच करना यह जांचने के लिए फ़्लैग करें कि क्या कोड प्रीटीयर के मानकों के अनुरूप है। निम्न उदाहरण जाँच करता है स्क्रिप्ट.जेएस:

npx प्रीटीयर --check script.js

यह उपयोगी है यदि आप यह सुनिश्चित करने के लिए प्री-कमिट हुक चाहते हैं कि लोग प्रीटियर का उपयोग कर रहे हैं और फ़ाइलों को गिट में धकेलने से पहले स्वरूपित कर रहे हैं। यह अच्छा काम करता है जब ओपन सोर्स में योगदान.

विज़ुअल स्टूडियो कोड में प्रीटीयर को एकीकृत करना

कमांड लाइन के माध्यम से प्रीटीयर का उपयोग करना दर्द हो सकता है। हर बार जब आप कोड को फॉर्मेट करना चाहते हैं तो मैन्युअल रूप से एक कमांड चलाने के बजाय, जब आप फ़ाइल बदलते हैं तो आप इसे स्वचालित रूप से फॉर्मेट करने के लिए सेट कर सकते हैं। सौभाग्य से, विज़ुअल स्टूडियो कोड (वीएस कोड) में आपके लिए ऐसा करने का एक अंतर्निहित तरीका है।

पर जाएँ एक्सटेंशन वीएस कोड में टैब और खोजें खूबसूरत. पर क्लिक करें सुंदर - कोड फ़ॉर्मेटर, इसे इंस्टॉल करें, फिर इसे सक्षम करें।

नेविगेट करके अपने वीएस कोड सेटिंग्स में जाएं फ़ाइल> वरीयताएँ> सेटिंग्स. खोज बॉक्स में, खोजें खूबसूरत. आपको प्रीटीयर एक्सटेंशन को कॉन्फ़िगर करने में मदद करने के लिए ढेर सारे विकल्प मिलेंगे।

आमतौर पर, आप डिफ़ॉल्ट सेटिंग्स के साथ प्राप्त कर सकते हैं। केवल एक चीज जिसे आप बदलने पर विचार कर सकते हैं वह अर्धविराम है (यदि आप चाहें तो उन्हें हटा सकते हैं)। अन्यथा, सब कुछ डिफ़ॉल्ट पर सेट है, लेकिन आप इसे जैसे चाहें बदल सकते हैं।

सक्षम करना सुनिश्चित करें Format विकल्प ताकि जब आप उस फ़ाइल को सहेजते हैं तो प्रत्येक फ़ाइल में कोड स्वचालित रूप से स्वरूपित हो जाए। इसे सक्षम करने के लिए, बस खोजें Format और बॉक्स को टिक करें।

यदि आप VSCode का उपयोग नहीं कर रहे हैं या एक्सटेंशन किसी कारण से काम नहीं कर रहा है, तो आप कर सकते हैं ऑनचेंज लाइब्रेरी डाउनलोड करें. जब भी आप फ़ाइल बदलते हैं तो यह कोड को प्रारूपित करने के लिए आदेश चलाता है।

सुंदर के साथ फ़ॉर्मेट करते समय फ़ाइलों को कैसे अनदेखा करें I

यदि आप सुंदर चलाने के लिए थे --लिखना आपके संपूर्ण फ़ोल्डर पर आदेश, यह आपके प्रत्येक नोड मॉड्यूल के माध्यम से जाएगा। लेकिन आपको अन्य लोगों के कोड को स्वरूपित करने में समय बर्बाद नहीं करना चाहिए!

इस समस्या को हल करने के लिए, एक बनाएँ .prettierignore फ़ाइल और शब्द शामिल करें node_modules फ़ाइल में। अगर आपको चलाना था --लिखना संपूर्ण फ़ोल्डर पर आदेश, यह उन फ़ाइलों को छोड़कर सभी फ़ाइलों को पुन: स्वरूपित करेगा node_modules फ़ोल्डर।

आप विशिष्ट एक्सटेंशन वाली फ़ाइलों को भी अनदेखा कर सकते हैं। उदाहरण के लिए, यदि आप सभी HTML फ़ाइलों को अनदेखा करना चाहते हैं, तो बस जोड़ें *.एचटीएमएल को .prettierignore.

प्रीटीयर को कैसे कॉन्फ़िगर करें

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

{
 ...
"स्क्रिप्ट्स": {
"परीक्षा": "प्रतिध्वनि \"त्रुटि: कोई परीक्षण निर्दिष्ट नहीं\" && 1 से बाहर निकलें"
 },
 सुंदर: {
// विकल्प यहां जाएं
 }
}

दूसरा विकल्प (जिसकी हम अनुशंसा करते हैं) एक बनाना है .prettierrc फ़ाइल। यह फ़ाइल आपको सभी प्रकार के अनुकूलन करने की अनुमति देगी।

मान लें कि आपको अल्पविराम पसंद नहीं हैं। आप निम्न ऑब्जेक्ट को फ़ाइल में रखकर उन्हें हटा सकते हैं:

{
"अर्ध": सत्य,
"ओवरराइड्स": [
 {
"फ़ाइलें": ".टीएस",
"विकल्प": {
"अर्ध": असत्य
 }
 }
 ]
}

ओवरराइड संपत्ति आपको कुछ फ़ाइलों या फ़ाइल एक्सटेंशन के लिए कस्टम ओवरराइड परिभाषित करने की अनुमति देती है। इस मामले में, हम कहते हैं कि समाप्त होने वाली सभी फाइलें .ts (अर्थात, टाइपस्क्रिप्ट फ़ाइलें) में कोई अर्धविराम नहीं होना चाहिए।

ESLint के साथ प्रीटियर का उपयोग करना

ESLint जावास्क्रिप्ट कोड में त्रुटियों का पता लगाने के साथ-साथ इसे स्वरूपित करने के लिए एक लाइनिंग टूल है। यदि आप प्रीटीयर का उपयोग कर रहे हैं, तो आप शायद फ़ॉर्मेटिंग के लिए भी ESLint का उपयोग नहीं करना चाहेंगे। उन्हें एक साथ उपयोग करने के लिए, आपको इंस्टॉल और सेट अप करना होगा eslint-config-prettier. यह टूल उन सभी ESLint कॉन्फ़िगरेशन को बंद कर देता है जो प्रीटीयर पहले से ही संभालता है।

सबसे पहले, आपको इसे स्थापित करने की आवश्यकता है:

npm i --save-dev eslint-config-prettier

इसके बाद, इसे विस्तार सूची में जोड़ें .eslintrc फ़ाइल (सुनिश्चित करें कि यह सूची में अंतिम चीज़ है):

{
"विस्तार": [
"कुछ-अन्य-विन्यास-आप-उपयोग",
"सुंदर"
 ],
"नियम": {
"इंडेंट": "गलती"
 }
}

अब ESLint उन सभी नियमों को निष्क्रिय कर देगा जिनका प्रीटीयर पहले से ही विरोधों को रोकने के लिए ध्यान रख रहा है।

अपने कोडबेस को सुंदर और ESLint से साफ करें

प्रीटीयर आपके कोड को साफ करने और एक परियोजना के भीतर लगातार स्वरूपण लागू करने के लिए एक आदर्श उपकरण है। इसे वीएस कोड के साथ काम करने के लिए सेट करने का मतलब है कि यह हमेशा पहुंच के भीतर है।

ESLint एक अनिवार्य JavaScript उपकरण है जो Prettier के साथ-साथ चलता है। यह बहुत सी सुविधाएँ और अनुकूलन विकल्प प्रदान करता है जो बुनियादी स्वरूपण से परे हैं। यदि आप अधिक उत्पादक डेवलपर बनना चाहते हैं तो जावास्क्रिप्ट के साथ ESLint का उपयोग करना सीखें।