ESLint Config

Cấu hình ESLint cho UnoCSS: @unocss/eslint-config.

Cài đặt

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

Trong Kiểu Cấu hình Phẳng:

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

export default [
  unocss,
  // other configs
]

Trong kiểu .eslintrc kế thừa:

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

Quy tắc

• @unocss/order - Thực thi một thứ tự cụ thể cho các bộ chọn lớp.
• @unocss/order-attributify - Thực thi một thứ tự cụ thể cho các bộ chọn attributify.
• @unocss/blocklist - Không cho phép các bộ chọn lớp cụ thể [Tùy chọn].
• @unocss/enforce-class-compile - Thực thi biên dịch lớp [Tùy chọn].

Quy tắc tùy chọn

Các quy tắc này không được bật theo mặc định. Để bật nó, thêm những thứ sau vào .eslintrc của bạn:

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // or "error",
    "@unocss/<another-rule-name>": ["warn" /* or "error" */, { /* options */ }]
  }
}

@unocss/blocklist

Ném cảnh báo hoặc lỗi khi dùng các tiện ích được liệt kê trong blocklist được khớp.

Bạn có thể tùy chỉnh thông điệp cho các quy tắc bị chặn để làm cho chúng nhiều thông tin hơn và cụ thể theo ngữ cảnh bằng cách dùng thuộc tính message của đối tượng meta:

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 🔧

Quy tắc này được thiết kế để hoạt động kết hợp với compile class transformer.

Ném cảnh báo hoặc lỗi khi thuộc tính lớp hoặc chỉ thị không bắt đầu bằng :uno:.

🔧 tự động thêm tiền tố :uno: vào tất cả các thuộc tính lớp và chỉ thị.

Tùy chọn:

• prefix (string) - có thể được dùng kết hợp với tiền tố tùy chỉnh. Mặc định: :uno:
• enableFix (boolean) - có thể được dùng cho di chuyển dần dần khi false. Mặc định: true

Lưu ý: hiện tại chỉ hỗ trợ Vue. Đóng góp một PR nếu bạn muốn cái này trong JSX. Nếu bạn đang tìm cái này trong Svelte, bạn có thể đang tìm kiếm svelte-scoped mode.

Nghệ thuật Trước đó

Cảm ơn eslint-plugin-unocss bởi @devunt.