Конфигурация ESLint

Конфигурация ESLint для UnoCSS: @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:

eslint.config.js

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

export default [
  unocss,
  // другие настройки
]

В устаревшем стиле .eslintrc:

.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:

.eslintrc

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // или "error",
    "@unocss/<another-rule-name>": ["warn" /* или "error" */, { /* параметры */ }]
  }
}

@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" в чёрном списке: Используйте вместо него "my-a"
  ],
})

@unocss/enforce-class-compile 🔧

Это правило предназначено для работы в сочетании с трансформером компиляции классов.

Выдает предупреждение или ошибку, если атрибут class или директива не начинаются с :uno:.

🔧 автоматически добавляет префикс :uno: ко всем атрибутам class и директивам.

Опции:

• prefix (string) — может использоваться в сочетании с пользовательским префиксом. По умолчанию: :uno:
• enableFix (boolean) — если false, может использоваться для постепенной миграции. По умолчанию: true

Примечание: в настоящее время поддерживается только Vue. Отправьте PR, если вам нужна поддержка JSX. Если вы ищете подобное для Svelte, возможно, вам нужен режим svelte-scoped.

Предшествующие разработки

Спасибо eslint-plugin-unocss от @devunt.