Veröffentlicht am 12. März 2025, zuletzt aktualisiert am 26. März 2025
ESLint ist seit Langem der bevorzugte Linter für JavaScript und bietet eine Vielzahl von Einstellungen und Regeln, mit denen Entwickler einen guten Stil für JavaScript in ihren Projekten erzwingen können. Vor Kurzem wurde in ESLint die Unterstützung für das Linting von CSS in Projekten eingeführt. Dabei wurden zusätzliche Regeln zum Überprüfen von Aspekten von Stylesheets hinzugefügt.
Im Rahmen der Einführung der CSS-Unterstützung bietet ESLint jetzt die Regel require-baseline, mit der Sie angeben können, welcher Baseline-Schwellenwert beim Linting von CSS in Ihren Projekten verwendet werden soll. In diesem kurzen Beitrag erfahren Sie, wie Sie diese Regel verwenden können, um sicherzustellen, dass Ihr CSS die Schwellenwerte „Baseline Newly available“ und „Baseline Widely available“ erfüllt.
ESLint verwenden, um Baseline-CSS-Funktionen zu erzwingen
Wenn Sie ESLint bereits verwendet haben, sollte das Hinzufügen von CSS-Linting zu Ihrem Projekt relativ schnell gehen. Installieren Sie zuerst das Paket @eslint/css für Ihr Projekt:
npm install @eslint/css --save-dev
Nach der Installation können Sie Ihrem Projekt CSS-Linting-Unterstützung hinzufügen, indem Sie das Paket @eslint/css in Ihre vorhandene ESLint-Konfiguration importieren:
// 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"
}]
},
},
];
Das Linting von CSS ist an sich schon nützlich, aber der Mehrwert von ESLint liegt in der Regel require-baseline des Linters. Im vorherigen Code-Snippet werden Warnungen generiert, wenn eine Funktion gefunden wird, die nicht „Baseline Widely available“ ist. Dies wird über die Eigenschaft available der Regel angegeben, die auch den Wert "newly" akzeptiert, um sicherzustellen, dass alle verwendeten CSS-Funktionen mindestens „Baseline Newly available“ sind.
Sobald Sie Ihre Konfiguration eingerichtet haben, können Sie ESLint im Stammverzeichnis Ihres Projekts ausführen, um das CSS Ihres Projekts zu linten:
npx eslint
Nach Abschluss des Vorgangs gibt ESLint alle Warnungen zum CSS Ihres Projekts aus. Das sieht so aus:
/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
Ein großer Vorteil dieser Funktion von ESLint ist, dass Sie sie in jedem Tooling-Workflow verwenden können, in dem ESLint verwendet wird. Wenn Sie beispielsweise webpack verwenden, können Sie die Linter-Ausgabe während der Projekterstellung mit eslint-webpack-plugin ausgeben lassen:
// 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"]
})
]
};
Mit diesen nützlichen neuen Ergänzungen von ESLint können Sie jetzt ohne viel Aufwand sicherstellen, dass in Ihren Projekten Baseline-CSS-Funktionen verwendet werden. Probieren Sie es einfach aus. Sie werden vielleicht überrascht sein, welche Baseline-Funktionen in Ihrem Projekt verwendet werden. Weitere Informationen zur Funktionsweise finden Sie in der Dokumentation zur Regel require-baseline.