ESLint 官方支持 CSS 语言

ESLint 团队宣布正式支持 CSS 语言，这是继 JSON 和 Markdown 之后，ESLint 向通用型 linter 迈进的又一重要步骤。

内置 CSS 检查规则

ESLint 提供了一系列内置的 CSS 检查规则，包括：

• 检查重复的 @import 规则
• 检查空代码块
• 检查无效的 at-rules
• 检查无效的属性
• 强制使用 @layer

其中，@layer 是 CSS 标准的新特性，旨在帮助开发者更好地控制样式层叠，避免样式被意外覆盖。根据 Scout APM 2020 年的调查，开发者平均每周花费超过 5 小时调试 CSS 问题，其中层叠和优先级问题是主要原因。

关键规则：require-baseline

require-baseline 是此次新增的关键规则，允许开发者根据 CSS 特性在浏览器中的支持程度进行检查。Baseline 是由 W3C WebDX 社区组发起的一项计划，旨在记录 Chrome、Edge、Firefox 和 Safari 四个核心浏览器对 CSS 特性的支持情况。Baseline 将特性分为两类：

• 广泛支持的特性：所有核心浏览器支持至少 30 个月
• 新支持的特性：所有核心浏览器支持不足 30 个月

开发者可以通过配置 ESLint 来确保仅使用广泛支持的 CSS 特性，例如：

// eslint.config.js
import css from "@eslint/css";

export default [
  {
    files: ["src/css/**/*.css"],
    plugins: { css },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      "css/require-baseline": ["warn", { available: "widely" }]
    },
  },
];

安装与使用

开发者可以通过以下命令安装 @eslint/css 插件：

npm install @eslint/css -D

贡献与许可

ESLint 是 OpenJS Foundation 的项目，采用 MIT 开源许可证。欢迎开发者通过 ESLint GitHub 仓库 贡献代码，贡献者需遵循 ESLint 贡献指南。

开发者可查阅 官方发布说明 获取更多技术细节和代码示例。