Fecha de publicación: 12 de marzo de 2025
ESLint ha sido durante mucho tiempo el lint 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 envió compatibilidad con la limpieza de CSS en proyectos, lo que ofrece reglas adicionales para verificar aspectos de los diseños de página.
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 analizas CSS en tus proyectos. En esta publicación breve, aprenderás a usar esta regla para asegurarte de que tu CSS cumpla con los umbrales de disponibilidad reciente y amplia del modelo de referencia.
Cómo usar ESLint para aplicar funciones de CSS de Baseline
Si ya usaste ESLint, el proceso para agregar 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 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 para CSS es útil en sí mismo, el valor agregado que ofrece ESLint al hacerlo es a través de la regla require-baseline del lint. En el fragmento de código anterior, se generan advertencias cada vez que se encuentra una función que no está disponible de forma general en Baseline. 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 usan sean, al menos, del nivel Baseline Newly available.
Una vez que hayas configurado tu configuración, puedes ejecutar ESLint en la raíz de tu proyecto de la siguiente manera para lintear el CSS de tu proyecto:
npx eslint
Una vez que termine, 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 lint 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 incorporaciones útiles a ESLint, ahora podrás asegurarte de que tus proyectos usen funciones de CSS de Baseline sin mucho esfuerzo adicional. Inténtelo. Es posible que te sorprendas al 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.