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

bun

bun add -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-attributify - 对属性选择器强制执行特定顺序。
• @unocss/blocklist - 禁止特定的类选择器[可选]。
• @unocss/enforce-class-compile - 强制类编译[可选]。

规则选项

🌐 Rule options

@unocss/order

• unoFunctions (字符串数组) - 标记匹配名称的函数调用以执行此规则。这些是普通名称，不是模式，且不区分大小写。默认值：['clsx', 'classnames']。
• unoVariables（字符串数组）- 标记匹配名称的变量声明以执行此规则。这些是带有标志 i 的正则表达式模式。默认值：['^cls', 'classNames?$']。例如，将匹配变量名 clsButton 和 buttonClassNames。

可选规则

🌐 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.

你可以使用 meta 对象的 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 :扳手:

🌐 @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:。

选项：

🌐 Options:

• prefix（字符串）- 可与自定义前缀结合使用。默认值：:uno:
• enableFix（布尔值）- 可在 false 时用于渐进式迁移。默认值：true

注意：目前仅支持 Vue。如果你希望在 JSX 中使用，可以 提交一个 PR。如果你正在 Svelte 中寻找此功能，你可能需要 svelte-scoped 模式。

现有技术

🌐 Prior Arts

感谢 @devunt 开发的 eslint-plugin-unocss。

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