ESLint Config
ESLint config สำหรับ UnoCSS: @unocss/eslint-config
การติดตั้ง
bash
pnpm add -D @unocss/eslint-configbash
yarn add -D @unocss/eslint-configbash
npm install -D @unocss/eslint-configbash
bun add -D @unocss/eslint-configjs
import unocss from '@unocss/eslint-config/flat'
export default [
unocss,
// other configs
]ใน legacy .eslintrc style:
json
{
"extends": [
"@unocss"
]
}Rules
@unocss/order- บังคับลำดับเฉพาะสำหรับ class selectors@unocss/order-attributify- บังคับลำดับเฉพาะสำหรับ attributify selectors@unocss/blocklist- ไม่อนุญาต class selectors เฉพาะ [Optional]@unocss/enforce-class-compile- บังคับ class compile [Optional]
Optional rules
rules เหล่านี้ไม่ได้เปิดใช้งานโดยค่าเริ่มต้น เพื่อเปิดใช้งาน เพิ่มสิ่งต่อไปนี้ใน .eslintrc ของคุณ:
json
{
"extends": [
"@unocss"
],
"rules": {
"@unocss/<rule-name>": "warn", // or "error",
"@unocss/<another-rule-name>": ["warn" /* or "error" */, { /* options */ }]
}
}@unocss/blocklist
แจ้งเตือนหรือ error เมื่อใช้ utilities ที่อยู่ใน blocklist ตรงกัน
คุณสามารถปรับแต่ง messages สำหรับ blocked rules เพื่อให้มีข้อมูลมากขึ้นและเฉพาะเจาะจงตามบริบทโดยใช้ property message ของ meta object:
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" is in blocklist: Use "my-a" instead
],
})@unocss/enforce-class-compile 🔧
rule นี้ออกแบบมาเพื่อทำงานร่วมกับ compile class transformer
แจ้งเตือนหรือ error เมื่อ class attribute หรือ directive ไม่เริ่มต้นด้วย :uno:
🔧 เพิ่ม prefix :uno: ให้กับ class attributes และ directives ทั้งหมดโดยอัตโนมัติ
Options:
prefix(string) - สามารถใช้ร่วมกับ custom prefix ค่าเริ่มต้น::uno:enableFix(boolean) - สามารถใช้สำหรับ migration แบบค่อยเป็นค่อยไปเมื่อfalseค่าเริ่มต้น:true
หมายเหตุ: ปัจจุบันรองรับเฉพาะ Vue ส่ง PR หากคุณต้องการสิ่งนี้ใน JSX หากคุณกำลังมองหาสิ่งนี้ใน Svelte คุณอาจกำลังมองหา mode svelte-scoped
Prior Arts
ขอบคุณ eslint-plugin-unocss โดย @devunt