چطور خطای Unknown at rule را در VS Code برطرف کنیم؟
حدود ۳ دقیقه مطالعه
اگر تو پروژه‌هاتون از فریم‌ورک‌های مدرن CSS مثل Tailwind CSS استفاده می‌کنید، احتمالاً این هشدار رو دیدید: وقتی میخواید از دایرکتیوهایی مثل @apply، @theme یا @tailwind، استفاده کنید ویرایشگر VS Code زیر اونهاخط زرد یا قرمز می‌کشه و خطای Unknown at rule css(unknownAtRules) رو نمایش میده.
این اتفاق به این دلیل میفته که لینتر (Linter) پیش‌فرض VS Code، دایرکتیوهای اختصاصی فریم‌ورک‌ها رو به عنوان کدهای استاندارد CSS نمی‌شناسه. اگرچه این هشدار هیچ اختلالی تو کامپایل و اجرای پروژه ایجاد نمی‌کنه، اما در فایل‌های استایل، ظاهر کدها رو آشفته می‌کنه و تمرکز توسعه‌دهنده رو به هم می‌زنه.
در این آموزش کوتاه، یاد می‌گیریم چطوری تو کمتر از یک دقیقه این مشکل رو برای همیشه تو ادیتورمون برطرف کنیم.
اگر از فایل‌های استاندارد .css استفاده می‌کنید
برای غیرفعال کردن این هشدار و نادیده گرفتن دایرکتیوهای ناشناخته توسط VS Code، این مرحله‌ها رو دنبال کنید:
۱. کلیدهای ترکیبی Ctrl + Shift + P (در مک Cmd + Shift + P) رو فشار بدید تا منوی دستوراهای (Command Palette) باز شه.
۲. عبارت settings.json رو تایپ کنید. بین گزینه‌های پیشنهادی، معمولاً سه فایل زیر رو می‌بینید:
Open User Settings (JSON)
Open Default Settings (JSON)
Open Workspace Settings (JSON)
۳. گزینه اول(ممکنه برای شما گزینه اول نباشه)، Open User Settings (JSON) رو انتخاب کنید تا فایل تنظیمات کاربریتون باز شه.
۴. خط کد زیر رو به انتهای این فایل (قبل از بستن آکاردئون اصلی {}) اضافه کنید:
"css.lint.unknownAtRules": "ignore"Ctrl + S (در مک Cmd + S) ذخیره کنید. بلافاصله بعد از ذخیره، همه هشدارهای مربوط به این بخش ناپدید میشن.اگر از فایل‌های
.scss استفاده میکنیداگر تو پروژهاتون در کنار فریم‌ورک‌هایی مثل تیلوند، از پیش‌پردازنده‌ی ساس (Sass) استفاده می‌کنید و پسوند فایل‌های استایل شما
.scss هستش، باید تنظیمات مربوط به این فرمت رو تغییر بدید. به جای کد قبل، کافیه کد زیر رو به همون فایل settings.json اضافه کنید:"scss.lint.unknownAtRules": "ignore"نکته: اگر تو پروژه‌های مختلفتون هم از CSS معمولی و هم از SCSS استفاده می‌کنید، می‌تونید هر دو خط کد رو در فایل تنظیمات قرار بدید تا این خطا تو هیچ‌کدوم از فایل‌ها تکرار نشه.
جمع‌بندی
گاهی اوقات هشدارهای پیش‌فرضِ ابزارهای توسعه، برای کدهای مدرن بهینه‌سازی نشدن و باعث شلوغی محیط کدنویسی میشن. با انجام این تغییر ساده، ادیتورتون رو جوری شخصی‌سازی کردید که تنها خطاهای واقعی و ساختاری کد رو به شما نشون میده.
شما برای حل این مشکل از چه روشی استفاده می‌کردید؟
