公開日: 2025 年 3 月 12 日、最終更新日: 2025 年 3 月 26 日
ESLint は、JavaScript の推奨リンターとして長らく使用されてきました。さまざまな設定とルールが用意されており、開発者はこれらを利用してプロジェクトで JavaScript の適切なスタイルを適用できます。最近、ESLint はプロジェクトでの CSS の lint をサポートするようになりました。これにより、スタイルシートのさまざまな側面をチェックするためのルールが追加されました。
CSS サポートのリリースの一環として、ESLint に require-baseline ルールが追加されました。このルールを使用すると、プロジェクトで CSS を lint するときに使用する Baseline のしきい値を指定できます。このクイック投稿では、このルールを使用して、CSS が Baseline Newly and Widely available のしきい値を満たしていることを確認する方法について説明します。
ESLint を使用して Baseline CSS 機能を適用する方法
ESLint を使用したことがある場合は、プロジェクトに CSS リンティングを追加するプロセスは比較的迅速に行えます。まず、プロジェクトに @eslint/css パッケージをインストールします。
npm install @eslint/css --save-dev
インストールが完了したら、既存の ESLint 構成に @eslint/css パッケージをインポートすることで、プロジェクトに CSS linting のサポートを追加できます。
// 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"
}]
},
},
];
CSS の lint はそれ自体が有用ですが、ESLint が提供する付加価値は、linter の require-baseline ルールによるものです。上記のコード スニペットでは、Baseline Widely available ではない機能が検出されるたびに警告が生成されます。これはルールの available プロパティで指定します。このプロパティでは、使用するすべての CSS 機能が少なくとも Baseline Newly available であることを保証する "newly" の値も受け入れます。
構成を設定したら、次のようにプロジェクトのルートで ESLint を実行して、プロジェクトの CSS をリントできます。
npx eslint
完了すると、ESLint はプロジェクトの CSS に関する警告を次のように表示します。
/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
ESLint がこの機能を搭載したことで、ESLint を使用するあらゆるツールワークフローでこの機能を使用できるようになりました。たとえば、webpack を使用している場合は、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"]
})
]
};
ESLint に追加されたこれらの便利な新機能により、プロジェクトで Baseline CSS 機能が使用されていることを、あまり手間をかけずに確認できるようになりました。ぜひお試しください。プロジェクトで使用されているベースライン機能の中には、驚くようなものもあるかもしれません。この仕組みについて詳しくは、require-baseline ルールのドキュメントをご覧ください。