Опубликовано: 12 марта 2025 г.
ESLint уже давно является предпочтительным линтером для JavaScript, предлагая множество настроек и правил, которые помогают разработчикам применять хороший стиль JavaScript в своих проектах. Недавно ESLint предоставил поддержку проверки CSS в проектах, предлагая дополнительные правила для проверки аспектов таблиц стилей.
В рамках запуска поддержки CSS ESLint теперь предлагает правило require-baseline , которое позволяет вам указать, какой порог Baseline вы хотели бы использовать при анализе CSS в своих проектах. В этом кратком посте вы узнаете, как использовать это правило, чтобы гарантировать, что ваш CSS соответствует базовым пороговым значениям для новых и широко доступных.
Как использовать 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. Например, если вы используете веб-пакет, вы можете заставить его выдавать выходные данные линтера во время сборки проекта, используя 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 вы теперь сможете без особых дополнительных усилий убедиться, что в ваших проектах используются базовые функции CSS. Попробуйте! Вы можете быть удивлены, обнаружив некоторые базовые функции, используемые в вашем проекте. Подробнее о том, как это работает, читайте в документации к правилу require-baseline .