ESLint CSS 语言插件

概览

此软件包包含一个插件,允许您使用 ESLint 在本地插入 CSS 文件 .

重要内容: 此插件需要 ESLint v9. 6. 0 或更高, 您必须使用 新配置系统。 。 。 .

安装

对于节点和相容运行时间:

npm install @eslint/css -D
# or
yarn add @eslint/css -D
# or
pnpm install @eslint/css -D
# or
bun install @eslint/css -D

为德诺(实验):

deno add jsr:@eslint/css

配置

在你身边 eslint.config.js 文件,导入 @eslint/css 并包括建议配置:

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

export default [
    // lint CSS files
    {
        files: ["**/*.css"],
        language: "css/css",
        ...css.configs.recommended,
    },

    // your other configs here
];

规则

说明: 此插件不提供格式规则 。 我们建议使用一个源代码,例如: 高级 为此.

为了在您 eslint.config.js 文件,导入 @eslint/css 并配置每条规则前缀:

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

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

您可以使用批注在 CSS 中单独配置、禁用和启用规则,例如:

/* eslint css/no-empty-blocks: error */

/* eslint-disable css/no-empty-blocks -- this one is ok */
a {
}
/* eslint-enable css/no-empty-blocks */

b { /* eslint-disable-line css/no-empty-blocks */
}

/* eslint-disable-next-line css/no-empty-blocks */
em {
}

语文

为了在您的 eslint.config.js 文件,导入 @eslint/css 并配置 a language数字 :

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

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

容忍模式

默认情况下, CSS 解析器会以严格的模式运行, 它会报告所有解析错误 。 如果您想要允许可恢复的解析错误(浏览器自行自动修正的),您可以设置 tolerant 选项到 true数字 :

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

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

设置 tolerant 改为 true 如果您使用自定义语法,例如 邮政 插件,这不是标准CSS语法的一部分.

配置自定义语法

CSS 的 Lexer 预建了一套 CSS 的已知语法, 用于规则 no-invalid-properties 以验证 CSS 代码。 虽然这在多数情况下是可行的,但当您想要定义您自己对 CSS 的扩展时,可能会有这样的情况,这可以使用 customSyntax 语言选项.

这个 customSyntax 选项是使用 CSSTree 格式 用于定义自定义语法,允许您指定规则、属性和一些类型。 比如说,假设你想定义一种习惯 规则看起来是这样的:

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

您可以将语法配置如下:

// eslint.config.js
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",
        },
    },
];

配置尾风语法

尾风 指定 CSS 的一些扩展名,否则会被此插件中的规则标记为无效。 您可以使用内建配置 Tailwind 的大部分自定义语法 tailwindSyntax 对象,像这样:

// eslint.config.js
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",
        },
    },
];

说明: 尾风语法目前没有规定 theme() 函数。 这是一个 cSSTree 的限制 我们希望很快得到解决.

许可证

Apache 2.0 (英语)

发起人

以下公司,组织,个人支持ESLint的持续维护与发展. 成为发起人 让你的标志在我们的读取器和 网站。 。 。 .

白金赞助商

黄金赞助商

白银赞助商

青铜赞助商

技术赞助商