Поддержка CSS и Baseline включена в ESLint.

Jeremy Wagner

Опубликовано: 12 марта 2025 г., Последнее обновление: 26 марта 2025 г.

ESLint уже давно является предпочтительным линтером для JavaScript, предлагая множество настроек и правил, которые помогают разработчикам обеспечивать правильный стиль для JavaScript в своих проектах. Недавно ESLint добавил поддержку проверки CSS в проектах, предложив дополнительные правила для проверки аспектов таблиц стилей.

В рамках запуска поддержки CSS, ESLint теперь предлагает правило require-baseline , которое позволяет указать, какой пороговый уровень Baseline вы хотите использовать при проверке CSS в ваших проектах. В этой короткой статье вы узнаете, как использовать это правило, чтобы убедиться, что ваш CSS соответствует новым и широко доступным пороговым значениям Baseline.

Как использовать ESLint для проверки наличия базовых функций 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 в корневой директории вашего проекта следующим образом, чтобы проверить 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 .