يتيح محرِّر Visual Studio Code الآن استخدام Baseline

Rick Viscomi

تاريخ النشر: 20 مايو 2025

تتيح أدوات تعديل الرموز البرمجية الحديثة إمكانية تحقيق إنتاجية عالية من خلال الجمع بين الأدوات والمستندات المرجعية التي تحتاج إليها لإنشاء التطبيقات بكفاءة، وهذا هو الهدف من بيئة التطوير المتكاملة (IDE). أحد التحسينات على الإنتاجية في العديد من بيئات التطوير المتكاملة، مثل Visual Studio Code (VS Code)، هو عرض معلومات إضافية حول ميزات الويب عند تمرير مؤشر الماوس فوقها في المحرّر. تتضمّن هذه المعلومات وصفًا للميزة والمتصفّحات المتوافقة ودليلًا لقواعد الكتابة ورابطًا لمعرفة المزيد على MDN.

تكون معلومات التوافق مع المتصفح مفيدة بشكل خاص في سياق بيئة التطوير المتكاملة، لأنّه يمكنك الحصول على ملاحظات فورية حول مدى قابلية إحدى الميزات للتشغيل التفاعلي، وذلك بمجرّد تمرير مؤشر الماوس فوقها. يمكنك استخدام هذه المعلومات لتحديد ما إذا كانت إحدى الميزات تستوفي متطلبات توافق المتصفح، أو ما إذا كنت بحاجة إلى اتّخاذ خطوات وقائية لتحسينها تدريجيًا أو تعبئتها، أو التوقّف عن استخدامها تمامًا.

في الإصدارات السابقة من VS Code، تم التعبير عن هذه المعلومات من خلال أرقام إصدارات المتصفّح، على غرار ما قد تكون رأيته في جداول التوافق على مواقع إلكترونية مثل MDN أو Can I Use أو هنا على web.dev. ولكن ما تشترك فيه كل هذه المواقع الإلكترونية هو أنّها بدأت أيضًا في تلخيص المشهد المعقّد لتوافق المتصفّحات باستخدام Baseline. لذا، في محاولة لمواءمة VS Code مع الطريقة التي تنقل بها هذه المراجع الأخرى معلومات التوافق مع المتصفح، أصبح VS Code متوافقًا الآن مع Baseline أيضًا.

للحصول على واجهة المستخدم الأساسية الجديدة، يجب الترقية إلى الإصدار 1.100 أو إصدار أحدث من VS Code. تعمل كل الميزات بدون الحاجة إلى أي إضافات أو إعدادات إضافية.

عند تمرير مؤشر الماوس فوق إحدى ميزات الويب في أحدث إصدار من VS Code، ستظهر لك حالة Baseline الخاصة بها. ولإعطائك فكرة عن المدة التي كانت فيها الميزة متوافقة، سيخبرك VS Code أيضًا بالسنة التي أصبحت فيها متوافقة مع Baseline. أو بالنسبة إلى الميزات التي لم تصبح بعد جزءًا من Baseline، سيتم إعلامك بالمتصفّحات التي لم يتم تنفيذ الميزة فيها بالكامل بعد.

في الإصدارات السابقة من VS Code، لم يكن هذا الأمر سهلاً. يتطلّب الأمر بعض التفكير لمعرفة المتصفّحات غير المدرَجة في قائمة إصدارات المتصفّحات المتوافقة. ربما كان الجزء الأقل وضوحًا هو المدة التي كانت فيها الميزة متاحة على جميع المتصفّحات. لذلك، عليك معرفة تاريخ إصدار كل نسخة، وهو أمر غير معروف على نطاق واسع. لحسن الحظ، يتم أخذ كل ذلك في الاعتبار عند تحديد حالة "خط الأساس" والسنة.

يتضمّن هذا الإصدار أيضًا ميزة جديدة تمامًا. في السابق، كان بإمكانك عرض بيانات توافق المتصفّح مع خصائص CSS فقط. كان ذلك مفيدًا بشكل خاص نظرًا إلى الوتيرة السريعة التي يتم بها طرح ميزات CSS الجديدة كل عام. ولكن هناك الكثير من الابتكارات في HTML أيضًا. اعتبارًا من هذا الإصدار، سيبدأ VS Code أيضًا في عرض معلومات حول التوافق مع المتصفح لعناصر HTML وسماتها من حيث حالة Baseline.

على سبيل المثال، تم طرح سمة الإدخال autocorrect في متصفّحها الأول، Firefox، قبل شهرَين فقط. من المفيد أن تتمكّن من الحصول على ملاحظات فورية تفيد بأنّ الميزة متاحة بشكل محدود، ما يتيح لك معرفة الأماكن التي ستعمل فيها أو لن تعمل فيها. في هذه الحالة تحديدًا، لا يضرّ استخدامها في المتصفحات غير المتوافقة، لذا يمكنك استخدامها.

لا تتدهور ميزات HTML الأخرى، مثل العنصر dialog، بنفس الطريقة السلسة التي تتدهور بها ميزة autocorrect. لذا، من المطمئن أن تتمكّن من استدعاء dialog البطاقة المنبثقة عند التمرير وأن ترى أنّها كانت في الواقع Baseline منذ عام 2022 ويُعتقد أنّها متاحة على نطاق واسع على جميع المتصفّحات الرئيسية. يجب أن يمنحك هذا النوع من التقييم الثقة لاعتماد ميزات كنت تعتقد أنّها متطورة جدًا.

واجهة برمجة التطبيقات Popover API هي مثال آخر على ميزة HTML التي تمّت إضافتها إلى Baseline أيضًا، ولكن منذ عام 2024 فقط، لذا لا تزال تُصنّف على أنّها متاحة حديثًا. وهذا يعني أنّه على الرغم من أنّ هذه الميزة متوافقة مع جميع المتصفحات الرئيسية، إلا أنّها لم تستوفِ بعد شرط الـ 2.5 عام المطلوب لتصبح متاحة على نطاق واسع. لذا، ننصحك بتوخّي المزيد من الحذر قبل طرح هذه الميزة لجميع المستخدمين.

يُعدّ توفّر هذه المعلومات في VS Code عاملاً مهمًا في تعزيز الإنتاجية. ولكن ماذا لو لم يكن عليك حتى تمرير مؤشر الماوس فوق إحدى الميزات لمعرفة ما إذا كانت Baseline؟ ويتم ذلك باستخدام أداة منفصلة ولكنها ذات صلة: أدوات التدقيق.

على سبيل المثال، يمكن لإضافة ESLint في VS Code أن تفحص ملفات HTML وCSS وتضيف خطوطًا متعرّجة تحت أي ميزات لم تصبح بعد جزءًا من Baseline. يتم ذلك من خلال قواعد use-baseline التي تمت إضافتها مؤخرًا من المكوّنين الإضافيين HTML ESLint وESLint for CSS. تتوفّر قاعدة مشابهة أيضًا في Stylelint، إذا كنت مهتمًا بذلك. بالطبع، هذه مجرد واحدة من العديد من مزايا أدوات التدقيق، ولكنها توضّح مدى تكاملها مع البطاقات المنبثقة الجديدة المتوافقة مع Baseline.

إذا كنت تستخدم VS Code، آمل أن تجرّب البطاقات المنبثقة الجديدة. وإذا لم تكن من مستخدمي VS Code، لديّ بعض الأخبار السارّة. يتم إما إنشاء العديد من بيئات التطوير المتكاملة (IDE) من Code - OSS (الإصدار المفتوح المصدر من VS Code) أو تعتمد على خوادم اللغة نفسها التي تشغّل بطاقات التمرير الخاصة بلغة HTML وCSS. قد تستغرق ترقية بيئات التطوير المتكاملة هذه إلى أحدث إصدار أسابيع أو أشهر، ولكن عند ترقيتها، من المفترض أن يتم تلقائيًا دمج واجهة المستخدم الأساسية الجديدة:

• VSCodium
• Firebase Studio
• المؤشر
• التزحلق على المياه بشراع
• Zed
• Eclipse Theia
• Trae
• GitHub codespaces
• مساحات عمل GitLab
• Replit
• ‫StackBlitz (Bolt)

تعمل JetBrains أيضًا على دمج Baseline مع جميع بيئات التطوير المتكاملة المستندة إلى IntelliJ، بدءًا من WebStorm. سنتحدّث عن ذلك بالتفصيل في منشور منفصل على المدونة، لذا ترقَّبوا جديدنا.

تتوفّر ميزة Baseline في المزيد من أدوات ومراجع المطوّرين، وتُعدّ عمليات الدمج الجديدة هذه في بيئات التطوير المتكاملة (IDE) التي يقودها VS Code مثيرة للاهتمام بشكل خاص. نحن نقضي الكثير من الوقت في بيئات التطوير المتكاملة، وستساعدنا إمكانية الوصول إلى بيانات Baseline هذه بسهولة في توفير المزيد من الوضوح والاتساق بين الأدوات في سير عمل التطوير. للمزيد من المعلومات حول Baseline وعمليات دمج الأدوات الأخرى المشابهة، يمكنك الانتقال إلى دليل Baseline للاطّلاع على المزيد من المراجع.