Publié le 12 mars 2025
ESLint est depuis longtemps le linter de référence pour JavaScript. Il propose divers paramètres et règles qui aident les développeurs à appliquer un style correct pour JavaScript dans leurs projets. Récemment, ESLint a ajouté la prise en charge de l'analyse CSS dans les projets, offrant des règles supplémentaires pour vérifier certains aspects des feuilles de style.
Pour lancer la prise en charge du 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 de l'analyse lint du CSS dans vos projets. Dans cet article rapide, vous allez découvrir comment utiliser cette règle pour vous assurer que votre CSS répond aux 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 de linting CSS à votre projet devrait être relativement 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 de l'analyse 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 l'analyse lint pour le CSS soit utile en soi, ESLint offre une valeur ajoutée en la faisant via la règle require-baseline de l'analyseur lint. Dans l'extrait de code précédent, des avertissements sont générés chaque fois qu'une fonctionnalité qui n'est pas disponible dans la référence est rencontrée. Cette valeur est spécifiée via la propriété available de la règle, qui accepte également une valeur de "newly" pour s'assurer que toutes les fonctionnalités CSS utilisées sont au moins disponibles en version de référence.
Une fois la configuration configurée, vous pouvez exécuter ESLint à la racine de votre projet comme suit pour analyser le CSS de votre projet:
npx eslint
Une fois l'analyse terminée, ESLint fournit des avertissements sur le CSS de votre projet, qui se présente 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 avantages de la publication de cette fonctionnalité par ESLint est que vous pouvez l'utiliser dans n'importe quel workflow d'outil qui utilise ESLint. Par exemple, si vous utilisez webpack, vous pouvez l'inviter à afficher la sortie du linter lors de la compilation du 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 pourrez désormais vous assurer que vos projets utilisent les fonctionnalités CSS de référence sans trop d'effort. N'hésitez pas à tenter votre chance. Vous pourriez être surpris de découvrir certaines des fonctionnalités de référence utilisées dans votre projet. Pour en savoir plus sur son fonctionnement, consultez la documentation de la règle require-baseline.