Veröffentlicht: 12. März 2025
ESLint ist seit langem der bevorzugte Linter für JavaScript. Er bietet eine Vielzahl von Einstellungen und Regeln, mit denen Entwickler einen guten Stil für JavaScript in ihren Projekten durchsetzen können. Vor Kurzem wurde ESLint um Unterstützung für das CSS-Linting in Projekten erweitert. Es bietet jetzt zusätzliche Regeln für die Prüfung von Aspekten von Stylesheets.
Im Rahmen der Einführung der CSS-Unterstützung bietet ESLint jetzt die Regel require-baseline, mit der Sie angeben können, welchen Grenzwert Sie beim Linieren von CSS in Ihren Projekten verwenden möchten. In diesem kurzen Beitrag erfahren Sie, wie Sie mit dieser Regel dafür sorgen, dass Ihre CSS die Grenzwerte für die Baseline „Neu“ und „Weitgehend verfügbar“ erfüllt.
Baseline-CSS-Funktionen mit ESLint erzwingen
Wenn Sie ESLint bereits verwendet haben, sollte das Hinzufügen von CSS-Linting zu Ihrem Projekt relativ schnell gehen. Installieren Sie zuerst das @eslint/css-Paket für Ihr Projekt:
npm install @eslint/css --save-dev
Nach der Installation können Sie Ihrem Projekt CSS-Linting hinzufügen, indem Sie das @eslint/css-Paket 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 für CSS ist zwar an sich nützlich, aber der Mehrwert von ESLint besteht in der require-baseline-Regel des Lint-Tools. Im vorherigen Code-Snippet werden Warnungen generiert, wenn eine Funktion gefunden wird, die nicht allgemein verfügbar ist. Dies wird über das Attribut available der Regel angegeben. Es ist auch ein Wert von "newly" zulässig, um sicherzustellen, dass alle verwendeten CSS-Funktionen mindestens der Version „Neu verfügbar“ entsprechen.
Nachdem Sie die Konfiguration eingerichtet haben, können Sie ESLint im Stammverzeichnis Ihres Projekts ausführen, um das CSS Ihres Projekts zu linten:
npx eslint
Anschließend zeigt ESLint alle Warnungen zum CSS Ihres Projekts an, die in etwa so aussehen:
/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 ist, dass Sie sie in jedem Tool-Workflow verwenden können, der ESLint verwendet. Wenn Sie beispielsweise webpack verwenden, können Sie die Linter-Ausgabe beim Erstellen des Projekts 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 zu ESLint können Sie jetzt ohne großen Aufwand dafür sorgen, 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 dazu finden Sie in der Dokumentation zur require-baseline-Regel.