ระบบ Autocomplete ใน UnoCSS

UnoCSS รองรับระบบ Autocomplete ที่ช่วยให้การเขียน utility class รวดเร็วและแม่นยำมากขึ้น โดยจะมีการแนะนำ class ที่สามารถใช้ได้ทันทีขณะพิมพ์

ประโยชน์ของ Autocomplete

• ลดการจำ class เอง
• ลดความผิดพลาดในการสะกด
• เพิ่มความเร็วในการเขียนโค้ด

วิธีเปิดใช้งาน Autocomplete

1. ติดตั้ง Extension
   • สำหรับ VSCode: ค้นหาและติดตั้ง UnoCSS Extension
2. ตั้งค่าในโปรเจกต์
   • ไม่ต้องตั้งค่าเพิ่มเติม UnoCSS จะตรวจจับ config อัตโนมัติ

ตัวอย่างการใช้งาน

เมื่อคุณพิมพ์ bg- หรือ text- ในไฟล์ HTML/JSX/TSX/… ระบบจะขึ้นรายการ class ที่ใช้ได้ เช่น

<div class="bg-red-500 text-white p-4">
  Hello UnoCSS
</div>

หมายเหตุ

• รองรับ Autocomplete ในไฟล์ที่ UnoCSS รองรับ เช่น .vue, .tsx, .html เป็นต้น
• ถ้ามีการปรับแต่ง config หรือ custom rules/presets ระบบ autocomplete จะอัปเดตอัตโนมัติ

---