W ESLint udostępniono obsługę usług porównywania cen i baseline

Jeremy Wagner

Opublikowano: 12 marca 2025 r., ostatnia aktualizacja: 26 marca 2025 r.

ESLint od dawna jest preferowanym narzędziem do sprawdzania kodu JavaScript. Oferuje wiele ustawień i reguł, które pomagają deweloperom stosować w projektach dobre praktyki dotyczące stylu kodu JavaScript. Niedawno ESLint wprowadził obsługę sprawdzania kodu CSS w projektach, oferując dodatkowe reguły sprawdzania arkuszy stylów.

W ramach wprowadzenia obsługi CSS ESLint oferuje teraz regułę require-baseline, która pozwala określić, jakiego progu Baseline chcesz używać podczas sprawdzania kodu CSS w projektach. Z tego krótkiego posta dowiesz się, jak używać tej reguły, aby mieć pewność, że Twój kod CSS spełnia progi Baseline Newly i Widely.

Jak używać ESLint do wymuszania funkcji CSS Baseline

Jeśli masz już doświadczenie z ESLint, dodanie sprawdzania kodu CSS do projektu powinno być dość szybkie. Aby rozpocząć, zainstaluj w projekcie pakiet @eslint/css:

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"
      }]
    },
  },
];

Sprawdzanie kodu CSS jest samo w sobie przydatne, ale wartość dodaną ESLint w tym zakresie zapewnia reguła require-baseline. W poprzednim fragmencie kodu ostrzeżenia są generowane, gdy zostanie wykryta funkcja, która nie jest dostępna w Baseline Widely. Jest to określone przez właściwość available reguły, która akceptuje też wartość "newly", aby mieć pewność, że wszystkie używane funkcje CSS są co najmniej dostępne w Baseline Newly.

Po skonfigurowaniu możesz uruchomić ESLint w katalogu głównym projektu, aby sprawdzić kod CSS projektu:

npx eslint

Po zakończeniu 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 wprowadzenia tej funkcji przez ESLint jest to, że możesz jej używać w dowolnym procesie roboczym, który korzysta z ESLint. Jeśli na przykład używasz webpacka, możesz sprawić, aby podczas kompilacji projektu wyświetlał dane wyjściowe narzędzia do sprawdzania kodu, używając 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 nowym funkcjom ESLint możesz teraz bez większego wysiłku mieć pewność, że Twoje projekty używają funkcji CSS Baseline. Spróbuj, jeśli chcesz. Możesz się zdziwić, gdy odkryjesz niektóre funkcje Baseline używane w Twoim projekcie. Więcej informacji o tym, jak to działa, znajdziesz w dokumentacji reguły require-baseline rule.