एडिटर सेटअप

आपका एडिटर

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

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 प्रीसेट में वे पहले से शामिल हैं।

फ़ॉर्मेटिंग

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

आप 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 का उपयोग करें।