JS formatter क्या है और यह क्या कर सकता है?

यह एक browser-आधारित टूल है जो JavaScript, TypeScript और JSX/TSX को beautify या minify करता है। Beautifying पूर्ण स्टाइल विकल्पों के साथ Prettier चलाती है और minifying production के लिए कोड compress करने हेतु Terser चलाती है।

JS formatter के साथ मैं TypeScript या JSX कैसे फ़ॉर्मैट करूँ?

parser चुनें: JS / JSX, TS / TSX या Auto। Auto पहले TypeScript parser आज़माता है और Babel पर fall back करता है, इसलिए सादा JavaScript, JSX और TypeScript सभी सही ढंग से फ़ॉर्मैट होते हैं।

क्या JS formatter Prettier और Terser का उपयोग करता है?

हाँ। Beautifying Prettier का उपयोग करती है और minifying Terser का, इसलिए आउटपुट उन्हीं tools से मेल खाता है जिन्हें आप एक वास्तविक build pipeline में उपयोग करेंगे।

JS formatter में मैं कौन-से स्टाइल विकल्प नियंत्रित कर सकता हूँ?

आप single बनाम double quotes और semicolons टॉगल कर सकते हैं, tabs और spaces के बीच स्विच कर सकते हैं, tab width को 2 या 4 पर सेट कर सकते हैं, 80, 100 या 120 का print width चुन सकते हैं, और none, es5 या all में से trailing commas चुन सकते हैं।

क्या JS formatter मेरा कोड कहीं भेजता है?

नहीं। Prettier और Terser दोनों पूरी तरह आपके browser में चलते हैं, इसलिए आपका कोड कभी आपके डिवाइस से बाहर नहीं जाता और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

JS / TS फ़ॉर्मेटर

Prettier विकल्पों के साथ JavaScript, TypeScript और JSX/TSX को सुंदर या छोटा बनाएँ।

आपका कोड आपके browser में Prettier और Terser के साथ स्थानीय रूप से फ़ॉर्मैट होता है, और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

styles भी फ़ॉर्मैट करनी हैं? CSS Formatter आज़माएँ।

JS / TS फ़ॉर्मेटर के बारे में

यह js formatter JavaScript, TypeScript और JSX/TSX को सीधे आपके browser में beautify या minify करता है। एक JavaScript beautifier के रूप में यह एक पूर्ण विकल्प पैनल के साथ Prettier चलाता है, जबकि minifying production के लिए कोड को छोटा करने हेतु Terser का उपयोग करती है। syntax को स्वचालित रूप से पहचानने के लिए Auto parser चुनें, या जब आपको एक विशिष्ट TypeScript formatter चाहिए तो JS/JSX या TS/TSX को मजबूर करें। semicolons, quote style, tab width, print width और trailing commas को अपनी प्रोजेक्ट की स्टाइल से मेल कराने के लिए ट्यून करें। यह गन्दे snippets साफ करने वाले डेवलपर्स, bundled आउटपुट जाँचने वाले QA इंजीनियरों, और किसी भी ऐसे व्यक्ति के लिए बनाया गया है जिसे एक त्वरित prettier online विकल्प चाहिए। सब कुछ आपके browser में स्थानीय रूप से प्रोसेस होता है, इसलिए आपका स्रोत कोड आपके डिवाइस से बाहर नहीं जाता और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

विशेषताएँ

Prettier के साथ JavaScript, TypeScript और JSX/TSX को beautify करें
production के लिए कोड छोटा करने हेतु Terser के साथ minify करें
Auto parser पहचान, साथ ही स्पष्ट JS/JSX और TS/TSX मोड
semicolons, single या double quotes, और tabs बनाम spaces को टॉगल करें
कॉन्फ़िगर करने योग्य tab width (2 या 4) और print width (80, 100, 120)
trailing commas चुनें: none, es5 या all
किसी भी विकल्प को समायोजित करते ही तुरंत फ़ॉर्मैटिंग
पूरी तरह आपके browser में चलता है

JS / TS फ़ॉर्मेटर का उपयोग कैसे करें

अपना JavaScript या TypeScript इनपुट बॉक्स में पेस्ट करें।
pretty-print करने के लिए Beautify या compress करने के लिए Minify चुनें।
parser चुनें: Auto, JS / JSX या TS / TSX।
tab width, quotes, semicolons और trailing commas जैसे विकल्प समायोजित करें।
फ़ॉर्मैट किए गए आउटपुट को परिणाम पैनल से कॉपी करें।

उदाहरण

इनपुट

const  greet=(name)=>{return 'hi '+name}

आउटपुट

const greet = (name) => {
  return 'hi ' + name;
};

डिफ़ॉल्ट Prettier विकल्पों के साथ beautify किया गया (2-स्पेस इंडेंट, semicolons)।

सामान्य त्रुटियाँ और समस्या निवारण

पेस्ट करने के बाद आउटपुट खाली है या एक parse त्रुटि दिखाता है। — सुनिश्चित करें कि snippet मान्य JavaScript या TypeScript है। type annotations के लिए parser को TS / TSX पर, या React syntax के लिए JS / JSX पर स्विच करें।
Auto मोड TypeScript-विशिष्ट syntax को गलत parse करता है। — Auto पहले TypeScript parser आज़माता है और Babel पर fall back करता है; यदि आपकी फ़ाइल उन्नत type सुविधाओं का उपयोग करती है तो स्पष्ट रूप से TS / TSX मजबूर करें।
Minified आउटपुट अपठनीय दिखता है। — यह अपेक्षित है। Terser production के लिए whitespace हटाता है और कोड छोटा करता है। यदि आपको पठनीय परिणाम चाहिए तो Beautify का उपयोग करें।
Quotes या semicolons वह नहीं हैं जो आप चाहते थे। — कॉपी करने से पहले Single quotes और Semicolons विकल्प टॉगल करें। जब आप उन्हें बदलते हैं तो Prettier तुरंत फिर से फ़ॉर्मैट करता है।

अक्सर पूछे जाने वाले प्रश्न

JS formatter क्या है और यह क्या कर सकता है?: यह एक browser-आधारित टूल है जो JavaScript, TypeScript और JSX/TSX को beautify या minify करता है। Beautifying पूर्ण स्टाइल विकल्पों के साथ Prettier चलाती है और minifying production के लिए कोड compress करने हेतु Terser चलाती है।
JS formatter के साथ मैं TypeScript या JSX कैसे फ़ॉर्मैट करूँ?: parser चुनें: JS / JSX, TS / TSX या Auto। Auto पहले TypeScript parser आज़माता है और Babel पर fall back करता है, इसलिए सादा JavaScript, JSX और TypeScript सभी सही ढंग से फ़ॉर्मैट होते हैं।
क्या JS formatter Prettier और Terser का उपयोग करता है?: हाँ। Beautifying Prettier का उपयोग करती है और minifying Terser का, इसलिए आउटपुट उन्हीं tools से मेल खाता है जिन्हें आप एक वास्तविक build pipeline में उपयोग करेंगे।
JS formatter में मैं कौन-से स्टाइल विकल्प नियंत्रित कर सकता हूँ?: आप single बनाम double quotes और semicolons टॉगल कर सकते हैं, tabs और spaces के बीच स्विच कर सकते हैं, tab width को 2 या 4 पर सेट कर सकते हैं, 80, 100 या 120 का print width चुन सकते हैं, और none, es5 या all में से trailing commas चुन सकते हैं।
क्या JS formatter मेरा कोड कहीं भेजता है?: नहीं। Prettier और Terser दोनों पूरी तरह आपके browser में चलते हैं, इसलिए आपका कोड कभी आपके डिवाइस से बाहर नहीं जाता और कुछ भी किसी सर्वर पर अपलोड नहीं होता।