תמיכה ב-CSS וב-Baseline נוספה ל-ESLint

Jeremy Wagner

תאריך פרסום: 12 במרץ 2025

ESLint הוא כבר זמן רב הכלי המועדף לזיהוי שגיאות בקוד ב-JavaScript, והוא מציע מגוון של הגדרות וכללים שיעזרו למפתחים לאכוף סגנון טוב של JavaScript בפרויקטים שלהם. לאחרונה, נוספה ל-ESLint תמיכה ב-linting של CSS בפרויקטים, עם כללים נוספים לבדיקת היבטים של גיליונות סגנונות.

כחלק מהשקת התמיכה ב-CSS, ESLint מציע עכשיו את הכלל require-baseline, שמאפשר לציין את סף הבסיס שבו רוצים להשתמש כשבודקים שגיאות בקוד CSS בפרויקטים. בפוסט המהיר הזה נסביר איך להשתמש בכלל הזה כדי לוודא שהקוד של CSS עומד בערכי הסף של 'חדש' ו'זמין באופן נרחב'.

איך משתמשים ב-ESLint כדי לאכוף את התכונות של Baseline CSS

אם כבר השתמשתם ב-ESLint בעבר, תהליך ההוספה של איתור שגיאות בקוד CSS לפרויקט אמור להיות מהיר למדי. כדי להתחיל, צריך להתקין את החבילה @eslint/css בפרויקט:

npm install @eslint/css --save-dev

אחרי ההתקנה, תוכלו להוסיף לפרויקט תמיכה ב-CSS linting על ידי ייבוא החבילה @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 של ה-linter. בקטע הקוד הקודם, נוצרות אזהרות בכל פעם שנתקלים בתכונה שלא זמינה ב-Baseline באופן נרחב. הדבר מצוין באמצעות המאפיין available של הכלל, שמקבל גם את הערך "newly" כדי לוודא שכל תכונות ה-CSS שבהן נעשה שימוש הן לפחות ברמת Baseline Newly available.

אחרי שמגדירים את קובץ ה-config, אפשר להריץ את 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 כדי להציג את הפלט של ה-linter במהלך ה-build של הפרויקט:

// 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 בלי הרבה מאמץ נוסף. כדאי לנסות! יכול להיות שתגלו לראשונה שחלק מתכונות Baseline משמשות בפרויקט שלכם. למידע נוסף על האופן שבו המערכת פועלת, אפשר לעיין במסמכי התיעוד של כלל require-baseline.