ابزار های vscode برای اپ
سلام
بجای اندروید استودیو بخوایم ازvscodeاستفاده کنیم برای نوشتن اپ بخصوص در فلاتر چه ابزارهایی رو باید نصب کنبم؟
وهم چنین ابزاری که بشه موقع نوشتن کد اپ بصورت زنده دید اپ طراحی شده روچیه
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
اول که پلاگین دارت و فلاتر رو نصب کنید. این مورد رو در داکیومنت خود فلاتر هم میتونید بخونید و این مرحله رو من فاکتور میگیرم:
https://flutter.dev/docs/development/tools/vs-code
شما اول یه تم مناسب نصب کنید. من از تم متریال استفاده میکردم (که چون با پایتون نمیساخت مجبور شدم عوضش کنم، با فلاتر مشکل نداره و خیلی خوبه؛ کلا تم یه چیز شخصیه. شاید دلیل عوض کردن تم من هم تنوع بود)
تم متریال:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
تم فعلی من:
https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
بعد نصب اون حتما آیکون های اکسپلور رو عوض کنید.
که من آیکون های متریال رو پیشنهاد میکنم:
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
تغییر فونت ادیتور هم ممکن هستش؛ اما باید فونت مناسب داشته باشید که معمولا خود تم ها فونت های سازگار با خودشون رو دارند که من نیازی به تغییر نمیبینم.
مرحله دیگه ای که هستش نصب پلاگین Snipp هستش که باعث میشه مطابق گفته خودتون استیت لس و استیت فول و انواع بیلدر و سایر چیز ها رو سریع بسازید.
این پلاگین رو از اینجا نصب کنید:
https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets
راهنماش رو هم تو توضیحات میتونید بخونید مثلا با نوشتن statelessW میتونید ویجت استیت لس بسازید (دو سه کلمه رو بزنید تو سجست ها میاد)
برای شبیه ساز؛ من هم از NOX استفاده میکنم. برای اتصال NOX نیاز به یکسری کامند دارید که من اوایل خودم دستی وارد میکردم ولی پیشنهاد میکنم مخزن زیر رو ببینید:
https://github.com/mousedoc/nox-adb-connector
این هم کارتون رو ساده میکنه.
بعد نصب NOX، به لینک گیت هاب برید و nox-adb-connector.exe رو از پوشه EXE دانلود کنید و توی پوشه ای که NOX رو نصب کردید بریزید. حالا شبیه ساز رو اجرا کنید و بعد این که بالا اومد فایل nox-adb-connector.exe رو باز کنید.
با انجام این کار خودکار اسم دیوایس پایین سمت راست توی VSCode میاد.
در VSCode هم هات ریلود و همه چیز رو داریم. علاوه بر یه پنل کوچیک که به صورت شناور باز میشه موقع اجرا برنامتون، هر وقت فایل رو سیو کنید (اگه اروری نداشته باشه فایلتون) خودکار هات ریلود میشه برنامه و تغییرات اعمال میشه (میتونید به صورت زنده تغییرات رو ببینید)
برای اجرا برنامه میتونید از کلید ctrl + f۵ یا از منو Debug -> Start Without Debugging رو انتخاب کنید.
با انجام این کار پروژتون بیلد گرفته میشه و روی شبیه ساز اجرا میشه. یه پنل شناور هم باز میشه براتون (برای متوقف کردن و هات ریستارت و...)
یه مورد هم دلخواهه و بستگی به سبک کدنویسی شما داره.
شما وقتی در VSCode فرضا اسم یه ویجت رو میزنی، خودکار پارامتر های ویجت رو براتون لیست میکنه.
شما میتونید فرضا با کلید Enter یا Tab یکی از پارامتر ها رو انتخاب کنید و وارد کنید. بعضی افراد سبک کدنویسشون طوریه که پارامتر های ویجت رو هر کدوم در یک خط وارد میکنن و نیاز دارن بدون قبول پیشنهاد Enter بزنن.
برای این که قبول پیشنهاد ها با اینتر رو غیرفعال کنید (باید با Tab پیشنهاد ها رو قبول کنید)، کلید Ctrl + shift + p رو بزنید و عبارت settings.json رو وارد کنید.
در اونجا خط زیر رو وارد کنید و فایل رو ذخیره کنید:
"editor.acceptSuggestionOnEnter": "off",البته من خودم این مورد رو غیرفعال کردم چون زیاد نیازی بهش نمیبینم؛ اگر چه سبک منم نیاز به اینتر زیاد داره اما با یه بار چپ و راست کردن کرسر میتونم پیشنهاد رو رد کنم.
در خود VSCode هم چیزای بسیار زیادی داریم که کمک میکنه به سرعت کدنویسیتون. فرضا انتخابگر های چندگانه، انتخابگر های بلاکی و...
که اینا رو باید خودتون از توی اینترنت پیدا کنید چون خیلی زیاد هستند و VSCode هم دستتون رو باز گذاشته.
یه مورد رو که بیشتر به فلاتر مربوطه براتون اینجا میگم.
فرضا شما اگه یه ویجت استیت فول ساختید و اسمش بوده Home و تصمیم گرفتید اسم اون رو تغییر بدید. شما نیازی ندارید دستی اینک ار رو انجام بدید کافیه روی اسم کلاس برید (همون کلاسی که از StatefulWidget ارث بری میکنه) و کلید F۲ رو بزنید و اسم جدید رو وارد کنید.
خودکار اسم ویجتتون تغییر میکنه (حتی کلاسی که از State<Home> ارث بری کردید هم اسمش تغییر میکنه، البته اینا رو شاید متوجه نشید که دقیق چی میگم باید خودتون اجرا کنید)
سلام
واسه برنامه نویسی فلاتر روی vs code میتونید از پلاگین زیر استفاده کنید.
https://github.com/Dart-Code/Flutter.git
همچنین باید Flutter SDK روی سیستم شما نصب و کانفیگ شده باشه...
چنین ابزاری که گفتین (موقع نوشتن کد اپ بصورت زنده دید اپ طراحی شده )، فکر نکنم چنین چیزی وجود داشته باشه.
اگه هم داشته باشه، اطلاع خاصی ازش ندارم...
واسه تست و Debug هم میتونید از گوشی خودتون به عنوان شبیه ساز استفاده کنید و یا اینکه از شبیه سازهای مجازی استفاده کنید.
اول که پلاگین دارت و فلاتر رو نصب کنید. این مورد رو در داکیومنت خود فلاتر هم میتونید بخونید و این مرحله رو من فاکتور میگیرم:
https://flutter.dev/docs/development/tools/vs-code
شما اول یه تم مناسب نصب کنید. من از تم متریال استفاده میکردم (که چون با پایتون نمیساخت مجبور شدم عوضش کنم، با فلاتر مشکل نداره و خیلی خوبه؛ کلا تم یه چیز شخصیه. شاید دلیل عوض کردن تم من هم تنوع بود)
تم متریال:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
تم فعلی من:
https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
بعد نصب اون حتما آیکون های اکسپلور رو عوض کنید.
که من آیکون های متریال رو پیشنهاد میکنم:
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
تغییر فونت ادیتور هم ممکن هستش؛ اما باید فونت مناسب داشته باشید که معمولا خود تم ها فونت های سازگار با خودشون رو دارند که من نیازی به تغییر نمیبینم.
مرحله دیگه ای که هستش نصب پلاگین Snipp هستش که باعث میشه مطابق گفته خودتون استیت لس و استیت فول و انواع بیلدر و سایر چیز ها رو سریع بسازید.
این پلاگین رو از اینجا نصب کنید:
https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets
راهنماش رو هم تو توضیحات میتونید بخونید مثلا با نوشتن statelessW میتونید ویجت استیت لس بسازید (دو سه کلمه رو بزنید تو سجست ها میاد)
برای شبیه ساز؛ من هم از NOX استفاده میکنم. برای اتصال NOX نیاز به یکسری کامند دارید که من اوایل خودم دستی وارد میکردم ولی پیشنهاد میکنم مخزن زیر رو ببینید:
https://github.com/mousedoc/nox-adb-connector
این هم کارتون رو ساده میکنه.
بعد نصب NOX، به لینک گیت هاب برید و nox-adb-connector.exe رو از پوشه EXE دانلود کنید و توی پوشه ای که NOX رو نصب کردید بریزید. حالا شبیه ساز رو اجرا کنید و بعد این که بالا اومد فایل nox-adb-connector.exe رو باز کنید.
با انجام این کار خودکار اسم دیوایس پایین سمت راست توی VSCode میاد.
در VSCode هم هات ریلود و همه چیز رو داریم. علاوه بر یه پنل کوچیک که به صورت شناور باز میشه موقع اجرا برنامتون، هر وقت فایل رو سیو کنید (اگه اروری نداشته باشه فایلتون) خودکار هات ریلود میشه برنامه و تغییرات اعمال میشه (میتونید به صورت زنده تغییرات رو ببینید)
برای اجرا برنامه میتونید از کلید ctrl + f۵ یا از منو Debug -> Start Without Debugging رو انتخاب کنید.
با انجام این کار پروژتون بیلد گرفته میشه و روی شبیه ساز اجرا میشه. یه پنل شناور هم باز میشه براتون (برای متوقف کردن و هات ریستارت و...)
یه مورد هم دلخواهه و بستگی به سبک کدنویسی شما داره.
شما وقتی در VSCode فرضا اسم یه ویجت رو میزنی، خودکار پارامتر های ویجت رو براتون لیست میکنه.
شما میتونید فرضا با کلید Enter یا Tab یکی از پارامتر ها رو انتخاب کنید و وارد کنید. بعضی افراد سبک کدنویسشون طوریه که پارامتر های ویجت رو هر کدوم در یک خط وارد میکنن و نیاز دارن بدون قبول پیشنهاد Enter بزنن.
برای این که قبول پیشنهاد ها با اینتر رو غیرفعال کنید (باید با Tab پیشنهاد ها رو قبول کنید)، کلید Ctrl + shift + p رو بزنید و عبارت settings.json رو وارد کنید.
در اونجا خط زیر رو وارد کنید و فایل رو ذخیره کنید:
"editor.acceptSuggestionOnEnter": "off",البته من خودم این مورد رو غیرفعال کردم چون زیاد نیازی بهش نمیبینم؛ اگر چه سبک منم نیاز به اینتر زیاد داره اما با یه بار چپ و راست کردن کرسر میتونم پیشنهاد رو رد کنم.
در خود VSCode هم چیزای بسیار زیادی داریم که کمک میکنه به سرعت کدنویسیتون. فرضا انتخابگر های چندگانه، انتخابگر های بلاکی و...
که اینا رو باید خودتون از توی اینترنت پیدا کنید چون خیلی زیاد هستند و VSCode هم دستتون رو باز گذاشته.
یه مورد رو که بیشتر به فلاتر مربوطه براتون اینجا میگم.
فرضا شما اگه یه ویجت استیت فول ساختید و اسمش بوده Home و تصمیم گرفتید اسم اون رو تغییر بدید. شما نیازی ندارید دستی اینک ار رو انجام بدید کافیه روی اسم کلاس برید (همون کلاسی که از StatefulWidget ارث بری میکنه) و کلید F۲ رو بزنید و اسم جدید رو وارد کنید.
خودکار اسم ویجتتون تغییر میکنه (حتی کلاسی که از State<Home> ارث بری کردید هم اسمش تغییر میکنه، البته اینا رو شاید متوجه نشید که دقیق چی میگم باید خودتون اجرا کنید)