ESLint 中已发布对 CSS 和 Baseline 的支持

Jeremy Wagner

发布时间：2025 年 3 月 12 日

ESLint 长期以来一直是首选的 JavaScript 代码检查工具，它提供了各种设置和规则，可帮助开发人员在其项目中强制执行良好的 JavaScript 样式。最近，ESLint 发布了对项目中 CSS 代码检查的支持，提供了用于检查样式表方面的其他规则。

作为发布 CSS 支持的一部分，ESLint 现在提供了 require-baseline 规则，该规则允许您指定在项目中检查 CSS 时要使用的 Baseline 阈值。在这篇快速文章中，您将学习如何使用此规则来确保您的 CSS 符合 Baseline 新近可用和广泛可用阈值。

如何使用 ESLint 强制执行 Baseline CSS 功能

如果您以前使用过 ESLint，那么将 CSS 代码检查添加到项目中的过程应该相当快。要开始使用，请为您的项目安装 @eslint/css 包

npm install @eslint/css --save-dev

安装完成后，您可以通过将 @eslint/css 包导入到您现有的 ESLint 配置中，从而将 CSS 代码检查支持添加到您的项目中

// 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 代码检查本身就很有用，但 ESLint 在这方面提供的附加价值是通过代码检查工具的 require-baseline 规则实现的。在前面的代码片段中，每当遇到不属于 Baseline 广泛可用范围的功能时，都会生成警告。这是通过规则的 available 属性指定的，该属性也接受 "newly" 值，以确保使用的所有 CSS 功能至少是 Baseline 新近可用的。

配置设置完成后，您可以像这样在项目的根目录运行 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 功能，而无需增加太多额外的工作。试一试！您可能会惊讶地发现项目中使用的某些 Baseline 功能。有关其工作原理的更多信息，请阅读 require-baseline 规则的文档。