Skip to content

ESLint Config

ESLint config สำหรับ UnoCSS: @unocss/eslint-config

การติดตั้ง

bash
pnpm add -D @unocss/eslint-config
bash
yarn add -D @unocss/eslint-config
bash
npm install -D @unocss/eslint-config
bash
bun add -D @unocss/eslint-config

ใน Flat Config Style:

js
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

Released under the MIT License.