Visual Studio Code में अब बेसलाइन की सुविधा काम करती है

Rick Viscomi

पब्लिश होने की तारीख: 20 मई, 2025

मॉडर्न कोड एडिटर, आपकी प्रॉडक्टिविटी को काफ़ी हद तक बढ़ा देते हैं. ऐसा इसलिए, क्योंकि ये एडिटर उन टूल और रेफ़रंस दस्तावेज़ों को एक साथ लाते हैं जिनकी मदद से, आपको बेहतर तरीके से काम करने में मदद मिलती है. यही वजह है कि इन्हें IDE कहा जाता है. Visual Studio Code (VS Code) जैसे कई IDE में, प्रॉडक्टिविटी बढ़ाने वाली एक सुविधा उपलब्ध है. इसके तहत, एडिटर में वेब सुविधाओं पर कर्सर घुमाने पर, उनके बारे में अतिरिक्त जानकारी दिखती है. इस जानकारी में, सुविधा के बारे में जानकारी, काम करने वाले ब्राउज़र, सिंटैक्स गाइड, और MDN पर ज़्यादा जानने के लिए एक लिंक शामिल है.

ब्राउज़र के साथ काम करने की सुविधा से जुड़ी जानकारी, खास तौर पर आईडीई के संदर्भ में काम की होती है. इसकी वजह यह है कि किसी सुविधा पर कर्सर घुमाकर, यह तुरंत पता लगाया जा सकता है कि वह सुविधा कितनी इंटरऑपरेबल है. इस जानकारी का इस्तेमाल करके, यह तय किया जा सकता है कि कोई सुविधा, ब्राउज़र के साथ काम करने से जुड़े आपके लक्ष्यों को पूरा करती है या नहीं. साथ ही, यह भी तय किया जा सकता है कि आपको इसे बेहतर बनाने या पॉलीफ़िल करने के लिए, सुरक्षा से जुड़े कदम उठाने की ज़रूरत है या नहीं. इसके अलावा, यह भी तय किया जा सकता है कि आपको इसका इस्तेमाल पूरी तरह से बंद करना है या नहीं.

VS Code के पुराने वर्शन में, ब्राउज़र के वर्शन नंबर के हिसाब से, ऐस्पेक्ट रेशियो वाली सीएसएस प्रॉपर्टी पर कर्सर घुमाते हुए: Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74
VS Code के पुराने वर्शन में aspect-ratio CSS प्रॉपर्टी पर कर्सर घुमाने पर, ब्राउज़र के वर्शन नंबर के हिसाब से सहायता मिलती है:
"Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74"

VS Code के पिछले वर्शन में, यह जानकारी ब्राउज़र के वर्शन नंबर के हिसाब से दी जाती थी. यह जानकारी, MDN, Can I Use या web.dev जैसी साइटों पर मौजूद कंपैटिबिलिटी टेबल में भी दिखती है. हालांकि, इन सभी साइटों में एक बात सामान्य है. इन्होंने Baseline का इस्तेमाल करके, ब्राउज़र सपोर्ट के मुश्किल लैंडस्केप की खास जानकारी देना भी शुरू कर दिया है. इसलिए, VS Code को इन अन्य संसाधनों के साथ अलाइन करने के लिए, VS Code अब बेसलाइन के साथ भी काम करता है.

नया बेसलाइन यूज़र इंटरफ़ेस (यूआई) पाने के लिए, VS Code को 1.100 या उसके बाद के वर्शन पर अपग्रेड करें. यह सुविधा तुरंत काम करने लगती है. इसके लिए, किसी एक्सटेंशन या अतिरिक्त कॉन्फ़िगरेशन की ज़रूरत नहीं होती.

VS Code के नए वर्शन में, aspect-ratio सीएसएस प्रॉपर्टी पर कर्सर घुमाते हुए. इसमें ब्राउज़र के साथ काम करने की सुविधा को Baseline के हिसाब से दिखाया गया है: यह सुविधा, मुख्य ब्राउज़र पर बड़े पैमाने पर उपलब्ध है (2021 से Baseline)
VS Code के नए वर्शन में, aspect-ratio सीएसएस प्रॉपर्टी पर कर्सर घुमाते हुए. इसमें ब्राउज़र के साथ काम करने की जानकारी, बेसलाइन के हिसाब से दी गई है:
"ज़्यादातर ब्राउज़र पर उपलब्ध है (2021 से बेसलाइन)"

VS Code के नए वर्शन में, किसी वेब सुविधा पर कर्सर घुमाने पर, आपको उसकी बेसलाइन स्थिति दिखेगी. इसके अलावा, VS Code आपको यह भी बताएगा कि यह सुविधा कब से उपलब्ध है. इसके लिए, वह आपको उस साल की जानकारी देगा जब यह सुविधा बेसलाइन बनी थी. इसके अलावा, जो सुविधाएं अब तक बेसलाइन नहीं बनी हैं उनके लिए, यह टूल आपको बताएगा कि किन ब्राउज़र में यह सुविधा अब तक पूरी तरह से लागू नहीं हुई है.

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

'सीमित तौर पर उपलब्ध' के लिए अपने-आप सही होने वाले एचटीएमएल एट्रिब्यूट का होवरकार्ड
सीमित तौर पर खरीदारी के लिए उपलब्धता autocorrect एचटीएमएल एट्रिब्यूट का होवरकार्ड

इस रिलीज़ में कुछ नई सुविधाएं भी शामिल हैं. पहले, सीएसएस प्रॉपर्टी के लिए सिर्फ़ ब्राउज़र सपोर्ट डेटा को पुल अप किया जा सकता था. यह खास तौर पर तब फ़ायदेमंद था, जब हर साल नई सीएसएस सुविधाएं लॉन्च की जा रही थीं. हालांकि, एचटीएमएल में भी कई नए बदलाव हो रहे हैं! इस रिलीज़ के बाद, VS Code, एचटीएमएल एलिमेंट और एट्रिब्यूट के लिए ब्राउज़र सपोर्ट की जानकारी भी दिखाएगा. यह जानकारी, उनके बेसलाइन स्टेटस के हिसाब से होगी.

उदाहरण के लिए, autocorrect इनपुट एट्रिब्यूट को कुछ महीने पहले ही, Firefox ब्राउज़र में शिप किया गया था. इस सुविधा के सीमित तौर पर उपलब्ध होने के बारे में तुरंत जानकारी मिलने से, यह पता चल जाता है कि यह सुविधा कहां काम करेगी और कहां नहीं. इस मामले में, यह सुविधा काम न करने वाले ब्राउज़र पर कोई असर नहीं डालती. इसलिए, इसका इस्तेमाल करें!

इस इमेज में, 'ज़्यादातर लोगों के लिए उपलब्ध' डायलॉग एचटीएमएल एलिमेंट और 'हाल ही में उपलब्ध हुए' पॉपओवर एट्रिब्यूट पर कर्सर घुमाते हुए दिखाया गया है
ज़्यादातर लोगों के लिए उपलब्ध dialog एचटीएमएल एलिमेंट और हाल ही में उपलब्ध कराए गए popover एट्रिब्यूट पर कर्सर घुमाते हुए

autocorrect की तरह, एचटीएमएल की अन्य सुविधाएं (जैसे कि dialog एलिमेंट) आसानी से काम नहीं करती हैं. इसलिए, dialog होवरकार्ड को चालू करने और यह देखने में आसानी होती है कि यह सुविधा 2022 से ही उपलब्ध है. साथ ही, यह सुविधा ज़्यादातर ब्राउज़र पर उपलब्ध है. इस तरह की जानकारी से, आपको उन सुविधाओं को अपनाने में मदद मिलेगी जिन्हें आपने अब तक बहुत ज़्यादा आधुनिक माना था.

Popover API, एचटीएमएल की एक ऐसी सुविधा का दूसरा उदाहरण है जिसे Baseline के तौर पर भी इस्तेमाल किया जाता है. हालांकि, इसे 2024 से ही Baseline के तौर पर इस्तेमाल किया जा रहा है. इसलिए, इसे अब भी नई सुविधा माना जाता है. इसका मतलब है कि यह सभी मुख्य ब्राउज़र पर काम करती है.हालांकि, इसे बड़े पैमाने पर उपलब्ध होने के लिए, ढाई साल का समय नहीं मिला है. इसलिए, इस सुविधा को सभी उपयोगकर्ताओं के लिए उपलब्ध कराने से पहले, आपको थोड़ा ज़्यादा सावधानी बरतनी चाहिए.

एचटीएमएल ESLint हाइलाइट कर रहा है कि अपने-आप सही होने वाली सुविधा अभी तक बेसलाइन नहीं है. साथ ही, टिप्पणी के साथ उस चेतावनी को दबा रहा है
एचटीएमएल ESLint, जिसमें यह हाइलाइट किया गया है कि autocorrect सुविधा अभी तक बेसलाइन नहीं है. साथ ही, टिप्पणी के साथ उस चेतावनी को छिपाया गया है

VS Code में यह जानकारी उपलब्ध होने से, काम करने की क्षमता काफ़ी बढ़ जाती है. हालांकि, अगर आपको किसी सुविधा पर कर्सर घुमाए बिना ही यह पता चल जाए कि वह सुविधा बेसलाइन है या नहीं, तो क्या होगा? यह काम, एक अलग लेकिन मिलते-जुलते टूल की मदद से किया जाता है: लिंटर.

उदाहरण के लिए, VS Code के लिए ESLint एक्सटेंशन, आपकी एचटीएमएल और सीएसएस फ़ाइलों की जांच कर सकता है. साथ ही, ऐसी सुविधाओं के नीचे घुमावदार अंडरलाइन जोड़ सकता है जो अब तक बेसलाइन नहीं हैं. यह सुविधा, हाल ही में जोड़े गए use-baseline नियमों के साथ काम करती है. ये नियम, HTML ESLint और ESLint for CSS प्लगिन से लिए गए हैं. अगर आपको Stylelint का इस्तेमाल करना है, तो इसके लिए भी ऐसा ही नियम है. ज़ाहिर है, लिंटर के कई फ़ायदों में से यह सिर्फ़ एक फ़ायदा है. हालांकि, इससे पता चलता है कि ये, नई बेसलाइन की सुविधा वाले होवरकार्ड के साथ कितने अच्छे से काम करते हैं.

अगर आप VS Code का इस्तेमाल करते हैं, तो हमें उम्मीद है कि आप नए होवर कार्ड को आज़माएंगे. अगर आप VS Code का इस्तेमाल नहीं करते हैं, तो आपके लिए एक अच्छी खबर है. कई आईडीई, Code - OSS (VS Code का ओपन सोर्स वर्शन) से फ़ोर्क किए गए हैं या वे उसी भाषा के सर्वर पर निर्भर करते हैं जो इसके एचटीएमएल और सीएसएस के होवरकार्ड को पावर देते हैं. इन डाउनस्ट्रीम आईडीई को नए वर्शन पर अपग्रेड होने में हफ़्ते या महीने लग सकते हैं. हालांकि, अपग्रेड होने के बाद, इन्हें नया बेसलाइन यूज़र इंटरफ़ेस (यूआई) अपने-आप मिल जाएगा:

  • VSCodium
  • Firebase Studio
  • कर्सर
  • विंडसर्फ़
  • Zed
  • Eclipse Theia
  • ट्रै
  • GitHub Codespaces
  • GitLab वर्कस्पेस
  • Replit
  • StackBlitz (Bolt)

JetBrains, Baseline को IntelliJ पर आधारित अपने सभी IDE के साथ इंटिग्रेट करने पर भी काम कर रहा है. इसकी शुरुआत WebStorm से होगी. हम इस बारे में ज़्यादा जानकारी, एक अलग ब्लॉग पोस्ट में देंगे. इसलिए, हमारे साथ जुड़े रहें.

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