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

bun

bun add -D @unocss/eslint-config

Flat Config Styleの場合：

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

export default [
  unocss,
  // その他の設定
]

従来の.eslintrcスタイルの場合：

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

ルール

• @unocss/order - クラスセレクタの順序を強制します。
• @unocss/order-attributify - 属性セレクタの順序を強制します。
• @unocss/blocklist - 特定のクラスセレクタを禁止します[オプション]。
• @unocss/enforce-class-compile - クラスのコンパイルを強制します[オプション]。

オプションルール

これらのルールはデフォルトでは有効になっていません。有効にするには、.eslintrcに以下を追加します：

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // または "error"
    "@unocss/<another-rule-name>": ["warn" /* または "error" */, { /* オプション */ }]
  }
}

@unocss/blocklist

blocklistにリストされたユーティリティが使用された場合に警告またはエラーを発生させます。

メタオブジェクトのmessageプロパティを使用して、ブロックされたルールのメッセージをカスタマイズし、より情報量が多く、コンテキストに特化したものにできます：

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 🔧

このルールはcompile class transformerと組み合わせて動作するように設計されています。

クラス属性またはディレクティブが:uno:で始まらない場合に警告またはエラーを発生させます。

🔧 すべてのクラス属性とディレクティブに自動的に:uno:プレフィックスを追加します。

オプション：

• prefix (string) - カスタムプレフィックスと組み合わせて使用できます。デフォルト：:uno:
• enableFix (boolean) - falseの場合、段階的な移行に使用できます。デフォルト：true

注意：現在はVueのみサポートされています。JSXでこれを実装したい場合は_プルリクエストを送ってください_。Svelteでこれを探している場合は、svelte-scopedモードを探しているかもしれません。

参考

@devuntによるeslint-plugin-unocssに感謝します。