Skip to content

ESLint 配置

¥ESLint Config

UnoCSS 的 ESLint 配置:@unocss/eslint-config

¥ESLint config for UnoCSS: @unocss/eslint-config.

安装

¥Installation

bash
pnpm add -D @unocss/eslint-config
bash
yarn add -D @unocss/eslint-config
bash
npm install -D @unocss/eslint-config

扁平化配置样式 中:

¥In Flat Config Style:

js
// eslint.config.js
import unocss from '@unocss/eslint-config/flat'

export default [
  unocss,
  // other configs
]

传统 .eslintrc 样式:

¥In legacy .eslintrc style:

json
{
  "extends": [
    "@unocss"
  ]
}

规则

¥Rules

  • @unocss/order - 对类选择器强制执行特定的顺序。

    ¥@unocss/order - Enforce a specific order for class selectors.

  • @unocss/order-attributify - 对属性选择器强制执行特定顺序。

    ¥@unocss/order-attributify - Enforce a specific order for attributify selectors.

  • @unocss/blocklist - 禁止特定的类选择器[可选]。

    ¥@unocss/blocklist - Disallow specific class selectors [Optional].

  • @unocss/enforce-class-compile - 强制类编译[可选]。

    ¥@unocss/enforce-class-compile - Enforce class compile [Optional].

可选规则

¥Optional rules

默认情况下不启用这些规则。要启用它,请将以下内容添加到你的 .eslintrc

¥These rules are not enabled by default. To enable it, add the following to your .eslintrc:

json
{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // or "error",
    "@unocss/<another-rule-name>": ["warn" /* or "error" */, { /* options */ }]
  }
}

@unocss/blocklist

使用 blocklist 中列出的工具进行匹配时引发警告或错误。

¥Throw warning or error when using utilities listed in blocklist get matched.

@unocss/enforce-class-compile 🔧

该规则旨在与 编译类转换器 结合使用。

¥This rule is designed to work in combination with compile class transformer.

当类属性或指令不以 :uno: 开头时抛出警告或错误。

¥Throw warning or error when class attribute or directive doesn't start with :uno:.

🔧自动将前缀 :uno: 添加到所有类属性和指令中。

¥🔧 automatically adds prefix :uno: to all class attributes and directives.

选项:

¥Options:

  • prefix(字符串) - 可与 自定义前缀 结合使用。默认::uno:

    ¥prefix (string) - can be used in combination with custom prefix. Default: :uno:

  • enableFix(布尔值) - 可用于 false 时逐步迁移。默认:true

    ¥enableFix (boolean) - can be used for gradual migration when false. Default: true

注意:目前仅支持 Vue。如果你希望在 JSX 中实现此功能,请贡献 PR。如果你正在 Svelte 中寻找此功能,你可能正在寻找 svelte-scoped 模式。

¥Note: currently only Vue supported. Contribute a PR if you want this in JSX. If you're looking for this in Svelte, you might be looking for svelte-scoped mode.

现有技术

¥Prior Arts

感谢 @devunteslint-plugin-unocss

¥Thanks to eslint-plugin-unocss by @devunt.