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

جرمی واگنر

منتشر شده: ۱۲ مارس ۲۰۲۵، آخرین به‌روزرسانی: ۲۶ مارس ۲۰۲۵

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

به عنوان بخشی از راه‌اندازی پشتیبانی CSS، ESLint اکنون قانون require-baseline را ارائه می‌دهد که به شما امکان می‌دهد هنگام linting CSS در پروژه‌های خود، آستانه Baseline مورد نظر خود را مشخص کنید. در این پست کوتاه، یاد خواهید گرفت که چگونه از این قانون استفاده کنید تا مطمئن شوید CSS شما آستانه‌های Baseline Newly و Widely available را برآورده می‌کند.

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

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

npm install @eslint/css --save-dev

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

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

پس از تنظیم پیکربندی، می‌توانید ESLint را در ریشه پروژه خود مانند زیر اجرا کنید تا CSS پروژه خود را Lint کنید:

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 را در طول ساخت پروژه تولید کنید:

// 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 را مطالعه کنید.