ESLint 配置

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

安装

pnpm

pnpm add -D @unocss/eslint-config

yarn

yarn add -D @unocss/eslint-config

npm

npm install -D @unocss/eslint-config

在 扁平化配置风格

eslint.config.js

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

export default [
  unocss,
  // other configs
]

在旧式 .eslintrc 风格中

.eslintrc

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

规则

• @unocss/order - 强制对类选择器采用特定顺序。
• @unocss/order-attributify - 强制对 Attributify 选择器采用特定顺序。
• @unocss/blocklist - 禁止使用特定类选择器 [可选]。
• @unocss/enforce-class-compile - 强制类编译 [可选]。

可选规则

这些规则默认情况下未启用。若要启用它，请将以下内容添加到您的 .eslintrc

.eslintrc

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

@unocss/blocklist

当使用 blocklist 中列出的实用程序时，会抛出警告或错误。

您可以使用元对象的 message 属性，自定义被阻止规则的提示信息，以使它们更具信息量和上下文相关性。

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 🔧

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

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

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

选项

• prefix (字符串) - 可与 自定义前缀 结合使用。默认值：:uno:
• enableFix (布尔值) - 当为 false 时，可用于逐步迁移。默认值：true

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

先行技术

感谢 eslint-plugin-unocss，由 @devunt 开发。