एडिटर सेटअप

आपका एडिटर

VS Code आज उपयोग में आने वाले सबसे लोकप्रिय एडिटरों में से एक है। इसके पास एक्सटेंशन का एक बड़ा बाज़ार है और यह GitHub जैसी लोकप्रिय सेवाओं के साथ अच्छी तरह से एकीकृत है। निचे दी गयी ज़्यादातर सुविधाओं को VS Code में एक्सटेंशन के रूप में भी ऐड किया जा सकता है, जिससे यह काफी कॉन्फ़िगराबले हो जाता है!

React कम्यूनिटी में उपयोग होने वाले अन्य लोकप्रिय टेक्स्ट एडिटरों में शामिल हैं:

• WebStorm एक इंटीग्रेटेड डेवलपमेंट एनवायरनमेंट है जो विशेष रूप से Javascript के लिए डिज़ाइन किया गया है।
• Sublime Text में JSX और TypeScript का सपोर्ट है, सिंटेक्स हाइलाइटिंग और ऑटोकम्प्लीट पहले से मौजूद हैं।
• Vim एक काफी कॉन्फ़िगराबले टेक्स्ट एडिटर है जो किसी भी प्रकार के टेक्स्ट को बहुत कुशल बनाने और बदलने के लिए बनाया गया है। इसे अधिकांश UNIX सिस्टम और Apple OS X के साथ “vi” के रूप में शामिल किया गया है।

रिकमंडेड टेक्स्ट एडिटर की विशेषताएं

कुछ एडिटर इन सुविधाओं के साथ आते हैं, लेकिन अन्य को एक्सटेंशन ऐड करने की आवश्यकता हो सकती है। यह सुनिश्चित करने के लिए जांचें कि आपकी पसंद का एडिटर क्या सहायता प्रदान करता है!

लिंटिंग

जैसे ही आप लिखते हैं कोड लिंटर आपके कोड में समस्याएं ढूंढते हैं, जिससे आपको उन्हें जल्दी ठीक करने में मदद मिलती है। ESlint Javascript के लिए एक लोकप्रिय, ओपन सोर्स लिंटर है।

• React के लिए रिकमंडेड कॉन्फ़िगरेशन के साथ ESLint इंस्टॉल करें (सुनिश्चित करें कि आपके पास Node इंस्टॉल है!)
• ऑफिसियल एक्सटेंशन के साथ VSCode में ESLint को इंटीग्रेट करें

सुनिश्चित करें कि आपने अपने प्रोजेक्ट के लिए सभी eslint-plugin-react-hooks नियमों को इनेबल कर दिया है। वे महत्वपूर्ण होते हैं और सबसे गंभीर बग्स को जल्दी पकड़ते हैं। रिकमंडेड eslint-config-react-app प्रीसेट में वे पहले से शामिल हैं।

फ़ॉर्मेटिंग

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

आप VSCode में Prettier एक्सटेंशन इंस्टॉल कर सकते हैं इन स्टेप का पालन करके:

1. VS Code लॉन्च करें
2. क्विक ओपन का उपयोग करें (Ctrl/Cmd+P दबाएं)
3. ext install esbenp.prettier-vscode पेस्ट करें
4. Enter दबाएं

सेव पर फ़ॉर्मेटिंग करना

आदर्श रूप से, आपको प्रत्येक सेव पर अपना कोड फ़ॉर्मेट करना चाहिए। वीएस कोड में इसके लिए सेटिंग्स हैं!

1. VS Code में, CTRL/CMD + SHIFT + P दबाएं।
2. “settings” टाइप करें
3. Enter दबाएं
4. सर्च बार में, “format on save” टाइप करें
5. सुनिश्चित हो जाएं कि “format on save” ऑप्शन टिक किया हुआ है!

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