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

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/<имя-правила>": "warn", // или "error",
    "@unocss/<другое-имя-правила>": ["warn" /* или "error" */, { /* параметры */ }]
  }
}

@unocss/blocklist

Выдает предупреждение или ошибку при использовании утилит, совпадающих со списком блокировки.

Вы можете настроить сообщения для заблокированных правил, чтобы сделать их более информативными и контекстно-специфическими, используя свойство message мета-объекта:

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Используйте bg-red-600 вместо этого' }],
    [/-auto$/, { message: s => `Используйте ${s.replace(/-auto$/, '-a')} вместо этого` }], // -> "my-auto" в списке блокировки: Используйте "my-a" вместо этого
  ],
})

@unocss/enforce-class-compile 🔧

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

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

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

Параметры:

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

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

Предыдущие наработки

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