Data publikacji: 12 marca 2025 r.
ESLint od dawna jest preferowanym linterem do JavaScriptu. Oferuje on różne ustawienia i reguły, które pomagają deweloperom wymuszać dobry styl JavaScriptu w ich projektach. Niedawno ESLint udostępnił obsługę sprawdzania kodu CSS w projektach, oferując dodatkowe reguły do sprawdzania aspektów arkuszy stylów.
W ramach wprowadzania obsługi CSS ESLint oferuje teraz regułę require-baseline, która umożliwia określenie progu podstawowego, którego chcesz używać podczas sprawdzania kodu CSS w projektach. Z tego krótkiego posta dowiesz się, jak zastosować tę regułę, aby zapewnić, że usługa porównywania cen spełnia progi dostępności w ramach wersji nowości i wersji szeroko dostępnych.
Jak używać ESLint do wymuszania funkcji Baseline CSS
Jeśli używasz ESLint, dodanie do projektu sprawdzania kodu CSS nie powinien być skomplikowany. Aby rozpocząć, zainstaluj pakiet @eslint/css w projekcie:
npm install @eslint/css --save-dev
Po zainstalowaniu możesz dodać do projektu obsługę sprawdzania kodu CSS, importując pakiet @eslint/css do istniejącej konfiguracji ESLint:
// 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"
}]
},
},
];
Linting w przypadku CSS jest przydatny sam w sobie, ale ESLint oferuje dodatkową wartość dzięki regułom require-baseline. W poprzednim fragmencie kodu ostrzeżenia są generowane, gdy pojawia się funkcja, która nie jest dostępna w ramach domyślnych ustawień. Jest to określone w atrybucie available reguły, który może też przyjmować wartość "newly", aby zapewnić, że wszystkie używane funkcje porównywania cen są co najmniej w wersji Nowe dostępne.
Po skonfigurowaniu konfiguracji możesz uruchomić ESLint w katalogu głównym projektu, aby przeanalizować kod CSS projektu:
npx eslint
Po zakończeniu procesu ESLint wyświetli ostrzeżenia dotyczące kodu CSS projektu, które wyglądają tak:
/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
Jedną z zalet tej funkcji jest to, że możesz jej używać w ramach dowolnego procesu obsługi narzędzia, który korzysta z ESLint. Jeśli na przykład używasz webpacka, możesz ustawić go tak, aby podczas kompilacji projektu generował dane wyjściowe lintera, używając polecenia 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"]
})
]
};
Dzięki tym przydatnym nowościom w ESLint możesz teraz bez większego wysiłku zadbać o to, aby Twoje projekty korzystały z funkcji CSS Baseline. Spróbuj, jeśli chcesz. Możesz być zaskoczony, gdy odkryjesz, że w Twoim projekcie są używane niektóre funkcje bazy linii bazowej. Więcej informacji o tym, jak to działa, znajdziesz w dokumentacji reguły require-baseline.