‏@shadcn/lint: لینتری که مستقیم به ایجنت کدنویسی درس می‌ده

خیلی از تیم‌ها برای اینکه جلوی شخصی‌سازی نادرست کامپوننت‌ها رو بگیرن، از تایپ‌اسکریپت کمک می‌گیرن؛ مثلا پراپ style یه دکمه رو محدود می‌کنن که فقط margin و width قبول کنه. این روش کار می‌کنه، ولی وقتی یه ایجنت کدنویسی اشتباه بزنه، خطای تایپ‌اسکریپت فقط می‌گه پراپ غلطه؛ نمی‌گه پس چیکار کنه.

@shadcn/lint دقیقا همین‌جا فرق می‌کنه. وقتی یه ایجنت به‌جای استفاده از سایز آماده، مستقیم کلاس پدینگ اضافه کنه، لینتر بهش می‌گه دقیقا چیکار کنه:

<Button className="p-4">Submit</Button>
// خطا: این دکمه پدینگ خودشو مدیریت می‌کنه؛
// به‌جاش از سایز (sm, lg) یا margin استفاده کن

قانون‌ها تو خود کانفیگ لینتر تعریف می‌شن (چه چیزی مجازه، چه چیزی نه) و می‌شه برای هر کامپوننت جدا تنظیمش کرد؛ مثلا اجازه بدی تایتل یه کارت اندازه‌ی فونتش عوض بشه ولی فونت‌فمیلیش ثابت بمونه، یا محدودش کنی که پدینگ فقط از مقادیر تعریف‌شده تو تم استفاده بشه نه مقدار دلخواه مثل p-[13px]. لازم نیست از خود shadcn/ui استفاده کنی؛ روی هر کامپوننت Tailwind دیگه‌ای هم، حتی از پکیج‌های بیرونی، جواب می‌ده.

تیم سازنده می‌گه این ابزار رو روی بیش از ۱۵۰ اجرای وظیفه با مدل‌های مختلف (از جمله Sonnet 5، Haiku 4.5، Opus 5 و مدل‌های GPT) تست کرده و تقریبا تو همه‌شون، ایجنت با یه بار دریافت فیدبک لینتر به صفر خطا رسیده. تو اجراهایی که با مدل‌های Claude انجام شده، رفع خطا با کمک فیدبک لینتر بین ۱۰ تا ۴۸ درصد ارزون‌تر از تکیه‌ی صرف به قانون‌های تایپ‌اسکریپت تموم شده. نصبش هم به Node.js نسخه‌ی 20.19 به بالا و ESLint نسخه‌ی 9.30 یا Oxlint نسخه‌ی 1.80 به بعد نیاز داره.

نکات کلیدی:

• @shadcn/lint یه لینتر برای پروژه‌های Tailwind v4 هست، سازگار با ESLint و Oxlint
• برخلاف خطای تایپ‌اسکریپت، پیام خطاش دقیقا می‌گه به‌جای کلاس اشتباه از چی استفاده کنی
• با contracts می‌شه برای هر کامپوننت جدا مشخص کرد چه تغییری مجازه
• نیازی به استفاده از shadcn/ui نداره؛ رو هر کامپوننت Tailwind دیگه‌ای هم کار می‌کنه
• روی بیش از ۱۵۰ اجرای وظیفه با مدل‌های مختلف تست شده و اکثرا با یه بار تصحیح به صفر خطا رسیدن
• تو اجراهای Claude، رفع خطا با فیدبک لینتر ۱۰ تا ۴۸ درصد ارزون‌تر بوده