Visual Studio Code يدعم الآن خط الأساس | بلوق | web.dev

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

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

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

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

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

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

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

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

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

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

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

يعد وجود هذه المعلومات في VS VS Code دفعة إنتاجية رائعة. ولكن ماذا لو لم تكن بحاجة حتى إلى التحوم على ميزة لمعرفة ما إذا كان خط الأساس؟ هذا ممكن من خلال أداة منفصلة ولكن ذات صلة: المبيدات.

على سبيل المثال ، يمكن لتمديد ESLINT لـ VS CODE أن ترتبط ملفات HTML و CSS وإضافة خطوط أسطية إلى أي ميزات لم تكن أساسية بعد. هذا مدعوم من قبل المضافة مؤخرًا use-baseline قواعد من HTML ESLINT و ESLINT للمكونات الإضافية CSS. هناك قاعدة مماثلة لـ Stylelint أيضًا ، إذا كان هذا هو الشيء الخاص بك. بالطبع ، هذه مجرد واحدة من العديد من فوائد المبيدات ، ولكنها تُظهر مدى جودة تكمل البطاقات التي تدعم خط الأساس الجديد.

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

• vscodium
• استوديو Firebase
• المؤشر
• Windsurf
• zed
• الكسوف ثيا
• ترا
• Github CodeSpaces
• مساحات عمل جيتلاب
• إعادة
• Stackblitz (الترباس)

تعمل JetBrains أيضًا على دمج خط الأساس مع جميع معرفاتها المستندة إلى Intellij ، بدءًا من عاصفة الويب. سيكون لدينا المزيد لنقوله حول ذلك في منشور مدونة منفصل – تم ضبطه.

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