10 پلاگین کاربردی VS Code برای فلاتر Flutter (بخش اول)

یکی از بهترین قابلیت هایی که VS Code در اختیار ما برنامه‌نویس ها قرار میده، استفاده از Extension یا افزونه‌ها توی اون هستش. هر برنامه‌نویسی میتونه افزونه‌های خودش رو توسعه بده و اون ها رو برای استفاده عموم منتشر کنه.

در واقع اگه افزونه ها نبودن، نمیتونستیم به راحتی الان اپلیکیشن های فلاتری خودمون رو توی VS Code توسعه بدیم و الان همگی داشتیم از Android Studio استفاده میکردیم و RAM و CPU سیستم خودمون رو در راه استفاده از اندروید استودیو فدا میکردیم :)

توی این ویرگول میخوام 5 تا از کاربردی‌ترین افزونه‌های VS Code رو خدمتتون معرفی کنم تا نهایت لذت رو از برنامه نویسی ببرین.

1. افزونه های رسمی فلاتر (Flutter & Dart Extension)

اولین مورد افزونه رسمی خود فلاتر و دارت هستش که پشتیبانی از زبان دارت و فریمورک فلاتر رو به VS Code شما اضافه میکنه. قابلیت‌هایی مثل Format کردن خودکار کدها، اجرا کردن برنامه از طریق VS Code، دیباگ کردن کدها از طریق VS Code و تمام قابلیت های حیاتی رو به VS Code شما اضافه میکنه.

لینک افزونه Flutter - لینک افزونه Dart

2. افزونه Dart Data Class Generator

اگه با فلاتر به طور حرفه ای کار کرده باشین، مخصوصا با معماری هایی مثل BLoC، این افزونه خیلی به کارتون میاد. به عنوان مثال خیلی وقت ها شده که میخوایم مدلی رو برای دیتاهامون درست کنیم ولی ساختن متدهای toMap و fromMap برای کار کردن با دیتایی که از سرور میاد خیلی از وقتمون رو گرفته باشه. این افزونه خیلی راحت این متدها رو به طور اتوماتیک برامون میسازه.

یا مواقعی که برای State Management به متد copyWith برای ساده تر کردن کارمون نیاز داریم این متد رو هم خودکار برامون ایجاد میکنه. علاوه بر اینها میتونین با این افزونه constructor رو به صورت خودکار برای کلاسهاتون ایجاد کنین، متد toString اونها رو ایجاد کنید و همچنین متد equality اونها رو override کنین (نیاز شما رو به پکیج Equatable در بحث State ها رو هم رفع میکنه).

لینک این افزونه

3. افزونه dart-import

افزونه مورد علاقه من بین تمام این افزونه ها :) خیلی راحت و با یک کلیک کل ایمپورت های شما رو بهینه سازی میکنه! این شکلی از ایمپورت های من هستش قبل بهینه سازی:

و این هم ایمپورت ها بعد از بهینه سازی:

خیلی مرتب تر و تمیز تر. البته که میتونیم این کار رو به صورت دستی هم انجام بدیم، ولی این افزونه خیلی راحت و با یک کلیک همه این کارها رو برامون انجام میده. برای استفاده از اون هم فقط کافیه از قسمت Action های VS Code (میانبر من F1 هستش برای شما رو نمیدونم)، گزینه Fix imports رو کلیک کنید.

لینک این افزونه

4. افزونه bloc:

اگه استفاده از معماری bloc رو بلد باشین، این افزونه خیلی میتونه بهتون کمک کنه. ساختار اولیه bloc و cubit رو به صورت خودکار براتون ایجاد میکنه. ویجت ها رو به صورت اتوماتیک با BlocListener و BlocBuilder و BlocProvider و ... رپ میکنه. و خیلی چیزهای دیگه که توی استفاده از bloc کار شما رو آسون میکنه.

لینک این افزونه

5. افزونه Error Lens:

بعضی ها ممکنه این افزونه رو دوست داشته باشن و بعضی ها هم مثل من از اون متنفر باشن! کاری که این افزونه میکنه اینه که متن کامل ارورها رو روبروی اون خطی که ارور داره به طور کامل مینویسه. از یه طرف خوبه که ارورها رو خیلی راحت پیدا میکنین. از یه طرف هم محیط کدنویسی شما رو خیلی شلوغ میکنه که به همین خاطر من ازش خوشم نمیاد و استفاده نمیکنم.

لینک این افزونه

هر زمان افزونه به درد بخور دیگه ای برای VS Code پیدا کنم توی بخشهای بعدی با شما به اشتراک میزارم. روز خوبی داشته باشین!