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作成) に感謝します。