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 中列出的工具程式時，拋出警告或錯誤。

您可以使用 meta 物件的 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 🔧

此規則旨在與 編譯類別轉換器 搭配使用。

當 class 屬性或指令不是以 :uno: 開頭時，拋出警告或錯誤。

🔧 自動將所有 class 屬性和指令加上前綴 :uno:。

選項

• prefix (字串) - 可與 自訂前綴 搭配使用。預設值：:uno:
• enableFix (布林值) - 當設為 false 時，可用於逐步遷移。預設值：true

**注意**：目前僅支援 Vue。如果您希望在 JSX 中使用此功能，請 *提交 PR*。如果您在 Svelte 中尋找此功能，您可能正在尋找 svelte-scoped 模式。

先前技術

感謝 @devunt 開發的 eslint-plugin-unocss。