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

Jeremy Wagner

تاريخ النشر: 12 مارس 2025، تاريخ آخر تعديل: 26 مارس 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 الخاصة بالمدقّق. في مقتطف الرمز البرمجي السابق، يتم إنشاء تحذيرات كلما تمت مصادفة ميزة غير متوافقة مع Baseline Widely available. يتم تحديد ذلك من خلال السمة 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.