گردش کار خود را با Tailwind CSS بهینه کنید: تکمیل کلاس ها را دریافت کنید و پیش نمایش های ماوس را برای کلاس های اختصاص داده شده به متغیرها در VScode دریافت کنید.
TL; DR
این مقاله دستورالعمل‌هایی درباره نحوه فعال کردن تکمیل خودکار و شناور کردن IntelliSense برای کلاس‌های TailwindCSS در VScode ارائه می‌کند. برای انجام این کار، کاربران باید یک regex به تنظیمات VScode اضافه کنند که با ویژگی های HTML سفارشی مورد نظر (نام متغیرها) مطابقت داشته باشد.
اگر مدتی است که برنامه‌هایی را با استفاده از TailwindCSS توسعه می‌دهید، اجتناب‌ناپذیر است که قبلاً با این مشکل در VScode مواجه شده باشید یا حتماً داشته باشید.
مشکل 🚧
وقتی تعیین می کنید className به a div سپس وقتی روی کلاس tailwind اضافه می‌شوید، تکمیل خودکار و سبک CSS اعمال شده را دریافت می‌کنید.
⚡️ توجه: پسوند Tailwind CSS IntelliSense VScode باید در VScode شما نصب شده باشد تا تکمیل خودکار دریافت کنید و IntelliSense را شناور کنید.
اما اگر متغیری به نام ایجاد کنید containerClass و سپس سعی کنید کلاس های tailwind را به آن اختصاص دهید، سپس همان IntelliSense را دریافت نخواهید کرد، که برای اکثر مردم خوب است 🤝، اما اگر شما هم مثل من طرفدار بهره وری هستید، پس این قابل قبول نیست!
اول، بیایید سعی کنیم بفهمیم که چرا اینطور نیست containerClass همین استنباط را می گیرد.
چرا ❓
این Tailwind CSS IntelliSense پسوند VScode، به طور پیش فرض فقط به دنبال آن است class، className و ngClass ویژگی‌های HTML برای ارائه تکمیل کلاس، پیش‌نمایش شناور، لنتینگ و غیره.
ما می توانیم این را با جستجو بررسی کنیم tailwindcss در تنظیمات VScode ما، و اولین نتیجه ویژگی‌های پیشفرض HTML را به ما نشان می‌دهد که تکمیل کلاس، پیش‌نمایش شناور، لینتینگ و غیره برای آنها ارائه شده است.
بنابراین وقتی کلاس‌های tailwind را به یک متغیر اختصاص می‌دهیم، تکمیل کلاس‌ها و پیش‌نمایش‌های شناور را دریافت نمی‌کنیم.
راه حل 💰
تا به حال احتمالاً قبلاً درک کرده اید که برای کاهش این مشکل چه باید کرد.
در تنظیمات، پس از جستجو برای tailwindcss، ما نیاز داریم:
-
را کلیک کنید این مورد را اضافه کنید دکمه
-
Regex را اضافه کنید که با ویژگی‌های HTML سفارشی (نام متغیرها) مطابقت دارد –
.*Class،.*ClassName.
انجام شده! ✅
اکنون باید بتوانید زمانی که کلاس‌های tailwind را به متغیری که با آن ختم می‌شود، تکمیل‌های کلاس را دریافت کنید و پیش‌نمایش‌های شناور را دریافت کنید. Class یا ClassName .
پایان 🌻
برای اکثر مردم، این ممکن است از اهمیت بالایی برخوردار نباشد، اما من همیشه به دنبال کوچکترین پیشرفت ها در تجربه توسعه خود هستم! در صورت تمایل هر پیشنهادی که ممکن است برای من دارید به اشتراک بگذارید 😇.
در اصل، برنامه من این بود که یک موضوع توییتری در مورد این موضوع بسازم. با این حال، پس از بررسی بیشتر، متوجه شدم که توییت ها چندان قابل جستجو نیستند. در نتیجه، تصمیم گرفتم به جای آن یک پست وبلاگی عمیق تر بنویسم.
اگر نکات سریعی مانند این را دوست دارید، ممکن است سایر پست های وبلاگ من را نیز دوست داشته باشید. من همچنین بسیاری از محتوای React، Javascript، Typescript، expo، nextjs را روی خودم به اشتراک می گذارم توییتر.
از اینکه برای خواندن این وبلاگ وقت گذاشتید متشکرم! از پشتیبانی شما بسیار قدردانی میکنم.
