JavaScript फॉर्मेटर

अपलोड

0 अक्षर

ब्राउज़र-साइड JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON कोड फॉर्मेटिंग टूल, Prettier-शैली फाइन कॉन्फ़िगरेशन, Terser कंप्रेशन-ऑब्फस्केशन का समर्थन, बिल्ट-इन CodeMirror एडिटर, रीयल-टाइम पूर्वावलोकन, शॉर्टकट ऑपरेशन, फ़ाइल अपलोड/डाउनलोड।

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

फ्रंटएंड डेवलपमेंट के दौरान कंप्रेस किए गए तृतीय-पक्ष JS कोड पेस्ट करें, पढ़ने और डीबग करने के लिए त्वरित ब्यूटीफिकेशन
टीम कोड समीक्षा से पहले JavaScript/TypeScript कोड एकीकृत फॉर्मेट करें, इंडेंट, कोट, सेमीकॉलन आदि शैली अंतर समाप्त करें, लॉजिक समीक्षा पर ध्यान केंद्रित करें
लेगसी प्रोजेक्ट संभालते समय, अव्यवस्थित पुराने JS कोड को एक-क्लिक फॉर्मेट करें, कोड संरचना और लॉजिक स्तर को त्वरित समझें
प्रोडक्शन डिप्लॉयमेंट से पहले, Terser का उपयोग करके JavaScript कोड कंप्रेस और ऑब्फस्केट करें, फ़ाइल आकार कम करें और पेज लोडिंग गति बढ़ाएं
ऑनलाइन JS/JSX demo लिखते समय, रीयल-टाइम फॉर्मेटिंग से कोड साफ रखें, सहकर्मियों या समुदाय के साथ साझा करने में आसान
Prettier के विभिन्न कॉन्फ़िगरेशन आइटम के प्रभाव सीखते समय, विकल्प समायोजित करके फॉर्मेटिंग परिणाम तुरंत पूर्वावलोकन करें, tabWidth, trailingComma आदि पैरामीटर के कार्य समझें
Stack Overflow, GitHub आदि प्लेटफॉर्म से कॉपी किए गए कोड स्निपेट प्रोसेस करते समय, इंडेंट और लाइन ब्रेक समस्याएं स्वचालित रूप से ठीक करें
JSON कॉन्फ़िगरेशन फ़ाइल लिखते समय, इंडेंट और लाइन ब्रेक स्वचालित रूप से फॉर्मेट करें, कॉमा, कोष्ठक त्रुटि के कारण पार्सिंग विफलता से बचें
CSS/HTML पेज डेवलपमेंट के दौरान, एक ही प्रोजेक्ट में JS+CSS+HTML कोड वन-स्टॉप फॉर्मेट करें, शैली एकीकृत रखें
इंटरव्यू/लिखित परीक्षा से पहले एल्गोरिदम प्रश्नों के JS कोड त्वरित व्यवस्थित करें, मानक फॉर्मेटिंग से कोड की दृश्य गुणवत्ता बढ़ाएं

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

JavaScript फॉर्मेटर टूल पेज खोलें, सीधे बाईं एडिटर क्षेत्र में कोड पेस्ट कर सकते हैं, या अपलोड बटन पर क्लिक करके स्थानीय फ़ाइल चुनें (.js/.ts/.jsx/.tsx/.css/.html/.json फॉर्मेट समर्थित)
संगत भाषा प्रकार चुनें: टूल आमतौर पर स्वचालित रूप से पहचानता है, यदि पहचान सटीक नहीं है तो भाषा ड्रॉपडाउन में मैन्युअल रूप से JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON चुन सकते हैं
फॉर्मेटिंग विकल्प कॉन्फ़िगर करें: प्रीसेट क्विक शैली (default/modern/classic) चुन सकते हैं, या Prettier विकल्प मैन्युअल रूप से समायोजित करें (इंडेंट चौड़ाई, Tab/स्पेस, लाइन चौड़ाई, सेमीकॉलन, कोट, ट्रेलिंग कॉमा, एरो कोष्ठक)
यदि कोड कंप्रेस करना है, तो कंप्रेस मोड पर स्विच करें, Terser कंप्रेशन विकल्प कॉन्फ़िगर करें (compress सक्षम करें या नहीं, mangle वेरिएबल नाम करें या नहीं, टॉप-लेवल वेरिएबल कंप्रेस करें या नहीं), CSS ऑप्टिमाइज़ेशन स्तर, HTML कंप्रेशन विकल्प
टूल रीयल-टाइम कोड प्रोसेस करता है, दाईं एडिटर क्षेत्र तुरंत फॉर्मेट या कंप्रेस किए गए परिणाम दिखाता है, नीचे स्टेटस बार रीयल-टाइम कैरेक्टर संख्या, बाइट संख्या, कंप्रेशन अनुपात सांख्यिकी दिखाता है
कीबोर्ड शॉर्टकट का उपयोग करके दक्षता बढ़ाएं: Ctrl+Shift+B फॉर्मेट ट्रिगर, Ctrl+Shift+M कंप्रेस मोड स्विच, Ctrl+Shift+O फ़ाइल खोलें, Ctrl+Shift+D परिणाम डाउनलोड, Ctrl+Shift+K एडिटर खाली करें
संतुष्ट होने के बाद कॉपी बटन पर क्लिक करके परिणाम क्लिपबोर्ड पर कॉपी करें, या डाउनलोड बटन पर क्लिक करके स्थानीय फ़ाइल के रूप में सेव करें; शेयर बटन पर क्लिक करके कोड और कॉन्फ़िगरेशन युक्त URL लिंक बनाकर दूसरों के साथ साझा भी कर सकते हैं

विशेषताएं

बहु-भाषा समर्थन: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON सहित 7 सामान्य फ्रंटएंड भाषाओं का फॉर्मेटिंग, वन-स्टॉप फ्रंटएंड कोड प्रोसेसिंग
Prettier-शैली फाइन कॉन्फ़िगरेशन: tabWidth इंडेंट चौड़ाई (2/4/8 स्पेस), useTabs Tab बनाम स्पेस, printWidth लाइन चौड़ाई, semi सेमीकॉलन, singleQuote सिंगल/डबल कोट, trailingComma ट्रेलिंग कॉमा, arrowParens एरो फ़ंक्शन कोष्ठक जैसे पूर्ण विकल्प
कोड कंप्रेशन: Terser कंप्रेशन इंजन एकीकृत, compress कोड कंप्रेशन, mangle वेरिएबल नाम ऑब्फस्केशन, toplevel टॉप-लेवल वेरिएबल कंप्रेशन आदि प्रोडक्शन-ग्रेड कंप्रेशन विकल्पों का समर्थन
CSS विशेष ऑप्टिमाइज़ेशन: CSS ऑप्टिमाइज़ेशन स्तर कॉन्फ़िगरेशन प्रदान करता है, CSS कंप्रेशन, कमेंट हटाना, स्पेस हटाना आदि विशेष प्रोसेसिंग का समर्थन
HTML कंप्रेशन विकल्प: HTML minify कॉन्फ़िगरेशन का समर्थन करता है, व्हाइटस्पेस संकुचित करना, कमेंट हटाना, एट्रिब्यूट कोट हटाना आदि कर सकता है
रीयल-टाइम प्रोसेसिंग: कोड इनपुट करने के बाद रीयल-टाइम फॉर्मेटिंग पूर्वावलोकन, बटन क्लिक किए बिना फॉर्मेटिंग परिणाम देखें
CodeMirror एडिटर: प्रोफेशनल CodeMirror एडिटर बिल्ट-इन, सिंटैक्स हाइलाइटिंग, लाइन नंबर प्रदर्शन, ब्रैकेट मैचिंग, कोड फोल्डिंग जैसे प्रोफेशनल संपादन अनुभव प्रदान करता है
फ़ाइल अपलोड/डाउनलोड: सीधे स्थानीय .js/.ts/.jsx/.tsx/.css/.html/.json फ़ाइलें अपलोड करने का समर्थन, फॉर्मेटिंग के बाद प्रोसेस की गई फ़ाइल एक-क्लिक डाउनलोड
शेयर लिंक: URL hash के माध्यम से कोड और कॉन्फ़िगरेशन सेव करें, शेयर लिंक बनाकर सहकर्मियों को भेजें, वर्तमान फॉर्मेटिंग सीन को रीप्रोड्यूस कर सकते हैं
इतिहास रिकॉर्ड: फॉर्मेटिंग इतिहास स्वचालित रूप से localStorage में सेव करें, किसी भी समय पिछले कोड संस्करण और कॉन्फ़िगरेशन पर वापस जाएं
कीबोर्ड शॉर्टकट: Ctrl+Shift+B फॉर्मेट, Ctrl+Shift+M कंप्रेस, Ctrl+Shift+O फ़ाइल खोलें, Ctrl+Shift+D डाउनलोड, Ctrl+Shift+K क्लियर आदि शॉर्टकट ऑपरेशन का समर्थन
क्विक प्रीसेट: default, modern, classic 3 क्विक कॉन्फ़िगरेशन प्रीसेट प्रदान करता है, एक-क्लिक सामान्य शैली स्विच
कैरेक्टर सांख्यिकी: रीयल-टाइम में मूल और प्रोसेस किए गए कोड के कैरेक्टर संख्या, बाइट संख्या, कंप्रेशन अनुपात तुलना प्रदर्शित करें
उदाहरण कोड: विभिन्न भाषाओं के उदाहरण कोड बिल्ट-इन, क्लिक करके तुरंत लोड करें त्वरित अनुभव के लिए

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

क्या फॉर्मेट करने के बाद JavaScript कोड का तर्क बदल जाएगा?

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

फॉर्मेटिंग टूल और मेरे स्थानीय VS Code/Prettier के फॉर्मेटिंग परिणाम अलग-अलग हैं तो क्या करें?

इस टूल का फॉर्मेटिंग तर्क जितना हो सके Prettier के आधिकारिक व्यवहार के अनुरूप रखा गया है। यदि परिणाम अलग हैं, तो कृपया कॉन्फ़िगरेशन आइटम जांचें: tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens ये कुछ मुख्य विकल्प दोनों तरफ पूरी तरह से समान हैं या नहीं। इसके अलावा Prettier संस्करण अंतर पर ध्यान दें - Prettier 2/3 के डिफ़ॉल्ट कॉन्फ़िगरेशन में सूक्ष्म अंतर हैं (v3 डिफ़ॉल्ट trailingComma: all, v2 डिफ़ॉल्ट es5; v2 से arrowParens डिफ़ॉल्ट always)। यदि आपके स्थानीय प्रोजेक्ट में .prettierrc कॉन्फ़िगरेशन फ़ाइल है, तो वेबपेज पर उसके अनुरूप विकल्प समायोजित करें, फॉर्मेटिंग परिणाम समान हो जाएंगे।

क्या कंप्रेस किए गए कोड को पुनर्स्थापित किया जा सकता है? mangle किए गए वेरिएबल नाम पुनर्प्राप्त किए जा सकते हैं?

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

कौन से ब्राउज़र समर्थित हैं? क्या मोबाइल फोन पर उपयोग कर सकते हैं?

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

कुछ कोड फॉर्मेट क्यों नहीं हो पाते, पार्सिंग एरर का संकेत देता है?

फॉर्मेटिंग टूल को काम करने के लिए पहले कोड को AST में पार्स करना होता है, यदि कोड में सिंटैक्स त्रुटि है (कोष्ठक बेमेल, स्ट्रिंग बंद नहीं, कीवर्ड गलत लिखा, अतिरिक्त कॉमा आदि), पार्सर कोड संरचना को समझ नहीं पाता और एरर देता है। कृपया पहले कोड की स्वयं की सिंटैक्स त्रुटि जांचें: कंसोल में कोई एरर संदेश है या नहीं, एडिटर में लाल लहरदार रेखा द्वारा त्रुटि स्थान संकेतित है या नहीं, सिंटैक्स त्रुटि ठीक करने के बाद सामान्य रूप से फॉर्मेट हो जाएगा। इसके अलावा सही भाषा मोड चुनना सुनिश्चित करें, JSX/TSX कोड को सामान्य JS न चुनें।

क्या मेरा कोड सर्वर पर अपलोड होगा? कोड सुरक्षित है?

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

क्या Vue सिंगल फाइल कंपोनेंट (.vue फ़ाइलें) फॉर्मेट कर सकते हैं? Svelte का क्या?

वर्तमान में इस टूल का बहु-भाषा समर्थन JS/TS/JSX/TSX/CSS/HTML/JSON शामिल है, Vue के <template>/<script>/<style> सिंगल फाइल (SFC) और Svelte कंपोनेंट वर्तमान में सीधे समग्र रूप से फॉर्मेट करना समर्थित नहीं है, लेकिन आप उनमें से script भाग (JS/TS), style भाग (CSS), template भाग (HTML) को अलग-अलग कॉपी करके संगत भाषा चुनकर अलग से फॉर्मेट कर सकते हैं। भविष्य में Vue/Svelte SFC फॉर्मेटिंग समर्थन बढ़ाने पर विचार किया जाएगा।

टीम एकीकृत फॉर्मेटिंग विनिर्देश कैसे सेट करें?

टीम एकीकृत विनिर्देश के लिए तीन स्तरों पर संयोजन की सलाह दी जाती है: ①प्रोजेक्ट रूट डायरेक्टरी में .editorconfig रखें, एडिटर बुनियादी सेटिंग्स (इंडेंट, लाइन ब्रेक, एन्कोडिंग) एकीकृत करें; ②Prettier का उपयोग करें और प्रोजेक्ट में .prettierrc कॉन्फ़िगरेशन फ़ाइल रखें, सभी लोग और CI इस कॉन्फ़िगरेशन से फॉर्मेट करें, यह टूल भी संगत विकल्प चुनकर कॉन्फ़िगरेशन से मेल खा सकता है; ③ESLint + eslint-config-prettier का उपयोग करके ESLint के शैली नियम बंद करें, केवल कोड गुणवत्ता जांचें। एडिटर कॉन्फ़िगर करें कि सेव करते समय स्वचालित रूप से फॉर्मेट करें (VS Code में Prettier एक्सटेंशन इंस्टॉल करें, editor.formatOnSave: true सेट करें), CI में lint चरण जोड़कर फॉर्मेट जांचें, सुनिश्चित करें कि सबमिट किया गया कोड विनिर्देश के अनुरूप है।

ट्रेलिंग कॉमा (trailingComma) के क्या फायदे हैं? क्या खोलना चाहिए?

ट्रेलिंग कॉमा खोलने की दृढ़ता से सलाह दी जाती है (कम से कम es5 स्तर, all स्तर अनुशंसित)। ट्रेलिंग कॉमा के फायदे हैं: ①Git diff अधिक साफ होता है: अंतिम तत्व जोड़ते समय पिछली पंक्ति में कॉमा जोड़ने की आवश्यकता नहीं होती, केवल नई पंक्ति का diff होता है, कॉमा जोड़ने से पिछली पंक्ति का diff प्रदूषित नहीं होता; ②तत्वों का क्रम पुनर्व्यवस्थित करते समय अधिक सुविधाजनक, अंतिम कॉमा समस्या से निपटने की आवश्यकता नहीं; ③आधुनिक ब्राउज़र और Node.js ट्रेलिंग कॉमा को पूरी तरह से समर्थन करते हैं, पुराने IE समर्थन नहीं करते लेकिन अब IE पर विचार करने की आवश्यकता नहीं है। एकमात्र नुकसान एक कॉमा अधिक है, लेकिन आने वाली सुविधा की तुलना में यह पूरी तरह से लायक है। Prettier v3 डिफ़ॉल्ट रूप से all है।

कंप्रेस करते समय mangle खोलना चाहिए? compress और mangle में क्या अंतर है?

प्रोडक्शन वातावरण कंप्रेशन के लिए compress और mangle दोनों खोलने की सलाह दी जाती है, ये दो स्वतंत्र कंप्रेशन विकल्प हैं: compress कोड ऑप्टिमाइज़ेशन है (कॉन्स्टेंट फोल्डिंग, डेड कोड हटाना, एक्सप्रेशन सरल बनाना आदि), केवल सरल बना सकने पर कोड संरचना संशोधित करता है, वेरिएबल नाम नहीं बदलता; mangle स्थानीय वेरिएबल नाम छोटा करना है, लंबे वेरिएबल नाम को एकल वर्ण में बदलता है, यह वॉल्यूम कम करने के सबसे बड़े स्रोतों में से एक है। जब तक आपका कोड लाइब्रेरी के रूप में बाहर से सीधे वेरिएबल नाम से कॉल नहीं किया जाना है, या eval से डायनेमिक रूप से वेरिएबल नाम एक्सेस नहीं किया जा रहा है, mangle सुरक्षित है, और वॉल्यूम को काफी कम कर सकता है। यदि ओपन सोर्स लाइब्रेरी को API नाम संरक्षित करने की आवश्यकता है, तो mangle.reserved कॉन्फ़िगर करके निर्यातित नाम संरक्षित कर सकते हैं।

JSON फॉर्मेट करते समय कुछ वर्ण स्वचालित रूप से एस्केप क्यों हो जाते हैं?

JSON विनिर्देश की सख्त सिंटैक्स आवश्यकताएं हैं: स्ट्रिंग डबल कोट होनी चाहिए, ट्रेलिंग कॉमा नहीं होनी चाहिए, विशेष वर्ण एस्केप होने चाहिए (न्यूलाइन→\n, कोट→\", बैकस्लैश→\\, Tab→\t आदि)। यदि आपकी JSON स्ट्रिंग में बिना एस्केप के विशेष वर्ण हैं, तो फॉर्मेटिंग के दौरान JSON विनिर्देश के अनुसार स्वचालित रूप से एस्केप होंगे, यह सही व्यवहार है। ध्यान दें: JSON JavaScript नहीं है, JSON में कमेंट नहीं लिख सकते, सिंगल कोट नहीं हो सकते, undefined नहीं हो सकता, ये सब JSON पार्सिंग विफल कर देंगे।

एरो फ़ंक्शन पैरामीटर में हमेशा कोष्ठक कैसे रखें? या कोष्ठक नहीं चाहिए?

arrowParens विकल्प समायोजित करें: always हमेशा कोष्ठक लगाना है ((x) => x), यह Prettier v2+ डिफ़ॉल्ट है, लाभ यह है कि पैरामीटर जोड़ते/घटाते समय कोष्ठक जोड़ने/हटाने की आवश्यकता नहीं होती, diff अधिक साफ होता है; avoid सिंगल पैरामीटर पर कोष्ठक छोड़ना है (x => x), कोड अधिक संक्षिप्त होता है। टीम शैली के अनुसार चुनें, दोनों शैलियों में कोई सही गलत नहीं है, बस एकीकृत होना चाहिए। ध्यान दें: पैरामीटर टाइप एनोटेशन, डिफ़ॉल्ट पैरामीटर, डीस्ट्रक्चरिंग पैरामीटर किसी भी कॉन्फ़िगरेशन में कोष्ठक होंगे।

क्या फॉर्मेटिंग स्वचालित रूप से ESLint की बताई शैली समस्याएं ठीक कर सकती है?

यह टूल Prettier-स्टाइल फॉर्मेटिंग है, केवल Prettier द्वारा संभाली जाने वाली शैली समस्याएं (इंडेंट, कोट, सेमीकॉलन, ट्रेलिंग कॉमा, लाइन चौड़ाई, स्पेस आदि) ठीक कर सकता है। ESLint द्वारा बताई गई कोड गुणवत्ता समस्याएं (जैसे अप्रयुक्त वेरिएबल, return गुम, === समस्या) तर्क समस्याएं हैं, फॉर्मेटिंग टूल स्वचालित रूप से ठीक नहीं कर सकता, मैन्युअल रूप से संशोधित करना होगा। यदि आपके ESLint में eslint-config-prettier कॉन्फ़िगर है, तो Prettier फॉर्मेट करने के बाद, ESLint शैली से संबंधित एरर नहीं देगा, शेष गुणवत्ता समस्याएं मैन्युअल रूप से ठीक करें।

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

क्योंकि फॉर्मेटिंग ब्राउज़र स्थानीय स्तर पर चलती है, समर्थित फ़ाइल आकार आपके डिवाइस के प्रदर्शन पर निर्भर करता है, सामान्य रूप से दसियों KB से लेकर कुछ MB की JS फ़ाइलें सामान्य रूप से प्रोसेस की जा सकती हैं, सामान्य प्रोजेक्ट की सिंगल फ़ाइल JS पूरी तरह से पर्याप्त है। यदि विशेष रूप से बड़ी पैक की गई JS फ़ाइल (दसियों MB) है तो लैग या मेमोरी अपर्याप्त हो सकती है, इस तरह की बड़ी फ़ाइल के लिए स्थानीय रूप से Node.js+Prettier/Terser कमांड लाइन से प्रोसेस करने की सलाह दी जाती है। दैनिक विकास में व्यक्तिगत स्रोत फ़ाइल का आकार आमतौर पर प्रोसेसिंग रेंज के भीतर होता है।

Chrome में शॉर्टकट Ctrl+Shift+B दबाने पर बुकमार्क मैनेजर क्यों खुल जाता है?

यह Chrome ब्राउज़र का डिफ़ॉल्ट शॉर्टकट संघर्ष है: Ctrl+Shift+B Chrome का बुकमार्क बार दिखाने/छिपाने का शॉर्टकट है, ब्राउज़र शॉर्टकट की प्राथमिकता वेबपेज JS शॉर्टकट से अधिक होती है, इसलिए Chrome द्वारा इंटरसेप्ट हो जाता है। समाधान: ①फॉर्मेट बटन पर क्लिक करके ऑपरेशन करें; ②यदि आप Mac उपयोगकर्ता हैं तो Cmd+Shift+B Chrome से संघर्ष नहीं करेगा; ③Chrome सेटिंग्स में ब्राउज़र शॉर्टकट संशोधित कर सकते हैं; ④पहले एडिटर के अंदर फोकस कर सकते हैं, कुछ स्थितियों में एडिटर फोकस शॉर्टकट कैप्चर कर सकता है। अन्य ब्राउज़र में भी यदि शॉर्टकट संघर्ष हो, तो बटन से ऑपरेशन कर सकते हैं।

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

फॉर्मेटिंग के दौरान "सिंटैक्स पार्सिंग एरर" दिखाता है, फॉर्मेट नहीं हो पा रहा

कोड में स्वयं सिंटैक्स त्रुटि है: कोष्ठक बेमेल, स्ट्रिंग बंद नहीं हुई, कीवर्ड गुम, अतिरिक्त कॉमा आदि, सिंटैक्स त्रुटि के कारण AST पार्सिंग विफल हो जाती है और फॉर्मेट नहीं किया जा सकता, कृपया पहले सिंटैक्स त्रुटि ठीक करें भाषा मोड चयन गलत है: जैसे JSX/TSX कोड को JavaScript चुन लिया गया, जेनेरिक सिंटैक्स को JSX टैग समझ लिया गया, या इसके विपरीत, कृपया मैन्युअल रूप से सही भाषा प्रकार चुनें प्रायोगिक सिंटैक्स शामिल है: कोड में बहुत नए मानक नहीं बने JavaScript सिंटैक्स प्रस्ताव (जैसे डेकोरेटर, Pipeline ऑपरेटर) का उपयोग किया गया है, पार्सर समर्थन नहीं करता फ़ाइल में BOM हेडर है: UTF-8 BOM (EF BB BF) तीन बाइट शुरुआत में, कुछ पार्सर इसे संभाल नहीं पाते, बिना BOM के UTF-8 में सेव करने का प्रयास करें अन्य भाषा कोड मिश्रित है: जैसे HTML में एम्बेड की गई टेम्पलेट भाषा (EJS, Handlebars, Vue टेम्पलेट निर्देश) शुद्ध JS/HTML नहीं है, पार्सर पहचान नहीं पाता कोड में ब्लॉक कमेंट समाप्त नहीं हुआ: /* का संगत */ नहीं है, कमेंट बंद नहीं होने के कारण बाद का सारा कोड कमेंट समझा जाता है रेगेक्स अभिव्यक्ति अस्पष्टता: कुछ स्थान जो डिवीजन/ऑपरेटर जैसे दिखते हैं वे वास्तव में रेगेक्स लिटरल हैं, पार्सर गलत निर्णय लेता है, रेगेक्स से पहले सेमीकॉलन जोड़कर अस्पष्टता समाप्त कर सकते हैं

कंप्रेशन (Minify) के दौरान एरर आता है, कंप्रेस नहीं हो पा रहा

कोड सिंटैक्स त्रुटि: फॉर्मेटिंग की तरह, कंप्रेशन भी AST पर आधारित है, कोड सिंटैक्स सही होना चाहिए तभी कंप्रेस हो सकता है, पहले सिंटैक्स त्रुटि ठीक करें ES Module के import/export का उपयोग किया गया लेकिन मॉड्यूल प्रकार सही ढंग से चिह्नित नहीं किया गया, या कंप्रेशन कॉन्फ़िगरेशन मॉड्यूल प्रकार से मेल नहीं खाता प्रॉपर्टी नाम mangle करते समय समस्या: यदि प्रॉपर्टी नाम mangle चालू किया गया (डिफ़ॉल्ट रूप से बंद है), डायनेमिक प्रॉपर्टी एक्सेस obj['key'] के कारण प्रॉपर्टी नहीं मिल पाएगी, प्रॉपर्टी mangle सावधानी से चालू करें कोड में eval() या with स्टेटमेंट है: Terser को eval/with मिलने पर mangle गलत हो सकता है, क्योंकि eval स्कोप वेरिएबल नाम को डायनेमिक रूप से एक्सेस कर सकता है, प्रोडक्शन कोड में eval का उपयोग करने से बचें रिजर्व नाम कॉन्फ़िगरेशन त्रुटि: यदि mangle.reserved कॉन्फ़िगर किया गया लेकिन वर्तनी गलत है या आवश्यक रिजर्व नाम (जैसे jQuery, $ आदि ग्लोबल लाइब्रेरी) छूट गए, रनटाइम एरर हो सकता है toplevel कंप्रेशन कॉन्फ़िगरेशन समस्या: यदि आपका कोड IIFE/मॉड्यूल में पैक किए बिना ग्लोबल स्कोप में चलता है, compress.toplevel: true चालू करने से ग्लोबल वेरिएबल संदर्भ टूट सकता है लक्ष्य ब्राउज़र संस्करण कॉन्फ़िगरेशन बहुत पुराना है: Terser कंप्रेशन के दौरान लक्ष्य ब्राउज़र द्वारा समर्थित नहीं सिंटैक्स का उपयोग कर सकता है, ecma संस्करण कॉन्फ़िगर करके आउटपुट JS सिंटैक्स संस्करण निर्दिष्ट कर सकते हैं

चीनी/चीनी कमेंट फॉर्मेट करने पर विकृत वर्ण दिखाई देते हैं

फ़ाइल एन्कोडिंग UTF-8 नहीं है: अपलोड की गई स्थानीय फ़ाइल GBK/GB2312 आदि चीनी एन्कोडिंग है, टूल डिफ़ॉल्ट रूप से UTF-8 से पार्स करता है जिससे विकृत वर्ण आते हैं, एडिटर से फ़ाइल को UTF-8 एन्कोडिंग में पुनः सेव करके अपलोड करें ब्राउज़र पेज एन्कोडिंग गलती से संशोधित हो गई: हालांकि अब ब्राउज़र डिफ़ॉल्ट UTF-8 हैं, लेकिन कुछ पुराने ब्राउज़र या विशेष सेटिंग में एन्कोडिंग गलत हो सकती है, ब्राउज़र मेनू में पेज एन्कोडिंग देखकर UTF-8 पर सेट कर सकते हैं फ़ाइल में UTF-8 BOM हेडर है: हालांकि BOM आमतौर पर विकृत वर्ण का कारण नहीं बनता, लेकिन कुछ पार्सर BOM को असामान्य रूप से संभालते हैं, एडिटर से BOM हटाकर बिना BOM के UTF-8 में सेव करें कॉपी पेस्ट करते समय एन्कोडिंग रूपांतरण समस्या: कुछ पुराने सॉफ़्टवेयर (जैसे पुराने संस्करण के नोटपैड, Word) से कोड कॉपी करते समय, विशेष वर्ण (जैसे चीनी कोट, पूर्ण-चौड़ाई स्पेस) गलत तरीके से रूपांतरित हो सकते हैं, जितना हो सके VS Code आदि आधुनिक एडिटर से कॉपी करें फ़ॉन्ट समस्या: कुछ मोनोस्पेस फ़ॉन्ट चीनी का समर्थन अच्छी तरह से नहीं करते जिससे प्रदर्शन असामान्य होता है, यह एन्कोडिंग समस्या नहीं, केवल प्रदर्शन फ़ॉन्ट समस्या है, चीनी समर्थन वाला मोनोस्पेस फ़ॉन्ट बदल लें विशेष यूनिकोड वर्ण: कोड में emoji, शून्य-चौड़ाई स्पेस, नियंत्रण वर्ण आदि विशेष अदृश्य वर्ण शामिल हैं, जिससे प्रदर्शन असामान्य या फॉर्मेटिंग त्रुटि हो सकती है, एडिटर में अदृश्य वर्ण प्रदर्शन चालू करके देख सकते हैं gzip कंप्रेशन या प्रॉक्सी समस्या: यदि डिप्लॉय करने के बाद एक्सेस करते समय विकृत वर्ण आते हैं, सर्वर द्वारा Content-Type: application/javascript; charset=utf-8 रिस्पॉन्स हेडर सही ढंग से सेट किया गया है या नहीं जांचें

JSX/TSX कोड फॉर्मेटिंग विफल या पार्सिंग एरर

भाषा मोड को JSX/TSX के बजाय JavaScript चुन लिया गया: सामान्य JS पार्सर <टैग> सिंटैक्स नहीं पहचानता, JSX टैग को तुलना ऑपरेटर समझकर पार्स करता है और एरर देता है, कृपया मैन्युअल रूप से JSX या TSX भाषा चुनें TSX जेनेरिक सिंटैक्स अस्पष्टता: <T> जेनेरिक पैरामीटर TSX में JSX टैग समझा जा सकता है, जैसे const f = <T>(x: T) => x, <T> के बाद कॉमा <T,> जोड़कर अस्पष्टता समाप्त कर सकते हैं (यह TSX का सामान्य लेखन है) JSX टैग बंद नहीं हुए: JSX के लिए आवश्यक है कि सभी टैग सही ढंग से बंद हों, सेल्फ-क्लोजिंग टैग में /> होना चाहिए, HTML के विपरीत, <img> को <img/> लिखना होगा JSX में JS एक्सप्रेशन कोष्ठक समस्या: {} भीतर का JS एक्सप्रेशन सही ढंग से बंद होना चाहिए, {obj.prop} में } नहीं लिखा तो बाद का पार्सिंग गड़बड़ा जाएगा Fragment शॉर्ट सिंटैक्स समस्या: <></> खाली टैग को React 16+ समर्थन चाहिए, और सही ढंग से बंद होना चाहिए; यदि <Fragment> उपयोग करते हैं तो सही ढंग से इम्पोर्ट होना चाहिए JSX एट्रिब्यूट मान कोट समस्या: JSX एट्रिब्यूट मान यदि स्ट्रिंग है तो कोट (डबल कोट) होना चाहिए, एक्सप्रेशन है तो {}, मिश्रित न करें TSX फ़ाइल का एक्सटेंशन .ts है न कि .tsx: TypeScript पार्सर केवल .tsx एक्सटेंशन पर ही JSX पार्सिंग चालू करता है, यदि .ts एक्सटेंशन से JSX लिखते हैं तो एरर आएगा, कृपया सही एक्सटेंशन का उपयोग करें

फॉर्मेटिंग के बाद इंडेंट गलत है, अपेक्षा के अनुरूप नहीं

tabWidth कॉन्फ़िगरेशन गलत है: जांचें कि इंडेंट चौड़ाई कॉन्फ़िगरेशन 2 है या 4, टीम आमतौर पर 2 स्पेस उपयोग करती है, यदि अपेक्षा 4 स्पेस की है तो मैन्युअल रूप से tabWidth विकल्प समायोजित करें useTabs कॉन्फ़िगरेशन गलत है: यदि टीम Tab इंडेंट उपयोग करती है लेकिन आपने स्पेस कॉन्फ़िगर किया है, या इसके विपरीत, जांचें कि useTabs विकल्प सही है या नहीं कोड में स्वयं सिंटैक्स त्रुटि है: सिंटैक्स त्रुटि के कारण AST संरचना असामान्य हो जाती है, फॉर्मेट करने पर इंडेंट गड़बड़ा जाता है, पहले लाल लहरदार रेखा द्वारा संकेतित सिंटैक्स त्रुटि ठीक करें Tab और स्पेस मिश्रित रूप से उपयोग किए गए: मूल कोड में कुछ स्थानों पर Tab इंडेंट कुछ स्थानों पर स्पेस, फॉर्मेटिंग कॉन्फ़िगर की गई शैली में एकीकृत कर देगी, लेकिन मूल कोड बहुत अधिक अव्यवस्थित है तो कई बार फॉर्मेट करने की आवश्यकता हो सकती है printWidth सेटिंग बहुत छोटी है: यदि लाइन चौड़ाई बहुत छोटी सेट की गई (जैसे 40), कोड बार-बार लाइन ब्रेक करेगा जिससे इंडेंट गड़बड़ दिखाई देगा, 80 या 100 सेट करना अधिक उपयुक्त है bracketSameLine/arrowParens आदि स्वरूपण विकल्प कॉन्फ़िगरेशन अपेक्षा के अनुरूप नहीं: कर्ली ब्रेस स्थिति, एरो फ़ंक्शन कोष्ठक आदि शैली कॉन्फ़िगरेशन द्वारा निर्धारित होती है, इंडेंट समस्या नहीं, संगत विकल्प समायोजित करें EditorConfig और स्थानीय एडिटर कॉन्फ़िगरेशन संघर्ष: यदि स्थानीय एडिटर में .editorconfig का उपयोग करके स्वचालित रूप से इंडेंट सेट किया जाता है, जो वेबपेज पर कॉन्फ़िगर किए गए विकल्पों से अलग है, दोनों तरफ के फॉर्मेटिंग परिणाम असंगत होंगे, कॉन्फ़िगरेशन एकीकृत करें

कीबोर्ड शॉर्टकट प्रभावी नहीं हैं, दबाने पर कुछ नहीं होता

फोकस एडिटर पर नहीं है: शॉर्टकट केवल एडिटर को फोकस मिलने पर ही प्रभावी होते हैं, यदि फोकस बटन, इनपुट बॉक्स या पेज के अन्य स्थान पर है तो शॉर्टकट ट्रिगर नहीं होंगे, पहले एडिटर क्षेत्र पर क्लिक करके फोकस करें ब्राउज़र शॉर्टकट संघर्ष: कुछ शॉर्टकट (जैसे Chrome में Ctrl+Shift+B बुकमार्क बार खोलता है, Firefox में Ctrl+Shift+O हिस्ट्री खोलता है) ब्राउज़र द्वारा कब्जा कर लिए जाते हैं, बटन पर क्लिक करके ऑपरेशन कर सकते हैं, या Mac उपयोगकर्ता Cmd का उपयोग Ctrl के स्थान पर करके देख सकते हैं इनपुट मेथड समस्या: चीनी इनपुट मेथड स्थिति में कुछ शॉर्टकट इंटरसेप्ट किए जा सकते हैं, अंग्रेजी इनपुट मेथड पर स्विच करके शॉर्टकट पुनः प्रयास करें अन्य एक्सटेंशन/प्लगइन कब्जा: ब्राउज़र में इंस्टॉल किए गए शॉर्टकट एक्सटेंशन, टैम्परमनकी स्क्रिप्ट, प्रॉक्सी प्लगइन शॉर्टकट कब्जा कर सकते हैं, इनकॉग्निटो मोड में पेज खोलकर देखें सिस्टम शॉर्टकट संघर्ष: ऑपरेटिंग सिस्टम या चल रहे अन्य सॉफ़्टवेयर (जैसे स्क्रीनशॉट सॉफ़्टवेयर, इनपुट मेथड, IDE) के ग्लोबल शॉर्टकट ने संगत कुंजी संयोजन कब्जा कर लिया है, अन्य सॉफ़्टवेयर शॉर्टकट संशोधित कर सकते हैं या इस टूल के बटन से ऑपरेशन कर सकते हैं Mac/Windows कीबोर्ड अंतर: ध्यान दें कि Mac Cmd (⌘) कुंजी का उपयोग करता है, Windows/Linux Ctrl कुंजी का उपयोग करते हैं, मिश्रित न करें; Mac पर Option Windows के Alt के अनुरूप है ब्राउज़र सुरक्षा सीमा: कुछ फ़ाइल एक्सेस से संबंधित शॉर्टकट ब्राउज़र सुरक्षा नीति द्वारा सीमित हो सकते हैं, JS द्वारा पूरी तरह से अनुकरण नहीं किए जा सकते, आवश्यक होने पर सीधे संगत बटन पर क्लिक करके ऑपरेशन करें

शब्दकोश

Prettier: वर्तमान में सबसे लोकप्रिय फ्रंटएंड कोड फॉर्मेटिंग टूल, Opinionated डिजाइन दर्शन अपनाता है, JS/TS/CSS/HTML/Markdown आदि कई भाषाओं का समर्थन करता है, कोड शैली को अनिवार्य रूप से एकीकृत करता है, टीम शैली विवाद समाप्त करता है।
Terser: आधुनिक JavaScript कंप्रेशन टूल, UglifyJS का ES6+ संगत ब्रांच, ES6+ सिंटैक्स कंप्रेशन-ऑब्फस्केशन का समर्थन करता है, Webpack, Rollup, Vite आदि आधुनिक बिल्ड टूल का डिफ़ॉल्ट कंप्रेसर है।
UglifyJS: क्लासिक JavaScript कंप्रेशन टूल, Terser का पूर्ववर्ती, लेकिन केवल ES5 और पहले के सिंटैक्स का समर्थन करता है, ES6+ नई सुविधाओं का समर्थन नहीं करता, अब नए प्रोजेक्ट आमतौर पर Terser से प्रतिस्थापित करते हैं।
AST (Abstract Syntax Tree): अमूर्त सिंटैक्स ट्री, स्रोत कोड सिंटैक्स संरचना का वृक्ष-रूप प्रस्तुतिकरण, प्रत्येक नोड कोड में एक सिंटैक्स संरचना का प्रतिनिधित्व करता है। Babel, Prettier, Terser, ESLint आदि टूल सभी AST पर आधारित कार्यान्वित हैं।
ESLint: JavaScript/TypeScript इकोसिस्टम का सबसे लोकप्रिय कोड चेक टूल (Linter), कोड गुणवत्ता समस्याओं को खोजने और कोड शैली को एकीकृत करने के लिए उपयोग होता है, Prettier के साथ संयुक्त रूप से उपयोग किया जा सकता है।
EditorConfig: क्रॉस-एडिटर कोड शैली एकीकरण कॉन्फ़िगरेशन फ़ाइल, इंडेंट शैली, इंडेंट आकार, लाइन ब्रेक प्रकार, फ़ाइल एन्कोडिंग, अंतिम लाइन ब्रेक आदि बुनियादी शैली परिभाषित करती है, ताकि विभिन्न एडिटर एक ही प्रोजेक्ट खोलते समय समान व्यवहार करें।
CodeMirror: ब्राउज़र-आधारित कोड एडिटर कंपोनेंट, सिंटैक्स हाइलाइटिंग, लाइन नंबर प्रदर्शन, ब्रैकेट मैचिंग, कोड फोल्डिंग, मल्टी-कर्सर आदि पेशेवर संपादन सुविधाएं प्रदान करता है, वेब-आधारित कोड एडिटर के मुख्यधारा विकल्पों में से एक है।
minify (कंप्रेस): कोड तर्क को बदले बिना, व्हाइटस्पेस और कमेंट हटाना, वेरिएबल नाम छोटा करना, कोड ऑप्टिमाइज़ेशन आदि तरीकों से कोड आकार को न्यूनतम करने की प्रक्रिया, प्रोडक्शन वातावरण में लोडिंग गति बढ़ाने के लिए उपयोग होती है।
mangle (ऑब्फस्केट/विनाश): कंप्रेशन प्रक्रिया में वेरिएबल नाम, फ़ंक्शन नाम, पैरामीटर नाम को एकल वर्ण में छोटा करने का चरण, कोड आकार को काफी कम करता है और साथ ही कोड को पढ़ना कठिन बना देता है, जिसे वेरिएबल नाम ऑब्फस्केशन भी कहा जाता है।
beautify (ब्यूटीफाई): अर्थात् कोड फॉर्मेटिंग, कंप्रेस किए गए या अव्यवस्थित कोड को फिर से इंडेंट, लाइन ब्रेक, स्पेस जोड़कर स्वरूपित करना, पठनीयता बढ़ाना, minify के विपरीत।
trailing comma (ट्रेलिंग कॉमा): ऑब्जेक्ट, ऐरे, फ़ंक्शन पैरामीटर के अंतिम तत्व के बाद का कॉमा, नए तत्व जोड़ते समय Git diff को साफ बनाने में मदद करता है, ES5+ वातावरण समर्थित है।
arrow parens (एरो फ़ंक्शन कोष्ठक): सिंगल-पैरामीटर एरो फ़ंक्शन के पैरामीटर को कोष्ठक से लपेटने की आवश्यकता है या नहीं, जैसे x => x (बिना कोष्ठक) बनाम (x) => x (कोष्ठक के साथ)।
printWidth (लाइन चौड़ाई): फॉर्मेटिंग के दौरान प्रत्येक पंक्ति कितने वर्णों से अधिक होने पर स्वचालित रूप से लाइन ब्रेक करती है, Prettier का डिफ़ॉल्ट 80 वर्ण है, टीम मॉनिटर आकार के अनुसार 100 या 120 में समायोजित कर सकती है।
semicolons (सेमीकॉलन): JavaScript स्टेटमेंट के अंत में सेमीकॉलन जोड़ना है या नहीं, JS में ASI स्वचालित सेमीकॉलन सम्मिलन तंत्र है, लेकिन ज्यादातर परिदृश्यों में दुर्घटना से बचने के लिए सेमीकॉलन जोड़ने की सलाह दी जाती है।
single quote (सिंगल कोट): स्ट्रिंग के लिए सिंगल कोट या डबल कोट का उपयोग, JS में कार्य पूरी तरह से समतुल्य केवल शैली प्राथमिकता है, JSON विनिर्देश डबल कोट अनिवार्य करता है।
double quote (डबल कोट): स्ट्रिंग को डबल कोट से लपेटना, कई भाषाओं की डिफ़ॉल्ट शैली है, और JSON विनिर्देश द्वारा आवश्यक स्ट्रिंग प्रारूप भी है।
tab width (इंडेंट चौड़ाई): प्रत्येक इंडेंट स्तर के लिए स्पेस की संख्या, फ्रंटएंड समुदाय आमतौर पर 2 स्पेस का उपयोग करता है, बैकएंड भाषाएं आमतौर पर 4 स्पेस का उपयोग करती हैं।
BOM (Byte Order Mark): बाइट ऑर्डर मार्क, UTF-8 एन्कोडिंग फ़ाइल की शुरुआत में दिखाई देने वाले EF BB BF तीन बाइट, एन्कोडिंग चिह्नित करने के लिए उपयोग होते हैं, कुछ परिदृश्यों में JS पार्सिंग त्रुटि का कारण बन सकते हैं।
UTF-8: यूनिकोड ट्रांसफॉर्मेशन फॉर्मेट 8-बिट, वर्तमान में Web और फ्रंटएंड प्रोजेक्ट का मानक फ़ाइल एन्कोडिंग, सभी यूनिकोड वर्णों का समर्थन करता है, डिफ़ॉल्ट अनुशंसित एन्कोडिंग है।
source map (सोर्स मैप): कंप्रेस/ट्रांसपाइल किए गए कोड को मूल स्रोत कोड स्थिति से मैप करने वाली फ़ाइल, प्रोडक्शन वातावरण डीबगिंग के लिए उपयोग होती है, कंप्रेस किए गए कोड में एरर आने पर स्रोत कोड लाइन नंबर पर पता लगाया जा सकता है।

Prettier सामान्य कॉन्फ़िगरेशन विकल्प तालिका

JS कंप्रेशन/ऑब्फस्केशन सामान्य अनुकूलन और प्रभाव

एडिटर कीबोर्ड शॉर्टकट संदर्भ तालिका (Windows/Linux / Mac)