برنامه نویسی

4 پسوند VSCode که من هنگام توسعه با Tailwind استفاده می کنم

TL; DR

همه این افزونه‌ها در این بسته افزودنی VSCode کیت TailwindCSS موجود هستند

تصویر tailwind css intellisnse

Tailwind CSS IntelliSense ابزار قدرتمندی است که می تواند به توسعه دهندگان کمک کند تا کد را سریعتر و کارآمدتر بنویسند. این ابزار پیشنهادات بلادرنگی را برای کلاس‌های Tailwind CSS، کاهش خطاها و بهبود کیفیت کد ارائه می‌کند. با استفاده از IntelliSense، توسعه دهندگان می توانند بهره وری را افزایش دهند، منحنی یادگیری را کاهش دهند و دسترسی به برنامه های خود را بهبود بخشند. اگر توسعه دهنده ای هستید که با Tailwind CSS کار می کنید، حتما از این ویژگی قدرتمند استفاده کنید.

تصویر پسوند فولد دم

این افزونه هنگام کار با Tailwind بسیار مفید است. لیست طولانی کلاس‌ها می‌تواند بخش html را به هم ریخته باشد و این پسوند راهی عالی برای پنهان کردن آن‌ها و نمایش آن‌ها فقط در صورت نیاز ارائه می‌کند. علاوه بر عملکرد پیش‌فرض، گزینه‌ها به خوبی فکر شده و تقریباً با هر اولویتی مطابقت دارند. به عنوان مثال، من دوست دارم وقتی روی خط کلیک می کنم کلاس ها باز شوند نه خود کلاس و یک گزینه برای آن وجود دارد.

من به برنامه افزودنی امتیاز 5 ستاره دادم اما یک مشکل وجود دارد که مایلم بهبود یابد. من از eslint با پلاگین eslint tailwind استفاده می کنم که کلاس های طولانی را به چندین خط تقسیم می کند. به نظر نمی‌رسد که برنامه افزودنی کلاس‌هایی را که در چندین خط قرار دارند تا می‌کند.

تصویر مستندات باد دم

پسوند Tailwind Documentation دسترسی سریع به اسناد رسمی Tailwind CSS را فراهم می کند. این افزونه توسعه دهندگان را قادر می سازد تا مستقیماً از داخل ویرایشگر VSCode به اسناد Tailwind CSS دسترسی داشته باشند، بدون اینکه نیازی به باز کردن مرورگر یا ترک ویرایشگر باشد.

تصویر نمایشگر پیکربندی Tailwind

پیکربندی Tailwind می تواند گیج کننده باشد. آنها ممکن است به صورت تصاعدی گسترش یابند و دانستن پیکربندی حل شده را برای کاربران دشوارتر کنند. به همین دلیل این افزونه را ایجاد کردم. این به کاربران امکان می دهد تا مشاهده کنند حل شد پیکربندی Tailwind و همچنین رنگ را برای هر کلاس مرتبط با رنگ نشان می دهد (text-*، bg-*، accent-* … و غیره)

در آینده قصد دارم کلاس ها را قابل کلیک کنم تا وقتی کاربر روی کلاسی کلیک می کند در قسمت html درج شود.

👥 اتصال
توییتر: @kalimahapps
GitHub: KalimahApps
وب سایت: https://kalimah-apps.com/

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا