# @elsikora/eslint-plugin-css 中文文档

规范地址：https://npmcn.com/package/%40elsikora/eslint-plugin-css/

版本：0\.6\.3
npm 元数据更新时间：2025-04-11T12:54:00.174Z
中文译文更新时间：2026-11-13T14:13:04.115Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40elsikora/eslint-plugin-css
原文对照：https://npmcn.com/package/%40elsikora/eslint-plugin-css/?lang=original
项目主页：https://github.com/eslint/css#readme
源码仓库：https://github.com/eslint/css

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：292 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：^18\.18\.0 \|\| ^20\.9\.0 \|\| \>=21\.1\.0
- 运行依赖：3 个
- 首次发布：2025-03-04T19:44:09.912Z
- 最新版本发布：2025-04-11T12:53:59.932Z
- 近 30 天下载量：10716（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

ESLint 的 CSS 嵌入插件

## 安装

```sh
npm install @elsikora/eslint-plugin-css
```

也可以使用：`pnpm add @elsikora/eslint-plugin-css`、`yarn add @elsikora/eslint-plugin-css`、`bun add @elsikora/eslint-plugin-css`

## README

# ESLint CSS 语言插件

## 概览

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

**重要内容:** 此插件需要 ESLint v9. 6. 0 或更高, 您必须使用 [新配置系统](https://eslint.org/docs/latest/use/configure/configuration-files)。 。 。 .

## 安装

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

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

为德诺(实验):

```shell
deno add jsr:@eslint/css
```

### 配置

| **配置名称** | **说明** |
| --- | --- |
| `recommended` | 启用所有推荐规则 . |

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

```js
// 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
];
```

### 规则

| **规则名称** | **说明** | **建议** |
| --- | --- | :-: |
| [`no-duplicate-imports`](https://npmcn.com/package/%40elsikora/eslint-plugin-css/docs/rules/no-duplicate-imports.md) | 取消重复@ 导入规则 | 对 |
| [`no-empty-blocks`](https://npmcn.com/package/%40elsikora/eslint-plugin-css/docs/rules/no-empty-blocks.md) | 取消空块 | 对 |
| [`no-invalid-at-rules`](https://npmcn.com/package/%40elsikora/eslint-plugin-css/docs/rules/no-invalid-at-rules.md) | 取消无效规则 | 对 |
| [`no-invalid-properties`](https://npmcn.com/package/%40elsikora/eslint-plugin-css/docs/rules/no-invalid-properties.md) | 取消无效属性 | 对 |
| [`prefer-logical-properties`](https://npmcn.com/package/%40elsikora/eslint-plugin-css/docs/rules/prefer-logical-properties.md) | 强制使用逻辑属性 | 没有 |
| [`use-baseline`](https://npmcn.com/package/%40elsikora/eslint-plugin-css/docs/rules/use-baseline.md) | 强制使用基准特征 | 对 |
| [`use-layers`](https://npmcn.com/package/%40elsikora/eslint-plugin-css/docs/rules/use-layers.md) | 需要使用层 | 没有 |

**说明:** 此插件不提供格式规则 。 我们建议使用一个源代码,例如: [高级](https://prettier.io/) 为此.

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

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

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

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

```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 {
}
```

### 语文

| **语言名称** | **说明** |
| --- | --- |
| `css` | 解析 CSS 样式表 . |

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

```js
// 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`数字 :

```js
// 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` 如果您使用自定义语法,例如 [邮政](https://postcss.org/) 插件,这不是标准CSS语法的一部分.

#### 配置自定义语法

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

这个 `customSyntax` 选项是使用 [CSSTree 格式](https://github.com/csstree/csstree/blob/master/data/patch.json) 用于定义自定义语法,允许您指定规则、属性和一些类型。 比如说,假设你想定义一种习惯 规则看起来是这样的:

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

您可以将语法配置如下:

```js
// 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",
        },
    },
];
```

#### 配置尾风语法

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

```js
// 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 的限制](https://github.com/csstree/csstree/issues/292) 我们希望很快得到解决.

## 许可证

Apache 2.0 (英语)

## 发起人

以下公司,组织,个人支持ESLint的持续维护与发展. [成为发起人](https://eslint.org/donate) 让你的标志在我们的读取器和 [网站](https://eslint.org/sponsors)。 。 。 .

### 白金赞助商

[![Automattic](https://images.opencollective.com/automattic/d0ef3e1/logo.png)](https://automattic.com/) [![Airbnb](https://images.opencollective.com/airbnb/d327d66/logo.png)](https://www.airbnb.com/)

### 黄金赞助商

[![Qlty Software](https://images.opencollective.com/qltysh/33d157d/logo.png)](https://qlty.sh/) [![trunk.io](https://images.opencollective.com/trunkio/fb92d60/avatar.png)](https://trunk.io/) [![Shopify](https://avatars.githubusercontent.com/u/8085)](https://shopify.engineering/)

### 白银赞助商

[![Vite](https://images.opencollective.com/vite/e6d15e1/logo.png)](https://vite.dev/) [![Liftoff](https://images.opencollective.com/liftoff/5c4fa84/logo.png)](https://liftoff.io/) [![StackBlitz](https://avatars.githubusercontent.com/u/28635252)](https://stackblitz.com/)

### 青铜赞助商

[![Cybozu](https://images.opencollective.com/cybozu/933e46d/logo.png)](https://cybozu.co.jp/) [![Anagram Solver](https://images.opencollective.com/anagram-solver/2666271/logo.png)](https://www.crosswordsolver.org/anagram-solver/) [![Icons8](https://images.opencollective.com/icons8/7fa1641/logo.png)](https://icons8.com/) [![Discord](https://images.opencollective.com/discordapp/f9645d9/logo.png)](https://discord.com/) [![GitBook](https://avatars.githubusercontent.com/u/7111340)](https://www.gitbook.com/) [![Neko](https://avatars.githubusercontent.com/u/11081491)](https://nolebase.ayaka.io/) [![Nx](https://avatars.githubusercontent.com/u/23692104)](https://nx.dev/) [![Mercedes-Benz Group](https://avatars.githubusercontent.com/u/34240465)](https://opensource.mercedes-benz.com/) [![HeroCoders](https://avatars.githubusercontent.com/u/37549774)](https://herocoders.com/) [![LambdaTest](https://avatars.githubusercontent.com/u/171592363)](https://www.lambdatest.com/)

### 技术赞助商

技术赞助者允许我们免费利用其产品和服务,作为对开放源生态系统和我们工作的贡献的一部分.

[![Netlify](https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/netlify-icon.svg)](https://netlify.com/) [![Algolia](https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/algolia-icon.svg)](https://algolia.com/) [![1Password](https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/1password-icon.svg)](https://1password.com/)

## 常见问题

### @elsikora/eslint-plugin-css 是什么？

ESLint 的 CSS 嵌入插件

### 如何安装 @elsikora/eslint-plugin-css？

在项目目录运行 npm install @elsikora/eslint-plugin-css，或使用 pnpm add / yarn add / bun add。

### @elsikora/eslint-plugin-css 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @elsikora/eslint-plugin-css 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @elsikora/eslint-plugin-css 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^18\.18\.0 \|\| ^20\.9\.0 \|\| \>=21\.1\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @elsikora/eslint-plugin-css 可以商用吗？

@elsikora/eslint-plugin-css 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @elsikora/eslint-plugin-css 的下载量有多少？

根据 npm 官方下载统计，@elsikora/eslint-plugin-css 在 2026/10/14 – 2026/11/12 这 30 天内被下载 10,716 次，日均约 357 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @elsikora/eslint-plugin-css 还在维护吗？

最新版本 0\.6\.3 发布于 2025/04/11（1\.6 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/03/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。