ESLint 配置

¥ESLint Config

UnoCSS 的 ESLint 配置：@unocss/eslint-config。

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

安装

¥Installation

pnpm

pnpm add -D @unocss/eslint-config

yarn

yarn add -D @unocss/eslint-config

npm

npm install -D @unocss/eslint-config

扁平化配置样式 中：

¥In Flat Config Style:

eslint.config.js

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

export default [
  unocss,
  // other configs
]

传统 .eslintrc 样式：

¥In legacy .eslintrc style:

.eslintrc

{
  "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:

.eslintrc

{
  "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.

你可以使用元对象的 message 属性自定义阻止规则的消息，使其更具信息性和针对性：

¥You can customize messages for blocked rules to make them more informative and context-specific by using the message property of the meta object:

unocss.config.ts

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Use bg-red-600 instead' }],
    [/-auto$/, { message: s => `Use ${s.replace(/-auto$/, '-a')} instead` }], // -> "my-auto" is in blocklist: Use "my-a" instead
  ],
})

@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

感谢 @devunt 的 eslint-plugin-unocss。

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