ESLint Config

UnoCSS 用の ESLint 設定: @unocss/eslint-config。

インストール

::: code-group

pnpm add -D @unocss/eslint-config

yarn add -D @unocss/eslint-config

npm install -D @unocss/eslint-config

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 - クラスコンパイルを強制します [オプション]。

ルールオプション

@unocss/order

• unoFunctions (string[]) - このルールを強制するために一致する名前の関数呼び出しをマークします。これらはパターンではなく、ケースインセンシティブなプレーン名です。デフォルト: ['clsx', 'classnames']。
• unoVariables (string[]) - このルールを強制するために一致する名前の変数宣言をマークします。これらはフラグ i を持つ正規表現パターンです。デフォルト: ['^cls', 'classNames?$']。例えば、変数名 clsButton や buttonClassNames にマッチします。

オプションのルール

これらのルールはデフォルトでは有効になっていません。有効にするには、次の内容を .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" は blocklist にあります: 代わりに "my-a" を使用してください
  ],
})

@unocss/enforce-class-compile :wrench:

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

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

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

オプション:

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

注意: 現在は Vue のみサポートされています。JSX でこれを望む場合は PR を貢献 してください。Svelte でこれを探している場合は、svelte-scoped モードを探しているかもしれません。

先行技術

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