ESLint 已支持 CSS 和基准

Jeremy Wagner

发布时间：2025 年 3 月 12 日

ESLint 一直是 JavaScript 的首选 lint 工具，提供各种设置和规则，帮助开发者在项目中强制执行良好的 JavaScript 编码风格。近期，ESLint 发布了对项目中 CSS lint 功能的支持，提供了用于检查样式表各个方面的其他规则。

在推出 CSS 支持功能的同时，ESLint 现在还提供了 require-baseline 规则，可让您在项目中 lint CSS 时指定要使用的基准阈值。在本简短的文章中，您将了解如何使用此规则确保您的 CSS 符合“新发布”和“广泛发布”基准阈值。

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

如果您之前使用过 ESLint，则向项目添加 CSS lint 的过程应该会相当快捷。首先，请为您的项目安装 @eslint/css 软件包：

npm install @eslint/css --save-dev

安装完成后，您就可以将 @eslint/css 软件包导入现有的 ESLint 配置，从而为项目添加 CSS lint 支持：

// 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 在执行此操作时提供的附加价值是通过 lint 检查工具的 require-baseline 规则提供的。在上面的代码段中，每当遇到未广泛提供的基准功能时，都会生成警告。这通过规则的 available 属性指定，该属性也接受 "newly" 值，以确保使用的所有 CSS 功能至少为“新推出的基准版”。

配置完成后，您可以在项目根目录中运行 ESLint，以 lint 项目的 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 在项目构建期间让其输出 lint 输出：

// 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 中新增的这些实用功能，您现在无需额外付出太多努力，即可确保您的项目使用的是基准 CSS 功能。快来试试吧！您可能会惊讶地发现，您的项目中已经在使用一些基准功能。如需详细了解其运作方式，请参阅 require-baseline 规则文档。