ESLint 现已正式支持 CSS 代码检查

早在 2024 年 7 月，我们 宣布了 我们的计划，即将 ESLint 打造成一个更通用的代码检查器，能够检查任何语言。2024 年 10 月，我们 宣布了 对 JSON 和 Markdown 的代码检查支持，实现了这一愿景。今天，我们很高兴通过引入 CSS 支持来扩展受支持语言的列表。

使用 @eslint/css 进行 CSS 代码检查

CSS 代码检查是通过使用 @eslint/css 插件完成的，这是一个官方支持的语言插件。该插件通过优秀的 CSSTree 项目提供解析，并提供 CSS 规则。要使用该插件，请从 npm 安装它

npm install @eslint/css -D

然后更新你的配置文件

import css from "@eslint/css";

export default [
    // lint css files
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        rules: {
            "css/no-duplicate-imports": "error",
        },
    },
];

该插件内置了几个规则

• no-duplicate-imports - 禁止重复的 @import 规则
• no-empty-blocks - 禁止空代码块
• no-invalid-at-rules - 禁止无效的 at-rules（验证 at-rules）
• no-invalid-properties - 禁止无效的属性（验证规则）
• require-baseline - 强制使用 baseline 功能
• use-layers - 强制使用 @layer

我们认为，验证和强制执行 baseline 功能是代码检查器在 2025 年需要支持的最低限度，因此我们花费了大量时间使 no-invalid-at-rules、no-invalid-properties 和 require-baseline 规则尽可能全面。

有规则的想法？ 打开 issue。

有关配置 CSS 代码检查的更多信息，请查看 README。

容错解析支持

默认情况下，CSS 代码检查会尽可能严格地解析代码，突出显示沿途发现的所有错误。但是，浏览器中的 CSS 解析具有内置的错误恢复功能，并且可以理解一些存在语法错误的 CSS。如果想使用与浏览器相同的错误恢复算法来检查 CSS，可以通过启用容错解析来实现

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            tolerant: true,
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];

当运行容错模式时，CSS 解析器仅报告无法恢复的语法错误。

自定义语法支持

customSyntax 选项是一个对象，它使用 CSSTree 格式 来定义自定义语法，允许您指定 at-rules、属性和某些类型。例如，假设你想定义一个如下所示的自定义 at-rule

@my-at-rule "hello world!";

你可以按如下方式配置该语法

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            customSyntax: {
                atrules: {
                    "my-at-rule": {
                        prelude: "<string>",
                    },
                },
            },
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];

如果你正在使用 Tailwind，你可以使用内置的 tailwindSyntax 对象配置大多数自定义语法，就像这样

import css from "@eslint/css";
import { tailwindSyntax } from "@eslint/css/syntax";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            customSyntax: tailwindSyntax,
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];

注意：Tailwind 语法目前不提供 theme() 函数。这是 CSSTree 的一个限制，我们希望很快能解决。

创建自定义规则和使用代码浏览器

与 @eslint/json 和 @eslint/markdown 一样，@eslint/css 允许创建自定义规则。使用 CSSTree AST 格式，你可以像为 JavaScript 创建规则一样创建自己的规则。代码浏览器 现在支持 CSS 解析，是开始创建自己的规则的绝佳资源。

结论

随着 CSS 支持的加入，ESLint 继续发展成为一个多功能的工具，能够检查各种语言。这项新功能使开发人员能够在整个代码库（包括样式表）中保持一致的代码质量。@eslint/css 插件利用强大的 CSSTree 项目为 CSS 提供准确而全面的代码检查规则。通过强制执行最佳实践并捕获常见错误，它可以帮助开发人员编写更简洁、更易于维护的 CSS 代码。

容错解析和自定义语法支持的引入进一步增强了 ESLint 的灵活性，使其能够适应各种编码风格和项目需求。无论你正在使用标准 CSS 还是像 Tailwind 这样的框架，ESLint 都可以配置为满足你的需求。创建自定义规则的能力也使开发人员能够强制执行自己的编码标准和实践。

我们希望你发现新的 CSS 代码检查功能有用，并期待看到你如何将它们集成到你的项目中。感谢你对 ESLint 社区的持续支持和贡献。共同努力，我们可以为世界各地的开发人员构建一个更好、更可靠的工具。

提醒一下，ESLint 是一个独立的开源项目，由一群志愿者在业余时间维护。如果你喜欢使用 ESLint，请与你的公司谈谈 赞助该项目 的事宜。