تم توفير دعم لخدمة مقارنة الأسعار (CSS) وBaseline في ESLint

Jeremy Wagner

تاريخ النشر: 12 آذار (مارس) 2025

لطالما كان ESLint أداة التدقيق المفضّلة في JavaScript، حيث يوفّر مجموعة متنوعة من الإعدادات والقواعد التي تساعد المطوّرين في فرض أسلوب جيد لـ JavaScript في مشاريعهم. أطلقت ESLint مؤخرًا ميزة فحص CSS في المشاريع، ما يوفّر قواعد إضافية للتحقّق من جوانب أوراق الأنماط.

كجزء من إطلاق ميزة دعم CSS، يوفّر ESLint الآن القاعدة require-baseline التي تتيح لك تحديد الحدّ الأدنى لقاعدة البيانات الذي تريد استخدامه عند فحص CSS في مشاريعك. في هذه المشاركة السريعة، ستتعرّف على كيفية استخدام هذه القاعدة للتأكّد من أنّ ملفات CSS تستوفي الحدّ الأدنى لمعايير "الصفحات المتوفّرة حديثًا على نطاق واسع".

كيفية استخدام ESLint لفرض ميزات Baseline CSS

إذا سبق لك استخدام ESLint، من المفترض أن تكون عملية إضافة فحص CSS إلى مشروعك سريعة إلى حدٍ ما. للبدء، ثبِّت حزمة @eslint/css لمشروعك:

npm install @eslint/css --save-dev

بعد التثبيت، ستتمكّن من إضافة ميزة التدقيق النحوي في CSS إلى مشروعك من خلال استيراد حزمة @eslint/css إلى إعدادات ESLint الحالية:

// eslint.config.js
import css from "@eslint/css";

export default [
  // Lint css files
  {
    files: ["src/css/**/*.css"],
    plugins: {
      css,
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to ensure they are using
      // only Baseline Widely available features:
      "css/require-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
];

على الرغم من أنّ فحص CSS مفيد بحد ذاته، فإنّ القيمة المضافة التي يوفّرها ESLint عند إجراء ذلك هي من خلال قاعدة require-baseline الخاصة ببرنامج التدقيق. في مقتطف الرمز السابق، يتم إنشاء التحذيرات عند العثور على ميزة غير متاحة على نطاق واسع في "القاعدة الأساسية". يتم تحديد ذلك من خلال سمة available للقاعدة، والتي تقبل أيضًا القيمة "newly" لضمان أن تكون جميع ميزات CSS المستخدَمة على الأقل في المستوى الأساسي للميزات الجديدة.

بعد إعداد ملف الإعدادات، يمكنك تشغيل ESLint في جذر مشروعك على النحو التالي لفحص ملف CSS الخاص بمشروعك:

npx eslint

بعد الانتهاء، سيقدّم ESLint أي تحذيرات بشأن CSS في مشروعك، والتي تظهر على النحو التالي:

/var/www/my-cool-web-project/src/css/styles.css
  269:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  427:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  444:12  warning  Value 'contents' of property 'display' is not a widely available baseline feature  css/require-baseline
  500:3   warning  Property 'resize' is not a widely available baseline feature                       css/require-baseline
  573:5   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline

من النتائج الرائعة التي تحقّقت من خلال طرح ESLint لهذه الوظيفة أنّه يمكنك استخدامها في أيّ سير عمل للأدوات يستخدم ESLint. على سبيل المثال، إذا كنت تستخدم webpack، يمكنك جعله يعرض مخرجات مدقّق الأخطاء أثناء عمليات إنشاء المشاريع باستخدام eslint-webpack-plugin:

// Import the ESLint plugin:
import ESLintPlugin from "eslint-webpack-plugin";

// Webpack config:
export default {
  // Prior config code omitted...
  plugins: [
    new ESLintPlugin({
      // Add the `"css"` extension to ensure
      // CSS files are linted as well:
      extensions: ["js", "css"]
    })
  ]
};

من خلال هذه الإضافات الجديدة المفيدة إلى ESLint، ستتمكّن الآن من التأكّد من أنّ مشاريعك تستخدم ميزات Baseline CSS بدون الحاجة إلى بذل الكثير من الجهد. ننصحك بتجربة ذلك. قد تفاجأ باكتشاف بعض ميزات "القاعدة الأساسية" المستخدَمة في مشروعك. لمزيد من المعلومات عن آلية عمل هذه الميزة، يُرجى الاطّلاع على مستندات قاعدة require-baseline.