Publicación: 12 de marzo de 2025, Última actualización: 26 de marzo de 2025
ESLint ha sido durante mucho tiempo el linter preferido para JavaScript, ya que ofrece una variedad de parámetros de configuración y reglas que ayudan a los desarrolladores a aplicar un buen estilo para JavaScript en sus proyectos. Recientemente, ESLint lanzó compatibilidad con el linting de CSS en proyectos, y ofrece reglas adicionales para verificar aspectos de las hojas de estilo.
Como parte del lanzamiento de la compatibilidad con CSS, ESLint ahora ofrece la regla require-baseline, que te permite especificar qué umbral de Baseline deseas usar cuando realizas el linting de CSS en tus proyectos. En esta breve publicación, aprenderás a usar esta regla para asegurarte de que tu CSS cumpla con los umbrales de Baseline Newly y Widely available.
Cómo usar ESLint para aplicar funciones de CSS de Baseline
Si ya usaste ESLint, el proceso para agregar el linting de CSS a tu proyecto debería ser bastante rápido. Para comenzar, instala el paquete @eslint/css para tu proyecto:
npm install @eslint/css --save-dev
Una vez instalado, podrás agregar compatibilidad con el linting de CSS a tu proyecto importando el paquete @eslint/css a tu configuración de ESLint existente:
// 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"
}]
},
},
];
Si bien el linting de CSS es útil en sí mismo, el valor agregado que ofrece ESLint al hacerlo es a través de la regla require-baseline del linter. En el fragmento de código anterior, se generan advertencias cada vez que se encuentra una función que no está disponible en Baseline Widely. Esto se especifica a través de la propiedad available de la regla, que también acepta un valor de "newly" para garantizar que todas las funciones de CSS que se usen estén disponibles al menos en Baseline Newly.
Una vez que hayas configurado tu configuración, puedes ejecutar ESLint en la raíz de tu proyecto de la siguiente manera para realizar el linting del CSS de tu proyecto:
npx eslint
Una vez que termines, ESLint proporcionará advertencias sobre el CSS de tu proyecto, que se verá de la siguiente manera:
/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
Un gran resultado de que ESLint envíe esta funcionalidad es que puedes usarla en cualquier flujo de trabajo de herramientas que use ESLint. Por ejemplo, si usas webpack, puedes hacer que muestre el resultado del linter durante las compilaciones del proyecto con 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"]
})
]
};
Con estas nuevas y útiles incorporaciones a ESLint, ahora podrás asegurarte de que tus proyectos usen funciones de CSS de Baseline sin mucho esfuerzo adicional. Inténtelo. Te sorprenderá descubrir algunas de las funciones de Baseline que se usan en tu proyecto. Para obtener más información sobre cómo funciona, lee la documentación de la regla require-baseline rule.