ديما
03-06-2025, 06:29 PM
لطالما كان 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 أخطاءً بدلاً من ذلك في هذا السيناريو، يمكنك تغيير قيمة "warn" إلى "error"
.
بعد إعداد ملف الإعدادات، يمكنك تشغيل 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 بدون الحاجة إلى بذل الكثير من الجهد. ننصحك بتجربة ذلك. قد تفاجأ باكتشاف بعض ميزات "القاعدة الأساسية" المستخدَمة في مشروعك.
كجزء من إطلاق ميزة دعم 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 أخطاءً بدلاً من ذلك في هذا السيناريو، يمكنك تغيير قيمة "warn" إلى "error"
.
بعد إعداد ملف الإعدادات، يمكنك تشغيل 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 بدون الحاجة إلى بذل الكثير من الجهد. ننصحك بتجربة ذلك. قد تفاجأ باكتشاف بعض ميزات "القاعدة الأساسية" المستخدَمة في مشروعك.