JSX फॉर्मैटर

अपलोड

0 अक्षर

GeekFormat JSX फॉर्मेटर टूल, React JSX/TSX कंपोनेंट कोड की प्रोफेशनल सुंदरता के लिए Prettier v3 Standalone इंजन पर आधारित है। 12 फॉर्मेटिंग कॉन्फ़िगरेशन (इंडेंटेशन आकार, सेमीकॉलन, कोट शैली, ट्रेलिंग कॉमा, ब्रैकेट स्पेसिंग, एरो फंक्शन पैरेंथेसिस, प्रिंट चौड़ाई, JSX सिंगल कोट, JSX ब्रैकेट सेम लाइन, प्रॉपर्टी कोट स्ट्रैटेजी आदि) का समर्थन करता है। अंतर्निहित Terser मिनिफिकेशन इंजन, JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON सात भाषा स्विचिंग प्रदान करता है। CodeMirror 6 सिंटैक्स हाइलाइटिंग एडिटर, बाएं-दाएं स्प्लिट पैनल रियल-टाइम तुलना, फ़ाइल अपलोड/डाउनलोड, इतिहास रिकॉर्ड, URL शेयरिंग, एक क्लिक कॉपी का समर्थन करता है। शुद्ध ब्राउज़र-साइड प्रोसेसिंग, कोड सर्वर पर अपलोड नहीं होता।

JSX फॉर्मेटिंग के बारे में

JSX का मतलब JavaScript XML है, यह React फ्रेमवर्क द्वारा पेश किया गया एक JavaScript सिंटैक्स एक्सटेंशन है जो JavaScript कोड में सीधे HTML जैसी टैग संरचना लिखने की अनुमति देता है। JSX को कंपाइल समय पर Babel या TypeScript जैसे टूल्स द्वारा नियमित React.createElement() फंक्शन कॉल में परिवर्तित किया जाता है। JSX कंपोनेंट कोड की संरचना को अधिक सहज बनाता है, जिससे डेवलपर्स को JavaScript की पूरी अभिव्यक्ति शक्ति प्राप्त होती है साथ ही वे HTML लिखने की तरह UI संरचना का वर्णन कर सकते हैं। हालांकि, यदि JSX कोड में मानकीकृत फॉर्मेटिंग की कमी हो — टैग नेस्टिंग स्तर गड़बड़, एट्रिब्यूट व्यवस्था अव्यवस्थित, इंडेंटेशन असंगत — तो यह पठनीयता और रखरखाव दक्षता को गंभीर रूप से प्रभावित करेगा, यही JSX फॉर्मेटिंग टूल्स का मूल्य भी है।

Prettier वर्तमान में JavaScript/JSX इकोसिस्टम में सबसे मुख्यधारा का कोड फॉर्मेटिंग टूल है, जिसे James Long ने 2017 में बनाया था, और अब यह वास्तविक मानक बन गया है। Prettier का मुख्य विचार "opinionated formatter" है — यह केवल कुछ ही कॉन्फ़िगर करने योग्य आइटम प्रदान करता है, बाकी नियम अंतर्निहित हैं और अपरिवर्तनीय हैं। ऐसा करने का लाभ टीमों के बीच कोड शैली के बारे में अंतहीन बहस को खत्म करना है। Prettier JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown जैसी कई भाषाओं और प्रारूपों का समर्थन करता है, और React, Vue, Angular जैसे मुख्यधारा के फ्रेमवर्क समुदायों द्वारा व्यापक रूप से अपनाया जाता है। अधिकांश आधुनिक फ्रंटएंड प्रोजेक्ट्स कोड शैली की एकरूपता सुनिश्चित करने के लिए CI/CD पाइपलाइनों में Prettier को एकीकृत करते हैं।

JSX फॉर्मेटिंग के मुख्य नियमों में शामिल हैं: पहला, इंडेंटेशन स्तर — प्रत्येक नेस्टेड JSX टैग और एक्सप्रेशन इंडेंटेशन का एक स्तर बढ़ाता है, जो DOM ट्री संरचना को दर्शाता है; दूसरा, एट्रिब्यूट व्यवस्था — जब किसी टैग में कई एट्रिब्यूट हों और लाइन चौड़ाई से अधिक हों, तो प्रत्येक एट्रिब्यूट अपनी पंक्ति पर होता है और संरेखित होता है; तीसरा, ब्रैकेट हैंडलिंग — मल्टी-लाइन JSX एक्सप्रेशन आमतौर पर पैरेंथेसिस में लिपटे होते हैं ताकि ऑटोमैटिक सेमीकॉलन इंसर्शन (ASI) की समस्याओं से बचा जा सके; चौथा, सेल्फ-क्लोज़िंग टैग — बिना चाइल्ड एलिमेंट वाले कंपोनेंट्स <Component /> फॉर्म का उपयोग करते हैं; पांचवां, स्ट्रिंग कोट्स — JSX एट्रिब्यूट डिफ़ॉल्ट रूप से डबल कोट (HTML के अनुरूप) का उपयोग करते हैं, JavaScript स्ट्रिंग डिफ़ॉल्ट रूप से सिंगल कोट का उपयोग करती है; छठा, whitespace हैंडलिंग — टैग के अंदर कर्ली ब्रेसिज़ {} के दोनों ओर स्पेस जोड़ना है या नहीं, यह कॉन्फ़िगर करने योग्य है।

JSX मिनिफिकेशन फॉर्मेटिंग का उल्टा ऑपरेशन है, जिसका उद्देश्य JSX को सबसे छोटे निष्पादन योग्य कोड में परिवर्तित करना है, जिसका उपयोग प्रोडक्शन डिप्लॉयमेंट के लिए नेटवर्क ट्रांसमिशन मात्रा को कम करने और लोडिंग गति को तेज़ करने के लिए किया जाता है। JSX मिनिफिकेशन में आमतौर पर निम्नलिखित चरण शामिल होते हैं: पहले Babel का उपयोग करके JSX को React.createElement कॉल (यानी सामान्य JavaScript) में कंपाइल करें, फिर मिनिफायर (जैसे Terser, UglifyJS) का उपयोग करें: टिप्पणियों और whitespace वर्णों को हटाना, वेरिएबल नाम और फंक्शन नाम को छोटा करना (mangling), डेड कोड को खत्म करना (dead code elimination), एक्सप्रेशन और कंडीशनल स्टेटमेंट को सरल बनाना, घोषणाओं को मर्ज करना, इनलाइन फंक्शन आदि। आधुनिक बिल्ड टूल्स (Webpack, Vite, Rollup) प्रोडक्शन मोड में स्वचालित रूप से कोड मिनिफिकेशन करते हैं।

कोड फॉर्मेटिंग क्यों महत्वपूर्ण है? टीम सहयोग में, एकीकृत कोड शैली पठनीयता और समीक्षा दक्षता में काफी सुधार कर सकती है। यदि हर डेवलपर अपनी पसंद के अनुसार कोड फॉर्मेट करता है, तो Git diff में बड़ी संख्या में अर्थहीन फॉर्मेट बदलाव भर जाएंगे, जिससे समीक्षकों को वास्तविक तार्किक बदलाव खोजना मुश्किल हो जाएगा। शोध से पता चलता है कि डेवलपर्स कोड पढ़ने में कोड लिखने की तुलना में कहीं अधिक समय खर्च करते हैं, और एकरूप फॉर्मेटिंग शैली पढ़ने के संज्ञानात्मक बोझ को काफी कम कर सकती है। Google, Meta, Airbnb जैसी बड़ी कंपनियों के पास सख्त कोड शैली मानक और स्वचालित फॉर्मेटिंग टूलचेन हैं, यह भी सॉफ्टवेयर इंजीनियरिंग परिपक्वता का प्रतिबिंब है।

Prettier और लिंटर्स (जैसे ESLint, TSLint) के बीच कार्य विभाजन आधुनिक फ्रंटएंड इंजीनियरिंग का सर्वोत्तम अभ्यास है: Prettier फॉर्मेटिंग में विशेषज्ञ है — लाइन ब्रेक, इंडेंटेशन, स्पेस, सेमीकॉलन, कोट्स, कॉमा और अन्य शुद्ध शैली के मुद्दे; ESLint कोड गुणवत्ता में विशेषज्ञ है — अप्रयुक्त वेरिएबल, संभावित बग, सुरक्षा मुद्दे, सर्वोत्तम प्रथाएँ और अन्य तार्किक मुद्दे। दोनों का संयुक्त उपयोग करते समय, आपको ESLint में ओवरलैपिंग फॉर्मेट नियमों को eslint-config-prettier के माध्यम से बंद करने की आवश्यकता है ताकि टकराव से बचा जा सके। कई टीमें pre-commit हुक्स (husky + lint-staged के माध्यम से) भी कॉन्फ़िगर करती हैं ताकि कोड सबमिशन से पहले स्वचालित रूप से Prettier और ESLint चलाएं, यह सुनिश्चित करते हुए कि सबमिट किया गया कोड विनिर्देशों का पालन करता है।

JSX फॉर्मेटिंग टूल चुनते समय कई कारकों पर विचार करने की आवश्यकता है: पहला, इंजन चयन — प्राथमिकता से Prettier को इंजन के रूप में चुनें, क्योंकि यह समुदाय का मानक है, परिणाम पूर्वानुमान योग्य हैं और IDE एक्सटेंशन के अनुरूप हैं; दूसरा, कॉन्फ़िगरेबिलिटी — टीम की आवश्यकताओं के अनुसार समायोज्य पैरामीटरों की संख्या चुनें, बहुत सारे विकल्प बल्कि निर्णय लागत बढ़ाते हैं; तीसरा, सुरक्षा — सुनिश्चित करें कि टूल कोड को स्थानीय रूप से प्रोसेस करता है, सर्वर पर अपलोड नहीं करता है, स्रोत कोड लीक के जोखिम से बचता है; चौथा, अतिरिक्त फीचर्स — मिनिफिकेशन, सिंटैक्स हाइलाइटिंग, इतिहास रिकॉर्ड, शेयरिंग और अन्य फीचर्स उपयोग दक्षता में सुधार कर सकते हैं; पांचवां, बहुभाषी समर्थन — एक टूल जो JS/TS/JSX/TSX/CSS/HTML/JSON जैसी कई भाषाओं को कवर करता है, टूल स्विचिंग लागत को कम कर सकता है।

ऑनलाइन कोड फॉर्मेटिंग टूल का उपयोग करते समय सुरक्षा सावधानियां: पहला, प्राथमिकता से शुद्ध ब्राउज़र-साइड प्रोसेसिंग वाले टूल चुनें — ऐसे टूल को सर्वर की आवश्यकता नहीं होती है, कोड केवल स्थानीय रूप से चलता है, सबसे अधिक सुरक्षा होती है; दूसरा, संवेदनशील जानकारी वाला कोड पेस्ट न करें — जैसे डेटाबेस पासवर्ड, API कुंजियां, आंतरिक व्यावसायिक तर्क, मालिकाना एल्गोरिदम आदि, भले ही टूल अपलोड न करने का दावा करता हो, सुरक्षा जागरूकता बनाए रखें; तीसरा, जाँचें कि टूल HTTPS का उपयोग करता है या नहीं — ट्रांसमिशन के दौरान छिपकर सुनने से बचें (हालांकि स्थानीय रूप से प्रोसेस करने वाले टूल को ट्रांसमिशन की आवश्यकता नहीं होती है, पेज स्वयं को भी सुरक्षित रूप से लोड करने की आवश्यकता होती है); चौथा, महत्वपूर्ण कोड के लिए स्थानीय टूल का उपयोग करें — मुख्य व्यवसाय कोड के लिए, स्थानीय रूप से इंस्टॉल किए गए Prettier CLI या IDE एक्सटेंशन का उपयोग करने की अनुशंसा की जाती है, ऑनलाइन सेवाओं पर निर्भर न रहें; पांचवां, नियमित रूप से टूल की विश्वसनीयता की समीक्षा करें — जाँचें कि यह ओपन सोर्स है या नहीं, समुदाय की समीक्षाएं कैसी हैं, गोपनीयता नीति है या नहीं, आदि।

उपयोग के मामले

इंटरनेट से कॉपी किया गया React कंपोनेंट कोड जिसका फॉर्मेट गड़बड़ हो, पढ़ने और सीखने में आसानी के लिए जल्दी से फॉर्मेट करें
पुराने प्रोजेक्ट्स को संभालते समय JSX कंपोनेंट फ़ाइलें व्यवस्थित करें, द्वितीयक विकास से पहले कोड शैली को एक करें
कोड रिव्यू से पहले फॉर्मेट करें, फॉर्मेट अंतरों के कारण होने वाले अर्थहीन diff को खत्म करें, तार्किक रिव्यू पर ध्यान केंद्रित करें
मिनिफाइड JSX प्रोडक्शन कोड को डी-फॉर्मेट करें, प्रोडक्शन समस्याओं के समाधान के दौरान अस्पष्ट कोड पढ़ें
तकनीकी ब्लॉग या दस्तावेज़ लिखने से पहले JSX उदाहरण कोड को सुंदर बनाएं, सामग्री की व्यावसायिकता में सुधार करें
विभिन्न फॉर्मेटिंग कॉन्फ़िगरेशन के प्रभावों की तुलना करें, टीम Prettier कॉन्फ़िगरेशन चयन के लिए संदर्भ
शिक्षण प्रस्तुतियों में JSX कोड की गड़बड़ से मानकीकृत फॉर्मेटिंग प्रक्रिया प्रदर्शित करें
React कोड स्निपेट्स को ऑनलाइन डीबग करते समय, पहले फॉर्मेट करें फिर संरचना का विश्लेषण करें और बगों का पता लगाएं
JSX कोड उत्पन्न करने वाले कंपोनेंट लाइब्रेरी दस्तावेज़ों में, सुनिश्चित करें कि उदाहरण कोड शैली एकीकृत और सुंदर हो
इंटरव्यू से पहले अपने React प्रोजेक्ट कोड को व्यवस्थित करें, सुनिश्चित करें कि सबमिट किए गए कोड नमूने शैली मानकों का पालन करते हैं
AI द्वारा उत्पन्न JSX कोड को प्रोजेक्ट में डालने से पहले फॉर्मेट करें, AI आउटपुट की असंगत फॉर्मेटिंग को समाप्त करें
React Native या Next.js प्रोजेक्ट्स विकसित करते समय, ऑनलाइन जल्दी से कंपोनेंट कोड स्निपेट्स फॉर्मेट करें

उपयोग कैसे करें

बाएं एडिटर में JSX/TSX कोड पेस्ट करें, या अपलोड बटन पर क्लिक करके .jsx/.tsx फ़ाइलें इम्पोर्ट करें, या सीधे उदाहरणों से लोड करें
फॉर्मेटिंग पैरामीटर समायोजित करने के लिए सेटिंग्स बटन पर क्लिक करें: इंडेंटेशन आकार, सेमीकॉलन, कोट्स, ट्रेलिंग कॉमा, प्रिंट चौड़ाई, JSX विकल्प आदि, या डिफ़ॉल्ट कॉन्फ़िगरेशन बनाए रखें
फॉर्मेटिंग निष्पादित करने के लिए ब्यूटीफाई बटन पर क्लिक करें (या शॉर्टकट दबाएं), दायां पैनल तुरंत फॉर्मेटिंग परिणाम दिखाता है, आप पैनल चौड़ाई समायोजित करने के लिए बाएं और दाएं खींच सकते हैं
यदि मिनिफिकेशन की आवश्यकता हो, तो मिनिफाई बटन पर क्लिक करके मिनिफिकेशन मोड में स्विच करें, Terser इंजन मिनिमाइज्ड JSX कोड आउटपुट करेगा
परिणामों को क्लिपबोर्ड पर कॉपी करने के लिए कॉपी बटन पर क्लिक करें, या फ़ाइल के रूप में सहेजने के लिए डाउनलोड पर क्लिक करें, या शेयर लिंक के माध्यम से दूसरों को भेजें

विशेषताएं

Prettier v3 इंजन: उद्योग के सबसे लोकप्रिय Prettier v3 Standalone को फॉर्मेटिंग इंजन के रूप में उपयोग करता है, Babel पार्सर के साथ जोड़कर, VS Code में Prettier एक्सटेंशन के फॉर्मेटिंग परिणामों के अनुरूप, टीम कोड शैली की एकरूपता सुनिश्चित करता है
12 फॉर्मेटिंग कॉन्फ़िगरेशन: एडजस्ट करने योग्य इंडेंटेशन आकार (2/4/8 स्पेस या Tab), सेमीकॉलन, सिंगल/डबल कोट, ट्रेलिंग कॉमा (none/es5/all), ब्रैकेट स्पेसिंग, एरो फंक्शन पैरेंथेसिस, प्रिंट चौड़ाई, JSX सिंगल कोट, JSX ब्रैकेट सेम लाइन, प्रॉपर्टी कोट स्ट्रैटेजी, और 12 अन्य पैरामीटर
JSX सिंटैक्स हाइलाइटिंग एडिटर: CodeMirror 6 पर आधारित प्रोफेशनल कोड एडिटर, JSX/TSX सिंटैक्स हाइलाइटिंग, लाइन नंबर, ब्रैकेट मैचिंग का समर्थन करता है, बाएं इनपुट और दाएं परिणाम के बीच रियल-टाइम तुलना
JSX मिनिफिकेशन फीचर: अंतर्निहित Terser मिनिफिकेशन इंजन, एक क्लिक में JSX कंपोनेंट कोड को न्यूनतम आकार में मिनिफाई करता है, उन्नत मिनिफिकेशन विकल्पों जैसे वेरिएबल नेम मैंगल, डेड कोड एलिमिनेशन, console/debugger क्लीनअप आदि का समर्थन करता है
7 भाषाएँ आसानी से स्विच करने योग्य: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — सात आमतौर पर उपयोग की जाने वाली फ्रंटएंड भाषाओं का समर्थन करता है, एक टूल फुल-स्टैक फॉर्मेटिंग आवश्यकताओं को कवर करता है
फ़ाइल अपलोड और डाउनलोड: .jsx/.tsx/.js/.ts/.css/.html/.json फ़ाइलों के सीधे अपलोड और फॉर्मेटिंग का समर्थन करता है, प्रोसेसिंग के बाद डाउनलोड और स्थानीय रूप से सहेजा जा सकता है
इतिहास रिकॉर्ड पैनल: हाल के फॉर्मेटिंग रिकॉर्ड स्वचालित रूप से सहेजता है, ऐतिहासिक संस्करणों पर वापस जाने का समर्थन करता है, और विभिन्न कॉन्फ़िगरेशन के तहत फॉर्मेटिंग प्रभावों की तुलना करता है
एक क्लिक में परिणाम कॉपी करें: फॉर्मेट किया गया या मिनिफाइड कोड एक क्लिक में क्लिपबोर्ड पर कॉपी किया जा सकता है, सीधे IDE या प्रोजेक्ट्स में उपयोग के लिए पेस्ट करें
URL शेयरिंग फीचर: LZ-String कम्प्रेशन के माध्यम से कोड और कॉन्फ़िगरेशन को URL hash में एन्कोड करता है, पूर्ण कोड और फॉर्मेटिंग पैरामीटर साझा करने के लिए लिंक कॉपी करें
फ्रेंडली सिंटैक्स एरर संकेत: फॉर्मेटिंग विफल होने पर सिंटैक्स एरर को अन्य एरर से अलग करता है, कोड समस्याओं को जल्दी ठीक करने में मदद के लिए लोकलाइज़्ड संकेत प्रदान करता है
ड्रैग करने योग्य स्प्लिट पैनल: बाएं और दाएं पैनल की चौड़ाई खींचकर लचीले ढंग से समायोजित की जा सकती है, विभिन्न स्क्रीन आकारों और पढ़ने की आदतों के अनुकूल
ब्राउज़र-लोकल प्रोसेसिंग: सभी फॉर्मेटिंग, मिनिफिकेशन और विश्लेषण ब्राउज़र JavaScript में किए जाते हैं, कोड सामग्री किसी भी सर्वर पर अपलोड नहीं की जाती है, स्रोत कोड की सुरक्षा सुनिश्चित होती है

सामान्य प्रश्न

JSX फॉर्मेटिंग का सिद्धांत क्या है? Prettier के साथ इसका क्या संबंध है?

यह टूल अंतर्निहित फॉर्मेटिंग इंजन के रूप में Prettier v3 Standalone संस्करण का उपयोग करता है, Babel पार्सर के माध्यम से JSX सिंटैक्स को पार्स करता है, फिर कॉन्फ़िगर किए गए नियमों के अनुसार सुव्यवस्थित फॉर्मेट वाला कोड पुनः आउटपुट करता है। Prettier वर्तमान में फ्रंटएंड इकोसिस्टम में सबसे लोकप्रिय कोड फॉर्मेटिंग टूल है, जिसका व्यापक रूप से React/Vue/Angular और अन्य प्रोजेक्ट्स में उपयोग किया जाता है। इस टूल का फॉर्मेटिंग परिणाम मूल रूप से VS Code में Prettier एक्सटेंशन के साथ JSX फ़ाइलों को फॉर्मेट करने के परिणाम के अनुरूप है, जो स्थानीय IDE खोले बिना त्वरित ऑनलाइन फॉर्मेटिंग के लिए उपयुक्त है।

कौन से फॉर्मेटिंग विकल्प समर्थित हैं? क्या मैं इंडेंटेशन और कोट शैली को कस्टमाइज़ कर सकता हूँ?

12 फॉर्मेटिंग कॉन्फ़िगरेशन का समर्थन करता है: 1) इंडेंटेशन आकार: 2 स्पेस/4 स्पेस/8 स्पेस या Tab का उपयोग करें; 2) सेमीकॉलन का उपयोग करें या नहीं; 3) सिंगल कोट या डबल कोट; 4) ट्रेलिंग कॉमा स्ट्रैटेजी: none (नहीं)/es5 (ऑब्जेक्ट और एरे)/all (फंक्शन पैरामीटर भी शामिल); 5) ऑब्जेक्ट ब्रेसिज़ के अंदर स्पेस हैं या नहीं; 6) सिंगल-पैरामीटर एरो फंक्शन के लिए पैरेंथेसिस जोड़ें या नहीं; 7) प्रिंट चौड़ाई (प्रति लाइन अधिकतम वर्ण); 8) JSX एट्रिब्यूट सिंगल या डबल कोट का उपयोग करते हैं; 9) मल्टी-लाइन JSX का क्लोज़िंग ब्रैकेट सामग्री के साथ एक ही लाइन में है या नहीं; 10) ऑब्जेक्ट प्रॉपर्टी कोट स्ट्रैटेजी: as-needed/preserve/consistent; 11) HTML whitespace संवेदनशीलता; 12) Tab इंडेंटेशन का उपयोग करें। सेटिंग्स पैनल में आसानी से समायोजित किया जा सकता है।

क्या फॉर्मेटिंग JSX कोड के लॉजिक को बदलती है? क्या यह सुरक्षित है?

फॉर्मेटिंग केवल whitespace वर्णों (लाइन ब्रेक, इंडेंटेशन, स्पेस) और कोट्स, सेमीकॉलन जैसे सिंटैक्टिक शुगर फॉर्म को समायोजित करती है, यह किसी भी कोड लॉजिक को नहीं बदलती है। Prettier दुनिया भर के लाखों डेवलपर्स द्वारा सत्यापित एक परिपक्व टूल है, और फॉर्मेट किया गया कोड अर्थिक रूप से मूल कोड के पूरी तरह समतुल्य है। हालांकि, ध्यान दें: यदि मूल कोड में स्वयं सिंटैक्स एरर हैं (जैसे बेमेल ब्रैकेट, बिना बंद किए गए टैग), तो फॉर्मेटिंग विफल हो जाएगी और सिंटैक्स एरर का संकेत देगी, ऐसी स्थिति में आपको पहले कोड समस्या को ठीक करने की आवश्यकता है फिर फॉर्मेट करें।

JSX मिनिफिकेशन फीचर कैसे लागू किया गया है? कौन से मिनिफिकेशन विकल्प समर्थित हैं?

JSX मिनिफिकेशन Terser इंजन (उद्योग के सबसे लोकप्रिय JavaScript मिनिफायर में से एक) का उपयोग करता है जो ब्राउज़र में स्थानीय रूप से निष्पादित होता है। मिनिफिकेशन में शामिल हैं: टिप्पणियों और अतिरिक्त whitespace को हटाना, वेरिएबल नेम शॉर्टनिंग और मैंगलिंग, डेड कोड एलिमिनेशन (dead_code), अप्रयुक्त वेरिएबल हटाना (unused), फंक्शन/वेरिएबल होइस्टिंग ऑप्टिमाइज़ेशन, कंडीशनल एक्सप्रेशन सरलीकरण, लूप ऑप्टिमाइज़ेशन आदि। मिनिफिकेशन पहले Babel के माध्यम से JSX को सामान्य JavaScript में कंपाइल करती है, फिर मिनिफिकेशन ऑप्टिमाइज़ेशन करती है। नोट: मिनिफाइड कोड की पठनीयता महत्वपूर्ण रूप से कम हो जाती है, यह प्रोडक्शन डिप्लॉयमेंट के लिए उपयुक्त है, विकास और डीबगिंग के लिए नहीं।

क्या TypeScript (TSX) समर्थित है? JSX से क्या अंतर है?

समर्थित है। टूल डिफ़ॉल्ट रूप से JSX भाषा पर है, आप ऊपरी बाएं कोने में भाषा स्विच मेनू के माध्यम से TSX मोड में स्विच कर सकते हैं। TSX मोड TypeScript पार्सर का उपयोग करता है, जो TypeScript टाइप एनोटेशन (interface, type, generics, टाइप असर्शन आदि) को सही ढंग से पहचान सकता है, और टाइप सिंटैक्स के कारण एरर नहीं देगा। JSX मोड Babel पार्सर का उपयोग करता है, जो शुद्ध JavaScript React कंपोनेंट्स के लिए उपयुक्त है। TSX मिनिफिकेशन Terser मिनिफिकेशन करने से पहले स्वचालित रूप से टाइप एनोटेशन हटा देगा।

क्या इनपुट किए गए JSX कोड को सर्वर पर अपलोड किया जाएगा? गोपनीयता और सुरक्षा सुनिश्चित है?

पूरी तरह से सुरक्षित। इस टूल के सभी फीचर्स (फॉर्मेटिंग, मिनिफिकेशन, सिंटैक्स डिटेक्शन, इतिहास रिकॉर्ड) आपके ब्राउज़र में JavaScript के माध्यम से स्थानीय रूप से पूरे होते हैं, कोड सामग्री नेटवर्क के माध्यम से किसी भी बाहरी सर्वर पर नहीं भेजी जाती है। Prettier और Terser दोनों शुद्ध JavaScript कार्यान्वयन वाली लाइब्रेरी हैं जो सीधे ब्राउज़र साइड पर चल सकती हैं। आप इस टूल का उपयोग ऑफ़लाइन अवस्था में कर सकते हैं, सभी फीचर्स सामान्य रूप से काम करते हैं। इतिहास रिकॉर्ड ब्राउज़र के localStorage में सहेजे जाते हैं, केवल आपके वर्तमान डिवाइस पर दिखाई देते हैं।

इतिहास रिकॉर्ड कहाँ सहेजे जाते हैं? क्या वे खो जाएंगे?

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

क्या URL शेयरिंग फीचर कोड को सर्वर पर अपलोड करती है?

नहीं। URL शेयरिंग फीचर कोड और कॉन्फ़िगरेशन को LZ-String के साथ कंप्रेस करती है और फिर URL के hash हिस्से (# चिन्ह के बाद की सामग्री) में एन्कोड करती है। URL hash का एक महत्वपूर्ण गुण है: यह HTTP अनुरोधों के साथ सर्वर पर नहीं भेजा जाता है, और केवल ब्राउज़र में स्थानीय रूप से JavaScript द्वारा पढ़ा और पार्स किया जाता है। जब प्राप्तकर्ता शेयर लिंक खोलता है, तो ब्राउज़र सीधे hash को पार्स करता है और कोड प्रदर्शित करने के लिए डीकंप्रेस करता है, पूरी प्रक्रिया में सर्वर की भागीदारी की आवश्यकता नहीं होती है। लेकिन कृपया ध्यान दें: शेयर लिंक में पूर्ण कोड सामग्री होती है, यदि कोड संवेदनशील है, तो इसे सार्वजनिक चैनलों के माध्यम से साझा न करें।

यदि फॉर्मेटिंग सिंटैक्स एरर संकेत के साथ विफल हो जाए तो क्या करें?

फॉर्मेटिंग विफलता का सबसे आम कारण कोड में स्वयं सिंटैक्स एरर होता है: 1) JSX टैग बंद नहीं हुए — जाँचें कि सभी टैग युग्मित हैं, सेल्फ-क्लोज़िंग टैग सही हैं (<img /> न कि <img>); 2) बेमेल ब्रैकेट — जाँचें कि कर्ली ब्रेसिज़ {}, पैरेंथेसिस (), स्क्वायर ब्रैकेट [] युग्मित हैं या नहीं; 3) बंद नहीं किए गए कोट — स्ट्रिंग कोट्स पूर्ण हैं या नहीं; 4) गलत सिंटैक्स — उदाहरण के लिए, JSX में अनुमत नहीं है वाला सिंटैक्स का उपयोग करना। आप समस्या का पता लगाने के लिए पहले एरर संकेत में लाइन नंबर और एरर संदेश की जाँच कर सकते हैं, या कोड को सरल बनाकर चरण दर चरण समस्या निवारण कर सकते हैं।

प्रिंट चौड़ाई (printWidth) का क्या मतलब है? मुझे क्या मान सेट करना चाहिए?

प्रिंट चौड़ाई (printWidth) Prettier के मुख्य पैरामीटर में से एक है, जो प्रति लाइन कोड के अधिकतम वर्णों की संख्या का प्रतिनिधित्व करती है। जब कोड की एक पंक्ति इस चौड़ाई से अधिक हो जाती है, तो Prettier स्वचालित रूप से उसे लपेट देता है। डिफ़ॉल्ट मान 80 वर्ण है, जो एक लंबे समय से चली आ रही प्रोग्रामिंग परंपरा है (पंच कार्ड और टर्मिनल चौड़ाई से उत्पन्न)। सामान्य सेटिंग मान: 80 (क्लासिक कंजर्वेटिव), 100 (अधिक आम), 120 (वाइडस्क्रीन फ्रेंडली)। इसे बहुत छोटा सेट करने से कोड बार-बार लपेटेगा जिससे पढ़ना मुश्किल हो जाएगा, इसे बहुत बड़ा सेट करने से एक पंक्ति बहुत लंबी हो जाएगी जिससे संकरी स्क्रीन पर पढ़ना मुश्किल होगा। टीम के विनिर्देशों और मॉनिटर चौड़ाई के अनुसार 80-120 के बीच का मान चुनने की अनुशंसा की जाती है।

ट्रेलिंग कॉमा (trailing comma) का क्या उपयोग है? मुझे कौन सा मोड चुनना चाहिए?

ट्रेलिंग कॉमा का मतलब है कि एरे, ऑब्जेक्ट, फंक्शन पैरामीटर जैसी मल्टी-लाइन संरचनाओं के अंतिम आइटम के बाद भी एक कॉमा जोड़ें। लाभों में शामिल हैं: 1) आइटम जोड़ने/हटाने में केवल एक लाइन बदलती है, Git diff साफ़ रहता है; 2) कॉमा भूलने से होने वाले सिंटैक्स एरर से बचें; 3) कुछ मामलों में पार्सिंग अधिक स्थिर रहती है। Prettier तीन मोड प्रदान करता है: none (कोई ट्रेलिंग कॉमा नहीं, सबसे संक्षिप्त), es5 (केवल वहीं जोड़ें जहाँ ES5 समर्थन देता है, यानी एरे और ऑब्जेक्ट, सबसे अधिक संगत), all (हर संभव जगह जोड़ें, फंक्शन पैरामीटर सहित, ES2017+ या Babel/TS समर्थन की आवश्यकता है)। आधुनिक प्रोजेक्ट्स के लिए 'all' मोड का उपयोग करने की अनुशंसा की जाती है, जो Babel या TypeScript कंपाइलेशन के साथ पूरी तरह से ठीक है।

JSX सिंगल कोट और JSX ब्रैकेट सेम लाइन के प्रभाव क्रमशः क्या हैं?

JSX सिंगल कोट (jsxSingleQuote): नियंत्रित करता है कि JSX एट्रिब्यूट वैल्यू सिंगल कोट या डबल कोट का उपयोग करते हैं। डिफ़ॉल्ट रूप से बंद रहता है (डबल कोट), जो HTML एट्रिब्यूट परंपराओं के अनुरूप है। सक्षम होने पर JSX में एट्रिब्यूट स्ट्रिंग्स सिंगल कोट का उपयोग करेंगी। JSX ब्रैकेट सेम लाइन (jsxBracketSameLine): नियंत्रित करता है कि मल्टी-लाइन JSX एलिमेंट्स का क्लोज़िंग राइट एंगल ब्रैकेट (/> या >) अंतिम पंक्ति के अंत में रखा जाए (सेम लाइन), या नई पंक्ति पर (अलग लाइन)। डिफ़ॉल्ट रूप से बंद रहता है (नई पंक्ति पर), सक्षम होने पर राइट ब्रैकेट अंतिम एट्रिब्यूट के साथ एक ही पंक्ति में होगा। विभिन्न टीमों की विभिन्न पसंद होती है, बस प्रोजेक्ट के अनुरूप शैली चुनें।

क्या एकाधिक फ़ाइलों की बैच फॉर्मेटिंग समर्थित है?

वर्तमान में वेब संस्करण टूल मुख्य रूप से सिंगल-फ़ाइल त्वरित फॉर्मेटिंग परिदृश्यों के लिए डिज़ाइन किया गया है, सिंगल फ़ाइल अपलोड प्रोसेसिंग का समर्थन करता है। यदि आपके पास बड़ी संख्या में JSX/TSX फ़ाइलें हैं जिन्हें बैच फॉर्मेट करने की आवश्यकता है, तो अनुशंसा की जाती है कि आप अपने प्रोजेक्ट में Prettier CLI टूल इंस्टॉल करें और कमांड लाइन के माध्यम से बैच प्रोसेस करें (जैसे npx prettier --write "src/**/*.jsx")। इस टूल का अंतर्निहित इंजन Prettier के पूरी तरह से अनुरूप है, फॉर्मेटिंग परिणाम समान हैं। भविष्य के संस्करणों में बैच प्रोसेसिंग फीचर जोड़ने पर विचार किया जा सकता है।

क्या इसका उपयोग ESLint के साथ किया जा सकता है?

हाँ। वास्तविक प्रोजेक्ट्स में, अनुशंसा की जाती है कि Prettier का उपयोग कोड फॉर्मेट (लाइन ब्रेक, इंडेंटेशन, स्पेस, कोट्स आदि) के लिए करें, और ESLint का उपयोग कोड गुणवत्ता (अप्रयुक्त वेरिएबल, संभावित बग, सर्वोत्तम प्रथाएँ आदि) के लिए करें। दोनों का संयुक्त रूप से उपयोग करने का सबसे अच्छा अभ्यास है: 1) ESLint में Prettier के साथ टकराने वाले फॉर्मेट नियमों को बंद करने के लिए eslint-config-prettier इंस्टॉल करें; 2) पहले Prettier फॉर्मेटिंग चलाएं, फिर ESLint जाँच चलाएं। यह टूल फॉर्मेटिंग (जिसमें Prettier अच्छा है) पर केंद्रित है, इसमें ESLint की कोड जाँच कार्यक्षमता शामिल नहीं है।

क्या यह मोबाइल फोन पर इस्तेमाल किया जा सकता है? मोबाइल अनुभव कैसा है?

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

समस्या निवारण

यदि फॉर्मेटिंग सिंटैक्स एरर संकेत के साथ विफल हो जाए तो क्या करें?

सबसे पहले पुष्टि करें कि कोड पूर्ण है या नहीं: JSX कंपोनेंट्स को आमतौर पर export की आवश्यकता होती है या कम से कम JSX लौटाने वाला फंक्शन शामिल होना चाहिए। सामान्य सिंटैक्स एरर में शामिल हैं: 1) JSX टैग बंद नहीं हुए — जाँचें कि प्रत्येक ओपनिंग टैग का संबंधित क्लोज़िंग टैग या सेल्फ-क्लोज़िंग मार्कर है; 2) बेमेल कर्ली ब्रेसिज़ — JSX में {} एक्सप्रेशन के ब्रैकेट युग्मित हैं या नहीं; 3) बंद नहीं किए गए स्ट्रिंग कोट — सभी सिंगल कोट/डबल कोट/बैकटिक की जाँच करें; 4) JSX में आरक्षित शब्दों का उपयोग करना — उदाहरण के लिए, class को className के रूप में लिखा जाना चाहिए, for को htmlFor के रूप में लिखा जाना चाहिए; 5) एकाधिक रूट एलिमेंट्स — JSX केवल एक रूट एलिमेंट की अनुमति देता है, एकाधिक एलिमेंट्स को <>...</> या <div> से लपेटने की आवश्यकता है। एरर संदेश आमतौर पर लाइन नंबर और कारण इंगित करते हैं, आप तदनुसार पता लगा सकते हैं।

फ़ाइल अपलोड करने के बाद कोई प्रतिक्रिया नहीं या फॉर्मेट गलत है?

सबसे पहले पुष्टि करें कि फ़ाइल एक्सटेंशन सही है या नहीं — .jsx/.tsx/.js/.ts/.css/.html/.json फ़ाइलें सभी अपलोड की जा सकती हैं। यदि फ़ाइल एक्सटेंशन मानक नहीं है, तो टूल भाषा प्रारूप को सही ढंग से नहीं पहचान पाएगा, जिससे फॉर्मेटिंग परिणाम अपेक्षित नहीं होंगे। समाधान: 1) सुनिश्चित करें कि फ़ाइल एक्सटेंशन मानक प्रारूप में है; 2) अपलोड करने के बाद, ऊपरी बाएं कोने में भाषा चयन सही है या नहीं, जाँचें, यदि नहीं तो मैन्युअल रूप से स्विच कर सकते हैं; 3) पुष्टि करें कि फ़ाइल सामग्री सादा पाठ है बाइनरी नहीं; 4) बहुत बड़ी फ़ाइलें (1MB से अधिक) ब्राउज़र में देरी का कारण बन सकती हैं, डेस्कटॉप टूल्स का उपयोग प्रोसेसिंग के लिए करने की अनुशंसा की जाती है।

फॉर्मेट किया गया कोड मेरे स्थानीय Prettier परिणामों से अलग है?

संभावित कारण: 1) संस्करण अंतर — यह टूल Prettier v3 का उपयोग करता है, यदि आपके प्रोजेक्ट में v2 संस्करण का उपयोग किया जाता है, तो कुछ विवरण भिन्न हो सकते हैं (जैसे ट्रेलिंग कॉमा डिफ़ॉल्ट मानों में बदलाव); 2) अलग-अलग कॉन्फ़िगरेशन — जाँचें कि प्रिंट चौड़ा, इंडेंटेशन, कोट्स, ट्रेलिंग कॉमा जैसे पैरामीटर प्रोजेक्ट कॉन्फ़िगरेशन के अनुरूप हैं या नहीं; 3) अलग पार्सर — JSX Babel पार्सर का उपयोग करता है, TSX TypeScript पार्सर का उपयोग करता है, सही चयन की पुष्टि करें; 4) प्लगइन अंतर — यदि स्थानीय Prettier में अतिरिक्त प्लगइन्स इंस्टॉल हैं (जैसे prettier-plugin-tailwindcss), तो इस टूल में ये प्लगइन्स शामिल नहीं हैं। इस टूल के कॉन्फ़िगरेशन को प्रोजेक्ट के .prettierrc के अनुरूप समायोजित करने की अनुशंसा की जाती है।

JSX मिनिफिकेशन के बाद कोड ठीक से नहीं चलता?

JSX मिनिफिकेशन Terser इंजन का उपयोग करता है, जो मिनिफिकेशन से पहले JSX को सामान्य JavaScript में कंपाइल करता है। यदि मिनिफिकेशन के बाद कोड नहीं चलता है, तो जाँचें: 1) क्या मिनिफिकेशन कॉन्फ़िगरेशन बहुत आक्रामक है — उदाहरण के लिए, toplevel सक्षम करने से मॉड्यूल व्यवहार बदल सकता है; 2) कोड में eval या डायनेमिक प्रॉपर्टी एक्सेस का उपयोग किया गया है या नहीं — वेरिएबल मैंगलिंग नाम बेमेल का कारण बन सकता है; 3) विशिष्ट फ़ंक्शन नामों या क्लास नामों पर निर्भरता है या नहीं — यदि हां, तो keep_fnames या keep_classnames विकल्प सक्षम करने की आवश्यकता है। प्रोडक्शन पर्यावरण मिनिफिकेशन को प्रोजेक्ट बिल्ड टूल्स (Vite/Webpack) का उपयोग करके करने की अनुशंसा की जाती है, जिनके पास अधिक पूर्ण कॉन्फ़िगरेशन और प्लगइन इकोसिस्टम है।

शब्दकोश

JSX: JavaScript XML का संक्षिप्त रूप, React द्वारा पेश किया गया JavaScript सिंटैक्स एक्सटेंशन, JS में HTML जैसी टैग संरचना लिखने की अनुमति देता है, कंपाइल के बाद React.createElement() कॉल में परिवर्तित हो जाता है।
Prettier: वर्तमान में सबसे लोकप्रिय opinionated कोड फॉर्मेटिंग टूल, JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown आदि का समर्थन करता है, फ्रंटएंड कोड फॉर्मेटिंग का वास्तविक मानक बन गया है।
Babel: JavaScript कंपाइलर जो ES6+/JSX/TS जैसे नए सिंटैक्स को पुराने ब्राउज़रों के साथ संगत ES5 कोड में परिवर्तित कर सकता है, Prettier के लिए JSX पार्स करने का अंतर्निहित इंजन भी है।
Terser: उद्योग का सबसे लोकप्रिय JavaScript/JSX मिनिफायर, वेरिएबल मैंगल, डेड कोड एलिमिनेशन, कोड कम्प्रेशन आदि का समर्थन करता है, Webpack/Vite जैसे बिल्ड टूल्स का डिफ़ॉल्ट मिनिफायर है।
Print Width: Prettier के मुख्य पैरामीटर में से एक, प्रति लाइन कोड के अधिकतम वर्णों की संख्या का प्रतिनिधित्व करता है, इस चौड़ाई से अधिक होने पर स्वचालित लाइन ब्रेक होता है। डिफ़ॉल्ट 80 वर्ण, सामान्य सेटिंग 80/100/120 है।
Trailing Comma: एरे, ऑब्जेक्ट, फंक्शन पैरामीटर जैसी मल्टी-लाइन संरचनाओं में अंतिम आइटम के बाद भी एक कॉमा जोड़ना। Git diff को साफ़ रख सकता है और सिंटैक्स एरर से बचा सकता है। Prettier none/es5/all तीन मोड का समर्थन करता है।
Mangle: कोड मिनिफिकेशन में वेरिएबल नाम/फंक्शन नाम शॉर्टनिंग तकनीक, अर्थपूर्ण लंबे वेरिएबल नामों को a/b/c जैसे छोटे नामों से बदलती है, कोड की मात्रा कम करती है, पढ़ने में कठिनाई भी बढ़ाती है।
Dead Code Elimination: मिनिफायर ऑप्टिमाइज़ेशन तकनीक जो कभी न चलने वाले कोड (जैसे गलत शर्तों के नीचे का कोड, अप्रयुक्त वेरिएबल और फंक्शन) को हटाती है, प्रोडक्शन बिल्ड का आकार कम करती है।
CodeMirror: इस टूल द्वारा उपयोग किया जाने वाला ब्राउज़र-साइड कोड एडिटर कंपोनेंट (संस्करण 6), सिंटैक्स हाइलाइटिंग, लाइन नंबर, ब्रैकेट मैचिंग जैसी प्रोफेशनल एडिटिंग सुविधाएं प्रदान करता है, विभिन्न ऑनलाइन IDEs में व्यापक रूप से उपयोग किया जाता है।
LZ-String: JavaScript में लागू LZ कम्प्रेशन एल्गोरिदम, URL hash में कोड सामग्री को कुशलतापूर्वक कंप्रेस और स्टोर करने के लिए उपयोग किया जाता है। उच्च कम्प्रेशन अनुपात और तेज़ डिकोडिंग गति, शेयर लिंक परिदृश्यों के लिए उपयुक्त।
localStorage: ब्राउज़रों द्वारा प्रदान किया गया स्थानीय की-वैल्यू स्टोरेज API, क्षमता लगभग 5-10MB, डेटा स्थायी रहता है (जब तक सक्रिय रूप से साफ़ न किया जाए)। इस टूल का उपयोग फॉर्मेटिंग इतिहास रिकॉर्ड स्टोर करने के लिए करता है।
ESLint: JavaScript/TypeScript स्टेटिक कोड चेकिंग टूल (लिंटर), मुख्य रूप से कोड गुणवत्ता और सर्वोत्तम प्रथाओं के लिए जिम्मेदार, आमतौर पर Prettier के साथ उपयोग किया जाता है (Prettier फॉर्मेट प्रबंधित करता है, ESLint गुणवत्ता प्रबंधित करता है)।

समर्थित भाषाएँ और फ़ाइल प्रारूप

टूल 7 आमतौर पर उपयोग की जाने वाली फ्रंटएंड भाषाओं का समर्थन करता है, ऊपरी बाएं मेनू के माध्यम से आसानी से स्विच करने योग्य:

भाषा	फ़ाइल एक्सटेंशन	फॉर्मेटिंग इंजन	मिनिफिकेशन इंजन
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (पहले टाइप हटा दिए जाते हैं)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (पहले टाइप हटा दिए जाते हैं)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	कस्टम कार्यान्वयन
JSON	`.json`	Prettier (JSON)	JSON.stringify

फॉर्मेटिंग कॉन्फ़िगरेशन आइटम अवलोकन

12 कॉन्फ़िगर करने योग्य फॉर्मेटिंग पैरामीटर और उनके प्रभाव:

कॉन्फ़िगरेशन आइटम	संभावित मान	डिफ़ॉल्ट मान	विवरण
tabWidth इंडेंटेशन आकार	`2 / 4 / 8 / Tab`	`2 spaces`	प्रति इंडेंटेशन स्तर स्पेस की संख्या, या Tab वर्ण का उपयोग करें
semi सेमीकॉलन	`true / false`	`true`	स्टेटमेंट के अंत में सेमीकॉलन जोड़ें या नहीं
singleQuote सिंगल कोट	`true / false`	`false (double quotes)`	JS स्ट्रिंग्स सिंगल या डबल कोट का उपयोग करती हैं
trailingComma ट्रेलिंग कॉमा	`none / es5 / all`	`es5`	मल्टी-लाइन संरचनाओं में अंतिम आइटम के बाद ट्रेलिंग कॉमा जोड़ें या नहीं
bracketSpacing ब्रैकेट स्पेसिंग	`true / false`	`true`	ऑब्जेक्ट ब्रेसिज़ के अंदर स्पेस जोड़ें या नहीं
arrowParens एरो पैरेंथेसिस	`always / avoid`	`always`	सिंगल-पैरामीटर एरो फंक्शन के लिए पैरेंथेसिस जोड़ें या नहीं
printWidth प्रिंट चौड़ाई	`number (अनुशंसित 80-120)`	`80`	प्रति लाइन अधिकतम वर्ण, से अधिक होने पर ऑटो-रैप
jsxSingleQuote JSX सिंगल कोट	`true / false`	`false`	JSX एट्रिब्यूट वैल्यू सिंगल कोट का उपयोग करता है (डिफ़ॉल्ट डबल कोट)
jsxBracketSameLine JSX ब्रैकेट सेम लाइन	`true / false`	`false`	मल्टी-लाइन JSX का राइट ब्रैकेट आखिरी एट्रिब्यूट के साथ एक ही लाइन पर है या नहीं
quoteProps प्रॉपर्टी कोट	`as-needed / preserve / consistent`	`as-needed`	ऑब्जेक्ट प्रॉपर्टी नामों में कोट्स कब जोड़ें

JSX मिनिफिकेशन पहले और बाद की तुलना

एक विशिष्ट React कंपोनेंट को उदाहरण के रूप में लेते हुए, मिनिफिकेशन से पहले और बाद की मात्रा में बदलाव दिखाते हुए:

तुलना आइटम	फॉर्मेट किया हुआ (विकास)	मिनिफाइड (प्रोडक्शन)	कम्प्रेशन अनुपात
कोड आकार	~ 2.5 KB	~ 0.8 KB	`~68%`
लाइन संख्या	~ 80 lines	1 line	`~99%`
वेरिएबल नाम	अर्थपूर्ण नाम	a/b/c/d एकल अक्षर	`—`
टिप्पणियां	सभी टिप्पणियां संरक्षित	सभी हटा दी गईं	`—`
पठनीयता	उच्च (डीबग करने योग्य और पठनीय)	बहुत कम (केवल मशीन-पठनीय)	`—`
उपयोग के मामले	विकास, डीबगिंग, समीक्षा	प्रोडक्शन डिप्लॉयमेंट, CDN वितरण	`—`

Privacy & Security

इस JSX फॉर्मेटर टूल के सभी ऑपरेशन पूरी तरह से ब्राउज़र में स्थानीय रूप से किए जाते हैं: आपके द्वारा इनपुट या अपलोड किया गया कोड केवल ब्राउज़र JavaScript में फॉर्मेट और मिनिफाइ किया जाता है, और नेटवर्क के माध्यम से किसी भी बाहरी सर्वर पर नहीं भेजा जाएगा। Prettier और Terser दोनों शुद्ध JavaScript लाइब्रेरी हैं जो सीधे ब्राउज़र साइड पर चल सकती हैं। इतिहास रिकॉर्ड ब्राउज़र localStorage (स्थानीय स्टोरेज) में सहेजे जाते हैं, केवल वर्तमान डिवाइस और ब्राउज़र पर दिखाई देते हैं। URL शेयरिंग फीचर LZ-String के माध्यम से कोड को कंप्रेस करता है और इसे URL hash हिस्से में एन्कोड करता है (# के बाद की सामग्री सर्वर पर नहीं भेजी जाती है)। पेज Cookie ट्रैकिंग का उपयोग नहीं करता है, और उपयोगकर्ताओं द्वारा इनपुट की गई कोड सामग्री एकत्र नहीं करता है। आप इस टूल का उपयोग ऑफ़लाइन अवस्था में भी कर सकते हैं, मुख्य फीचर्स सामान्य रूप से उपलब्ध हैं।

JSX फॉर्मैटर

संबंधित सुझाव

JSX कम्प्रेसर

TSX फॉर्मेटर

JavaScript फॉर्मेटर

CSS फॉर्मेटर

JSON फ़ॉर्मेटर

JSX फॉर्मेटिंग के बारे में

उपयोग के मामले

उपयोग कैसे करें

विशेषताएं

सामान्य प्रश्न

JSX फॉर्मेटिंग का सिद्धांत क्या है? Prettier के साथ इसका क्या संबंध है?

कौन से फॉर्मेटिंग विकल्प समर्थित हैं? क्या मैं इंडेंटेशन और कोट शैली को कस्टमाइज़ कर सकता हूँ?

क्या फॉर्मेटिंग JSX कोड के लॉजिक को बदलती है? क्या यह सुरक्षित है?

JSX मिनिफिकेशन फीचर कैसे लागू किया गया है? कौन से मिनिफिकेशन विकल्प समर्थित हैं?

क्या TypeScript (TSX) समर्थित है? JSX से क्या अंतर है?

क्या इनपुट किए गए JSX कोड को सर्वर पर अपलोड किया जाएगा? गोपनीयता और सुरक्षा सुनिश्चित है?

इतिहास रिकॉर्ड कहाँ सहेजे जाते हैं? क्या वे खो जाएंगे?

क्या URL शेयरिंग फीचर कोड को सर्वर पर अपलोड करती है?

यदि फॉर्मेटिंग सिंटैक्स एरर संकेत के साथ विफल हो जाए तो क्या करें?

प्रिंट चौड़ाई (printWidth) का क्या मतलब है? मुझे क्या मान सेट करना चाहिए?

ट्रेलिंग कॉमा (trailing comma) का क्या उपयोग है? मुझे कौन सा मोड चुनना चाहिए?

JSX सिंगल कोट और JSX ब्रैकेट सेम लाइन के प्रभाव क्रमशः क्या हैं?

क्या एकाधिक फ़ाइलों की बैच फॉर्मेटिंग समर्थित है?

क्या इसका उपयोग ESLint के साथ किया जा सकता है?

क्या यह मोबाइल फोन पर इस्तेमाल किया जा सकता है? मोबाइल अनुभव कैसा है?

समस्या निवारण

यदि फॉर्मेटिंग सिंटैक्स एरर संकेत के साथ विफल हो जाए तो क्या करें?

फ़ाइल अपलोड करने के बाद कोई प्रतिक्रिया नहीं या फॉर्मेट गलत है?

फॉर्मेट किया गया कोड मेरे स्थानीय Prettier परिणामों से अलग है?

JSX मिनिफिकेशन के बाद कोड ठीक से नहीं चलता?

शब्दकोश

समर्थित भाषाएँ और फ़ाइल प्रारूप

फॉर्मेटिंग कॉन्फ़िगरेशन आइटम अवलोकन

JSX मिनिफिकेशन पहले और बाद की तुलना

Privacy & Security

Authoritative References