پشتیبانی از CSS و Baseline در ESLint ارسال شده است

جرمی واگنر

تاریخ انتشار: 12 مارس 2025

ESLint مدت‌هاست که بهترین گزینه برای جاوا اسکریپت بوده و تنظیمات و قوانین مختلفی را ارائه می‌دهد که به توسعه‌دهندگان کمک می‌کند تا سبک خوبی را برای جاوا اسکریپت در پروژه‌های خود اعمال کنند. اخیراً، ESLint پشتیبانی برای linting CSS در پروژه‌ها ارائه کرده است که قوانین بیشتری را برای بررسی جنبه‌های شیوه نامه ارائه می‌دهد.

به‌عنوان بخشی از راه‌اندازی پشتیبانی CSS، ESLint اکنون قانون require-baseline را ارائه می‌کند، که به شما امکان می‌دهد مشخص کنید که می‌خواهید از کدام آستانه خط پایه هنگام استفاده از CSS در پروژه‌های خود استفاده کنید. در این پست سریع، نحوه استفاده از این قانون را یاد خواهید گرفت تا اطمینان حاصل کنید که CSS شما آستانه های اولیه و کاملاً در دسترس را برآورده می کند.

نحوه استفاده از ESLint برای اعمال ویژگی های CSS پایه

اگر قبلاً از ESLint استفاده کرده‌اید، فرآیند افزودن CSS به پروژه شما باید نسبتاً سریع باشد. برای شروع، بسته @eslint/css را برای پروژه خود نصب کنید:

npm install @eslint/css --save-dev

پس از نصب، می‌توانید با وارد کردن بسته @eslint/css به پیکربندی ESLint موجود، پشتیبانی CSS را به پروژه خود اضافه کنید:

// 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 استفاده شده حداقل Baseline Newly در دسترس هستند.

هنگامی که پیکربندی خود را تنظیم کردید، می توانید 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 بدون تلاش اضافی استفاده می‌کنند. به آن ضربه بزنید! ممکن است از کشف برخی از ویژگی های Baseline مورد استفاده در پروژه خود شگفت زده شوید. برای کسب اطلاعات بیشتر در مورد نحوه کارکرد این روش، مستندات مربوط به قانون require-baseline را بخوانید.