تم شحن دعم CSS و Baseline في ESLINT | بلوق | web.dev

تم شحن دعم CSS و Baseline في ESLINT

ابق منظمًا مع المجموعات

احفظ وتصنيف المحتوى بناءً على تفضيلاتك.

تم النشر: 12 مارس 2025 ، آخر تحديث: 26 مارس 2025

لطالما كانت ESLINT هي المبتذلة المفضلة لـ JavaScript ، حيث تقدم مجموعة متنوعة من الإعدادات والقواعد التي تساعد المطورين على فرض أسلوب جيد لـ JavaScript في مشاريعهم. في الآونة الأخيرة ، قامت ESLINT بشحن الدعم لبطانة CSS في المشاريع ، حيث تقدم قواعد إضافية للتحقق من جوانب أوراق الأنماط.

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

كيفية استخدام ESLINT لفرض ميزات 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 في القيام بذلك هي من خلال Linter’s 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 ، فيمكنك الحصول عليها لتصحيح إخراج Linter أثناء بناء المشروع باستخدام 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 ، ستتمكن الآن من التأكد من أن مشاريعك تستخدم ميزات CSS الأساسية دون جهد إضافي. أعطها لقطة! قد تفاجأ باكتشاف بعض الميزات الأساسية المستخدمة في مشروعك. لمزيد من المعلومات حول كيفية عمل هذا ، اقرأ وثائق require-baseline قاعدة.