Publié le 12 mars 2025. Dernière mise à jour : 26 mars 2025
ESLint est depuis longtemps le linter préféré pour JavaScript. Il propose différents paramètres et règles qui aident les développeurs à appliquer un style de qualité pour JavaScript dans leurs projets. Récemment, ESLint a ajouté la prise en charge du linting CSS dans les projets, en proposant des règles supplémentaires pour vérifier certains aspects des feuilles de style.
Dans le cadre du lancement de la prise en charge de CSS, ESLint propose désormais la règle require-baseline, qui vous permet de spécifier le seuil de référence que vous souhaitez utiliser lors du linting CSS dans vos projets. Dans cet article rapide, vous allez apprendre à utiliser cette règle pour vous assurer que votre CSS respecte les seuils de référence "Nouveau" et "Largement disponible".
Utiliser ESLint pour appliquer les fonctionnalités CSS de référence
Si vous avez déjà utilisé ESLint, le processus d'ajout du linting CSS à votre projet devrait être assez rapide. Pour commencer, installez le package @eslint/css pour votre projet :
npm install @eslint/css --save-dev
Une fois installé, vous pourrez ajouter la prise en charge du linting CSS à votre projet en important le package @eslint/css dans votre configuration ESLint existante :
// 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"
}]
},
},
];
Bien que le linting CSS soit utile en soi, la valeur ajoutée qu'ESLint offre dans ce cas est due à la règle require-baseline du linter. Dans l'extrait de code précédent, des avertissements sont générés chaque fois qu'une fonctionnalité qui n'est pas largement disponible dans la référence est détectée. Cela est spécifié par la propriété available de la règle, qui accepte également la valeur "newly" pour s'assurer que toutes les fonctionnalités CSS utilisées sont au moins disponibles dans la référence.
Une fois votre configuration définie, vous pouvez exécuter ESLint à la racine de votre projet comme suit pour linter le CSS de votre projet :
npx eslint
Une fois terminé, ESLint fournit tous les avertissements concernant le CSS de votre projet, qui se présentent comme suit :
/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
L'un des principaux avantages de cette fonctionnalité d'ESLint est que vous pouvez l'utiliser dans n'importe quel workflow d'outillage qui utilise ESLint. Par exemple, si vous utilisez webpack, vous pouvez le configurer pour qu'il génère la sortie du linter lors des builds de projet à l'aide de 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"]
})
]
};
Grâce à ces nouvelles fonctionnalités utiles d'ESLint, vous pouvez désormais vous assurer que vos projets utilisent les fonctionnalités CSS de référence sans trop d'efforts. N'hésitez pas à tenter votre chance. Vous serez peut-être surpris de découvrir certaines des fonctionnalités de référence utilisées dans votre projet. Pour en savoir plus sur le fonctionnement de cette fonctionnalité, consultez la documentation de la règle require-baseline rule.