यह क्या करता है
कोड फ़ॉर्मैटर ठुँसे हुए, मिनिफ़ाई किए गए या असंगत इंडेंटेशन वाले कोड को लेकर उसे साफ़ और एक जैसी स्टाइल में वापस प्रिंट करता है। यह वेब डेवलपमेंट में सबसे ज़्यादा मिलने वाली भाषाएँ सपोर्ट करता है: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML और GraphQL।
अंदर से यह Prettier चलाता है, वही फ़ॉर्मैटर जिसे लाखों प्रोजेक्ट इस्तेमाल करते हैं, इसलिए परिणाम बिल्कुल वैसा दिखता है जैसा VS Code में या pre-commit hook से फ़ॉर्मैट किया गया कोड। हर भाषा का पार्सर तभी लोड होता है जब आप उसे चुनते हैं, जिससे पेज तेज़ बना रहता है।
कैसे इस्तेमाल करें
- अपने कोड की भाषा चुनें।
- कोड पेस्ट करें, या कोई फ़ाइल खोलें।
- इंडेंट स्टाइल (2 स्पेस, 4 स्पेस या टैब) और लाइन की चौड़ाई चुनें। इस चौड़ाई से लंबी लाइनें वहाँ तोड़ी जाती हैं जहाँ भाषा अनुमति देती है।
- JavaScript और TypeScript के लिए चुनें कि स्टेटमेंट सेमीकोलन पर ख़त्म हों या नहीं। स्क्रिप्ट और स्टाइलशीट के लिए, अगर आपका प्रोजेक्ट पसंद करता है तो सिंगल कोट्स चुनें।
- परिणाम कॉपी करें या डाउनलोड करें।
उदाहरण
उदाहरण एक लाइन का HTML पेज है जिसमें इनलाइन CSS और JavaScript है। फ़ॉर्मैट करने के बाद हर एलिमेंट अपनी अलग लाइन पर आ जाता है, CSS नियम हर लाइन में एक डिक्लेरेशन के साथ फैल जाते हैं, और स्क्रिप्ट के arrow function को कोष्ठक और सेमीकोलन मिल जाते हैं:
<script>
const items = [1, 2, 3];
items.forEach((i) => console.log(i));
</script>सुझाव
- फ़ॉर्मैटिंग एक तेज़ सिंटैक्स चेक का काम भी करती है। अगर Prettier इनपुट को पार्स नहीं कर पाता, तो एरर मैसेज लाइन और कॉलम दिखाता है ताकि आप सीधे गलती पर पहुँच सकें।
- XML को इस तरह फ़ॉर्मैट किया जाता है कि व्हाइटस्पेस को महत्वहीन माना जाए, ताकि नेस्टेड टैग इंडेंट हो सकें। अगर आपका डॉक्यूमेंट एलिमेंट्स के अंदर सटीक व्हाइटस्पेस पर निर्भर है, तो इस्तेमाल करने से पहले परिणाम जाँच लें।
- उल्टा काम करना है? प्रोडक्शन के लिए कोड छोटा करने को JavaScript और CSS मिनिफ़ायर इस्तेमाल करें, या JSON वैलिडेशन और मिनिफ़िकेशन के लिए JSON फ़ॉर्मैटर।
अक्सर पूछे जाने वाले सवाल
› यह टूल कौन-सा फ़ॉर्मैटर इस्तेमाल करता है?
Prettier, जो वेब प्रोजेक्ट्स के लिए सबसे ज़्यादा इस्तेमाल होने वाला कोड फ़ॉर्मैटर है, और यह पूरी तरह आपके ब्राउज़र में चलता है। XML सपोर्ट आधिकारिक Prettier XML प्लगइन से आता है। आउटपुट वही होता है जो उन्हीं सेटिंग्स के साथ एडिटर में Prettier देता है।
› क्या यह मेरे कोड का व्यवहार बदल देता है?
नहीं। Prettier सिर्फ़ लेआउट बदलता है, जैसे इंडेंटेशन, लाइन ब्रेक, स्पेसिंग और कोट्स की स्टाइल। अगर आपके कोड में सिंटैक्स एरर है, तो टूल अंदाज़ा लगाने के बजाय रुक जाता है और उस लाइन की ओर इशारा करता है।
› script और style टैग के अंदर का कोड भी क्यों फ़ॉर्मैट होता है?
HTML फ़ॉर्मैटर अंदर जुड़े CSS और JavaScript को उनके संबंधित Prettier पार्सर्स को सौंप देता है, इसलिए पूरा पेज एक जैसे इंडेंटेशन के साथ वापस मिलता है।
› क्या मेरा कोड अपलोड होता है?
नहीं। फ़ॉर्मैटिंग लोकल रूप से चलती है और कुछ भी सर्वर पर नहीं भेजा जाता।