Prettier के साथ अपना कोड साफ रखें

कोड स्वरूपण एक तुच्छ विषय की तरह लगता है, लेकिन यह कुछ ऐसा है जो आपके कोड की गुणवत्ता और शुद्धता को प्रभावित कर सकता है, यह कैसे संस्करण को नियंत्रित करता है, और आप दूसरों के साथ कैसे सहयोग करते हैं। यदि आप यह जानना नहीं चाहते हैं कि हर अंतिम ब्रेस कहाँ जाता है, तो इसके विवरण में, ओपन-सोर्स टूल, प्रीटीयर की समस्या को आउटसोर्स करने का प्रयास करें।

फ़ॉर्मेटिंग मैटर्स

सॉफ्टवेयर विकास टीमों ने इतिहास में अनगिनत घंटे बर्बाद किए हैं जो अधिकतम लाइन की लंबाई के बारे में बहस कर रहे हैं या किस लाइन पर एक ब्रेस को जाना चाहिए। जो भी व्यक्तिगत प्राथमिकता कहती है, ज्यादातर लोग कम से कम एक बात पर सहमत होते हैं: कोड स्वरूपण एक परियोजना के अनुरूप होना चाहिए।

प्रेटियर एक ऐसा उपकरण है जिसे इसे प्राप्त करने के लिए डिज़ाइन किया गया है। इसे कुछ कोड दें और यह एक ही कोड को, एक सुसंगत तरीके से स्वरूपित करेगा। प्रिटियर में टेक्स्ट एडिटर इंटीग्रेशन, एक कमांड-लाइन टूल और एक ऑनलाइन डेमो है।

सही भाषा बोलना

सबसे पहले, आप जानना चाहते हैं कि क्या Prettier भाषा, या भाषाओं के साथ संगत है, आप आमतौर पर साथ काम करते हैं। Prettier वर्तमान में मुख्य रूप से फ्रंट-एंड वेब विकास के लिए समर्पित भाषाओं के एक मुख्य समूह पर केंद्रित है, जिसमें शामिल हैं:

• जावास्क्रिप्ट
• एचटीएमएल
• सीएसएस
• सास
• markdown
• YAML

प्लगइन्स के माध्यम से अतिरिक्त भाषाओं के लिए ओपन एंडेड समर्थन भी है।

ऑनलाइन खेल के मैदान का उपयोग कर प्रिटियर की कोशिश करें

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

डिफ़ॉल्ट रूप से, खेल के मैदान को दो मूल पाठ संपादक पैनल की तरह दिखना चाहिए, एक आपके इनपुट के लिए बाईं ओर, एक दाईं ओर प्रेटियर के आउटपुट को दर्शाता है। आपको शुरू में कुछ नमूना कोड दिखाई देंगे, लेकिन आप बस इस सब को हटा सकते हैं और अपने आप में चिपका सकते हैं।

उदाहरण के लिए, निम्नलिखित जावास्क्रिप्ट दर्ज करने का प्रयास करें:

(समारोह ()
{
window.alert ('ठीक है')
}())

Prettier इसे में बदलना चाहिए:

(समारोह () {
window.alert ("ठीक है");
})();

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

• एकल-उद्धृत स्ट्रिंग्स को दोहरे-उद्धृत में परिवर्तित करना
• अर्ध-कॉलन जोड़ना
• संकेत दो स्थानों में परिवर्तित

नीचे बाईं ओर एक बटन है जिससे आप विकल्प देख सकते हैं। पिछले उदाहरण के साथ, टैब की चौड़ाई को समायोजित करने का प्रयास करें, टॉगल करें --एकल बोली के तहत झंडा सामान्य, या टॉगल करना - कोई अर्ध के तहत झंडा जावास्क्रिप्ट.

विन्यास के विकल्प

प्रीटीयर को "राय" के रूप में स्व-वर्णित किया गया है, एक जानबूझकर डिजाइन विकल्प जिसका अर्थ है कि विशिष्टताओं का नियंत्रण सरलता और स्थिरता के लिए बलिदान किया गया है। इसे आपके द्वारा सेट करने के लिए डिज़ाइन किया गया है, फिर अपने कोड के प्रत्येक अंतिम प्रारूपण विवरण के साथ पहले से मौजूद रहने के बजाय, इसके बारे में भूल जाएं। (हर अंतिम स्वरूपण विवरण पर बहुत महीन दाने वाले नियंत्रण के विकल्प के लिए, प्रयास करें बचना.)

हालांकि, लेखक यह भी मानते हैं कि कुछ निर्णय कार्यात्मक प्रभाव से परे हैं कि कोड कैसे दिखता है। कुछ विकल्प-जिनमें विरासत के कुछ उद्देश्य भी शामिल हैं- इसलिए, आपको कम से कम यह समझना चाहिए कि वे क्या करते हैं, भले ही आप प्रिटियर का उपयोग उसकी डिफ़ॉल्ट स्थिति में करें।

प्रबंधन का सबसे अच्छा तरीका है सुंदर विकल्प एक विन्यास फाइल में उन्हें बचाने के लिए है। इसे व्यवस्थित करने के कई तरीके हैं, लेकिन नाम से एक फ़ाइल बनाकर शुरू करें .prettierrc.json अपने स्थानीय परियोजना निर्देशिका में। इसमें मानक JSON ऑब्जेक्ट में समर्थित विकल्पों में से कोई भी हो सकता है, उदा।

{
"tabWidth": 8
}

वही कॉन्फ़िगरेशन फ़ाइल Prettier द्वारा पढ़ी जाएगी कि क्या आप इसे कमांड लाइन या समर्थित पाठ संपादक के माध्यम से चला रहे हैं।

यार्न या एनपीएम का उपयोग करते हुए, स्थापना सीधी होनी चाहिए। यार्न के लिए:

$ यार्न ग्लोबल ऐड प्रीटियर

और npm के लिए:

$ npm स्थापित --global prettier

एक बार जब आप विश्व स्तर पर प्रिटियर स्थापित कर लेते हैं, तो आपको टाइप करने में सक्षम होना चाहिए:

$ प्रिटियर

डिफ़ॉल्ट रूप से, आपको सहायता पाठ की एक स्क्रीन मिलेगी, जो इस बात की पुष्टि करेगी कि उपकरण सही ढंग से स्थापित और संचालित है।

एक फ़ाइल की सफाई

किसी फ़ाइल को पुन: स्वरूपित करने के लिए, समान कमांड का उपयोग करें:

$ प्रीटियर - रिटेन फाइलनाम.जेएस

यह मूल फ़ाइल को अधिलेखित कर देगा, जो अक्सर सबसे सुविधाजनक दृष्टिकोण है। वैकल्पिक रूप से, आप बस एक परियोजना में हर फ़ाइल पर कार्रवाई करने के लिए पहले से चाहते हो सकता है:

$ प्रीटियर - राइटिंग।

Prettier वर्तमान निर्देशिका के अंतर्गत सभी फ़ाइलों को चलाएगा, उन सभी को प्रारूपित करेगा जो इसे पहचानता है।

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

$ prettier test.js> test2.js

एक फ़ाइल की जाँच कर रहा है

वास्तव में किसी भी बदलाव के बिना अपने कोड की सफाई पर प्रीटीयर रिपोर्ट करने के लिए, का उपयोग करें --जाँच एक एकल फ़ाइल नाम या कई के साथ ध्वज:

$ प्रेटियर - चेक।

आपको प्रत्येक फ़ाइल के लिए आउटपुट की एक पंक्ति मिलेगी, जो प्रीटीयर के कॉन्फ़िगरेशन के अनुसार अपेक्षित प्रारूप से मेल नहीं खाती है:

स्वरूपण की जाँच की जा रही है ...
[चेतावनी] .prettierrc
[चेतावनी] .prettierrc.json
[चेतावनी] कोड शैली के मुद्दे उपरोक्त फ़ाइल में पाए गए। प्रिटियर चलाना भूल गए?

कमांड लाइन विकल्प

यदि आपको उनकी आवश्यकता है, तो Prettier के मानक विकल्प कमांड लाइन विकल्प के रूप में उपलब्ध हैं। यहाँ एक उदाहरण है कि कैसे --एकल बोली झंडा उत्पादन को प्रभावित करता है:

$ प्रीटीयर tmp.js
फ़ंक्शन उदाहरण () {
कंसोल.लॉग ("हैलो, दुनिया");
}
$ प्रेटीयर - सिंघल-उद्धरण tmp.js
फ़ंक्शन उदाहरण () {
कंसोल.लॉग ('हैलो, दुनिया');
}

मदद प्राप्त करें

कमांड लाइन उपकरण के माध्यम से किसी भी विकल्प पर सूचनात्मक सहायता प्रदान करता है --मदद झंडा:

$ प्रेटियर --help ट्रेलिंग-कॉमा
- अंतर-अल्पविराम 
मल्टी-लाइन होने पर जहां भी संभव हो प्रिंट ट्रेलिंग कॉमा।
मान्य विकल्प:
es5 ट्रेलिंग कॉमा
कोई नहीं अनुगामी अल्पविराम।
जहाँ भी संभव हो (सभी कार्य तर्कों सहित) सभी ट्रेलिंग कॉमा।
डिफ़ॉल्ट: es5

पाठ संपादक का उपयोग करना

एक बार जब आप Prettier स्थापित कर लेते हैं, तो आप पहले से उपयोग किए जा रहे टूलसेट के आधार पर, इसे विभिन्न परिदृश्यों में उपयोग कर सकते हैं। संभावना है, आप एक पाठ संपादक का उपयोग करते हैं। प्रिटियर के अधिकांश लोकप्रिय लोगों के लिए बाइंडिंग है, इसलिए यहां बताया गया है कि उनमें से तीन को कैसे स्थापित किया जाए:

उदात्त पाठ

JsPrettier एक उदात्त पाठ प्लगइन है जो संपादक में प्रीटियर उपलब्ध कराता है। हालांकि JsPrettier को स्थापित करने के कई अलग-अलग तरीके हैं, हम पैकेज नियंत्रण विधि का उपयोग करने की सलाह देते हैं। आपको पहले से ही Prettier स्थापित करना होगा, फिर Sublime Text का कमांड पैलेट खोलें और “Package Control: Install पैकेज” चुनें:

फिर "jsprettier" की खोज करें और इसे स्थापित करने के लिए क्लिक करें:

JsPrettier इंस्टॉल हो जाने के बाद, आप इसे प्रारूपित करने के लिए किसी भी खुली फ़ाइल में राइट-क्लिक कर सकते हैं। आप का मान भी सेट कर सकते हैं auto_format_on_save सेवा मेरे सच JsPrettier की सेटिंग में जो JsPrettier के परिणामस्वरूप होगा, जब आप उपशीर्ष पाठ में सहेजने पर किसी भी संगत फ़ाइलों को स्वचालित रूप से साफ़ कर देंगे।

परमाणु

एटम के लिए स्थापना उदात्त पाठ के समान है: बस स्थापित करने के लिए संपादक के अंतर्निहित पैकेज प्रबंधक का उपयोग करें प्रेटियर-परमाणु:

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

शक्ति

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

mkdir -p ~ / .vim / pack / plugins / start
गिट क्लोन https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

आवश्यक फ़ाइलों को डाउनलोड करने के लिए Git शायद सबसे आसान तरीका है, लेकिन उस आरंभ निर्देशिका में विम-प्रीटीयर पाने का कोई भी साधन काम करना चाहिए।

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

जिसके परिणामस्वरूप साफ की गई फ़ाइल होनी चाहिए:

अपनी परियोजना में एकीकृत Prettier

Prettier जैसे कोड फॉर्मेटर का उपयोग करना एक कोडबेस को बनाए रखने में मदद कर सकता है जो पढ़ने में आसान है। यह बहस को दबाने में भी मदद कर सकता है कि कोडिंग करते समय किस विशेष शैली का उपयोग करना है - बस उन निर्णयों को Prettier को आउटसोर्स करें!

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

नैनो बनाम विम: द बेस्ट टर्मिनल टेक्स्ट एडिटर्स, तुलनात्मक

लिनक्स के लिए एक टर्मिनल टेक्स्ट एडिटर की तलाश है? मुख्य पसंद विम और नैनो के बीच है! यहाँ है कि वे कैसे तुलना करते हैं।

लेखक के बारे में