ESLint 现在正式支持 CSS 的代码检查

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

🌐 Back in July of 2024 we announced our plan to make ESLint a more general-purpose linter that is capable of linting any language. In October 2024, we announced linting support for JSON and Markdown, delivering on that vision. Today, we’re excited to add to the list of supported languages with the introduction of CSS support.

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

🌐 CSS linting with @eslint/css

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

🌐 CSS linting is accomplished using the @eslint/css plugin, which is an officially supported language plugin. The plugin provides parsing through the excellent CSSTree project along with rules for CSS. To use the plugin, install it from npm:

npm install @eslint/css -D
1

然后更新你的配置文件：

🌐 Then update your configuration file:

import css from "@eslint/css";

export default [
    // lint css files
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        rules: {
            "css/no-duplicate-imports": "error",
        },
    },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

插件中内置了几条规则：

🌐 There are several rules built-in to the plugin:

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

我们认为，在 2025 年，验证和执行 baseline 功能是 linter 至少需要支持的功能，因此我们花了大量时间使 no-invalid-at-rules、no-invalid-properties 和 require-baseline 规则尽可能全面。

🌐 We feel that validation and enforcing baseline features are the minimum that a linter needs to support in 2025, and so we spent a lot of time making the no-invalid-at-rules, no-invalid-properties, and require-baseline rules as comprehensive as possible.

有规则的想法吗？提交问题。

🌐 Have an idea for a rule? Open an issue.

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

🌐 For more information on configuring CSS linting, please check out the README.

容错解析支持

🌐 Tolerant parsing support

默认情况下，CSS 检查会尽可能严格地解析代码，高亮在此过程中发现的所有错误。然而，浏览器中的 CSS 解析具有内置的错误恢复功能，可以理解一些语法错误的 CSS。如果你想使用与浏览器相同的错误恢复算法来检查你的 CSS，可以通过启用容忍解析来实现：

🌐 By default, CSS linting parses the code as strictly as possible, highlighting all errors that it finds along the way. However, CSS parsing in the browser has built-in error recovery and can make sense of CSS with some syntax errors. If you want to lint your CSS using the same error recovery algorithm as the browser, you can do so by enabling tolerant parsing:

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            tolerant: true,
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在运行宽容模式时，CSS 解析器只报告不可恢复的语法错误。

🌐 When running tolerant mode, the CSS parser only reports unrecoverable syntax errors.

自定义语法支持

🌐 Custom syntax support

customSyntax 选项是一个对象，它使用 CSSTree 格式 来定义自定义语法，这允许你指定 at-rule、属性以及某些类型。例如，假设你想定义一个看起来像这样的自定义 at-rule：

🌐 The customSyntax option is an object that uses the CSSTree format for defining custom syntax, which allows you to specify at-rules, properties, and some types. For example, suppose you’d like to define a custom at-rule that looks like this:

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

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

🌐 You can configure that syntax as follows:

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",
        },
    },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果你正在使用 Tailwind，你可以使用 tailwind-csstree 配置自定义语法，像这样：

🌐 If you’re using Tailwind, you can configure the custom syntax using tailwind-csstree, like this:

import css from "@eslint/css";
import { tailwind4 } from "tailwind-csstree";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            customSyntax: tailwind4,
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

创建自定义规则并使用代码资源管理器

🌐 Creating custom rules and using Code Explorer

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

🌐 As with @eslint/json and @eslint/markdown, @eslint/css allows the creation of custom rules. Using the CSSTree AST format, you can create your own rules in the same way you would for JavaScript. Code Explorer now supports CSS parsing and is a great resource to get started creating your own rules.

结论

🌐 Conclusion

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

🌐 With the addition of CSS support, ESLint continues to evolve into a versatile tool capable of linting a wide range of languages. This new capability allows developers to maintain consistent code quality across their entire codebase, including stylesheets. The @eslint/css plugin leverages the robust CSSTree project to provide accurate and comprehensive linting rules for CSS. By enforcing best practices and catching common errors, it helps developers write cleaner and more maintainable CSS code.

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

🌐 The introduction of tolerant parsing and custom syntax support further enhances the flexibility of ESLint, making it adaptable to various coding styles and project requirements. Whether you’re working with standard CSS or using a framework like Tailwind, ESLint can be configured to meet your needs. The ability to create custom rules also empowers developers to enforce their own coding standards and practices.

我们希望你觉得新的 CSS 代码检查功能有用，并期待看到你如何将它们集成到你的项目中。感谢你对 ESLint 社区的持续支持和贡献。我们携手合作，可以为全球的开发者打造一个更好、更可靠的工具。

🌐 We hope you find the new CSS linting capabilities useful and look forward to seeing how you integrate them into your projects. Thank you for your continued support and contributions to the ESLint community. Together, we can build a better, more reliable tool for developers everywhere.

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

🌐 As a reminder, ESLint is an independent open source project maintained by a group of volunteers in their spare time. If you enjoy using ESLint, please talk to your company about sponsoring the project.