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

Jeremy Wagner

תאריך פרסום: 12 במרץ 2025, תאריך העדכון האחרון: 26 במרץ 2025

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

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

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

אם השתמשתם ב-ESLint בעבר, התהליך של הוספת CSS linting לפרויקט שלכם אמור להיות מהיר למדי. כדי להתחיל, מתקינים את חבילת @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"
      }]
    },
  },
];

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