فریم ورک React که توسط شرکت متا در سال ۲۰۱۳ منتشر و روانه بازار برنامه نویسان شد ؛ امروزه طرفداران بسیار زیاد و حتی تعصبیای واسه خودش جمع کرده و از دلایل محبوبیت آن میشه به کامپوننت محور (Component base) بودن این فریم ورک اشاره کرد.
ویژوال استودیو کد (Visual Studio Code) و ریکت (React) عالی ترین ترکیبیه که یک برنامه نویس میتونه بزنه ؛ چون هردو غول های مطرحی هستن که هزاران هزار کتابخانه و افزونه برای بهتر کد نوشتن و راحت تر کار کردن دارن.
اما اینی که بشینی همه اونارو تست بکنی و بسنجی که کدوم بهتره یکم دور از منطق و نشدنیه ؛ اما نگران این موضوع نباشید چرا که استادان وب پنج تا از بهترین های اونارو همراه با لینک دانلودشون برای شما آماده کرده تا بتونید از اونا استفاده بکنید
۱.افزونه React Snippets
در صدر لیست ما جای این افزونه قدرتمنده. این افزونه دنیایی از تیکه کد های آماده فریم ورک های React, Redux و React-Native رو در خودش جای داده تا هم احتمال خطا هارو پایین تر بیاره و هم توی زمانتون صرفه جویی بکنه و شما نیاز نباشه یسری کد تکراری رو بار ها و بار ها بنویسید.
برای مثال ؛ قطعا پرکاربرد ترین موضوع در ریکت کامپوننت های اون هستند و شما برای ساخت برنامه ریکتیتون باید چندین و چند کامپوننت ایجاد بکنید. خب پس نتیجه میگیریم که اگه بخوایم همش این دستورات تکراری رو تایپ بکنیم هم وقتمون گرفته میشه هم حوصله سر بره. حالا راه حل چیه ؟ این که این افزونه رو روی وی اس کدمون نصب کنیم و این دستور رو تایپ بکنیم و بزنیم روی Enter
“rfce”
نصب
برای نصب این افزونه فقط کافیه کلید ترکیبی “Ctrl + P” رو بزنی و دستور
“ext install dsznajder.es7-react-js-snippets”
رو تایپ کنی و بزنی روی Enter. و حالا واست افزونه رو پیدا میکنه و میتونی از طریق بازار خود وی اس کد اونو نصب کنی.
اگه از این طریق نتونستی نصبش بکنی جای نگرانی نداره ؛ میتونی از طریق لینک زیر که مال خود شرکت مایکروسافته اونو دانلود و نصبش بکنی و اگر نمیدونی چجوری ؛ به این مقاله برو آموزش نصب افزونه های ویژوال استودیو کد رو داخلش گذاشتیم 🙂
دانلود از طریق وبسایت رسمی مایکروسافت : برای دانلود کنید
۲.افزونه VSCode React Refactor
با استفاده از این افزونه میتونی کدهای خودت رو به راحتی بازسازی کنی. مثلاً اگه یه بخش از کدت خیلی طولانی و شلوغ شده، میتونی با این افزونه اون رو به چند بخش کوچیکتر و مرتبتر تبدیل کنی. خلاصه، این افزونه بهت کمک میکنه کدهایی تمیزتر و قابلفهمتر بنویسی، بدون اینکه بخوای دستی زیاد وقت بزاری.
نصب
برای نصب این افزونه فقط کافیه کلید ترکیبی “Ctrl + P” رو بزنی و دستور
“ext planbcoding.vscode-react-refactor”
رو تایپ کنی و بزنی روی Enter. و حالا واست افزونه رو پیدا میکنه و میتونی از طریق بازار خود وی اس کد اونو نصب کنی.
اگه از این طریق نتونستی نصبش بکنی جای نگرانی نداره ؛ میتونی از طریق لینک زیر که مال خود شرکت مایکروسافته اونو دانلود و نصبش بکنی و اگر نمیدونی چجوری ؛ به این مقاله برو آموزش نصب افزونه های ویژوال استودیو کد رو داخلش گذاشتیم 🙂
دانلود از طریق وبسایت رسمی مایکروسافت : برای دانلود کنید
۳.افزونه Import Cost
یچیزی که قطعا توی همه پروژه های ریکتی هست ؛ Import کردن های پی در پیه. اما شما از حجمشون خبر دارید ؟ میدونید که اگه حجمشون بیش از حد بشه سرعت وبسایتتون تا یه حد غیرقابل چشم پوشی پایین میاد و این فاجعست ! اما خبر خوب اینه که یه افزونه توی وی اس کد وجود داره که باهاش میتوند حجم پکیج ها و کتابخونه ها و ماژول های وارد شده به پروژهتون رو ببینید و مدیریت بهتری روی اون ها داشته باشید. خب ؛ چی از این بهتر ؟ تازه اگه حجمشون دیگه خیلی زیاد باشه رنگ متنش قرمز میشه و شما میتونید بفهمید که عه این پکیج خیلی پرروعه و باید از فایلتون بندازیدش بیرون (البته اوناییشون که مهم نیستن یا ازشون استفاده نمیکنید).
نصب
برای نصب این افزونه فقط کافیه کلید ترکیبی “Ctrl + P” رو بزنی و دستور
“ext install wix.vscode-import-cost”
رو تایپ کنی و بزنی روی Enter. و حالا واست افزونه رو پیدا میکنه و میتونی از طریق بازار خود وی اس کد اونو نصب کنی.
اگه از این طریق نتونستی نصبش بکنی جای نگرانی نداره ؛ میتونی از طریق لینک زیر که مال خود شرکت مایکروسافته اونو دانلود و نصبش بکنی و اگر نمیدونی چجوری ؛ به این مقاله برو آموزش نصب افزونه های ویژوال استودیو کد رو داخلش گذاشتیم 🙂
دانلود از طریق وبسایت رسمی مایکروسافت : برای دانلود کنید
۴.افزونه Simple React Snippets
بیا یکم سریعتر کد بزنیم ! این افزونه شامل یکسری کد های آمادست که فقط کافیه دستور مرتبط با اونو تابپ کنی تا بهت نمایشش بده و بتونی فرضا با تایپ سه حرف یک کامپوننت ایجاد کنی و این معرکست ! حالا باهم بریم چند مورد ازونارو بررسی کنیم :
rfc – برای ایجاد یک کامپوننت تابعی (Functional Component) با استفاده از ES6.
- rcc – برای ایجاد یک کامپوننت کلاسی (Class Component) با استفاده از ES6.
- rsc – برای ایجاد یک کامپوننت تابعی بدون State.
- rscp – برای ایجاد یک کامپوننت تابعی بدون State با PropTypes.
- rccp – برای ایجاد یک کامپوننت کلاسی با PropTypes.
- useState – برای ایجاد هوک useState.
- useEffect – برای ایجاد هوک useEffect.
- reduxmap – برای ایجاد تابع mapStateToProps و mapDispatchToProps در Redux.
اما این افزونه خفن فقط به همین چندتا دستور ختم نمیشه و کلی دستور دیگه هم داره که میتونی از طریق داکیومنتش داخل خود وی اس کد اونارو ببینی و استفاده بکنی.
نصب
برای نصب این افزونه فقط کافیه کلید ترکیبی “Ctrl + P” رو بزنی و دستور
“ext install burkeholland.simple-react-snippets”
رو تایپ کنی و بزنی روی Enter. و حالا واست افزونه رو پیدا میکنه و میتونی از طریق بازار خود وی اس کد اونو نصب کنی.
اگه از این طریق نتونستی نصبش بکنی جای نگرانی نداره ؛ میتونی از طریق لینک زیر که مال خود شرکت مایکروسافته اونو دانلود و نصبش بکنی و اگر نمیدونی چجوری ؛ به این مقاله برو آموزش نصب افزونه های ویژوال استودیو کد رو داخلش گذاشتیم 🙂
دانلود از طریق وبسایت رسمی مایکروسافت : برای دانلود کنید
۵.افزونه Prettier
خب خب خب ؛ مگه میشه همچین مقاله ای وجود داشته باشه و این افزونه دوست داشتنی داخلش نباشه ؟ یکی که از مشکلاتی از اکثر برنامه نویسا تو حوزه های مختلف دارنش کثیف بودن کداشونه ؛ حالا این کثیف بودن یعنی چی ؟ یعنی باید کدامونو بفرستیم حموم تا تمیز بشن ؟ راستش حموم کردن میلیارد ها و حتی بیشتر خط کد تو این بی آبی یکم غیرمنطقیه ؛ پس اینجا Prettier وارد عمل میشه و میگه آقا شما هرجور خواستی کد بزن من میام واست تمیزش میکنم. تا باهاش کار نکنید متوجه نمیشید که این افزونه چه نعمتیه و چقدر توی روند توسعه و قابلیت خوانایی کدتون تاثیر داره.
برخلاف قبلیا این افزونه فقط به React محدود نمیشه و شما میتونید توی همه پروژه هاتون در زبان ها و فریم ورک های مختلف ازش استفاده بکنید.
نصب
برای نصب این افزونه فقط کافیه کلید ترکیبی “Ctrl + P” رو بزنی و دستور
“ext install esbenp.prettier-vscode”
رو تایپ کنی و بزنی روی Enter. و حالا واست افزونه رو پیدا میکنه و میتونی از طریق بازار خود وی اس کد اونو نصب کنی.
اگه از این طریق نتونستی نصبش بکنی جای نگرانی نداره ؛ میتونی از طریق لینک زیر که مال خود شرکت مایکروسافته اونو دانلود و نصبش بکنی و اگر نمیدونی چجوری ؛ به این مقاله برو آموزش نصب افزونه های ویژوال استودیو کد رو داخلش گذاشتیم 🙂
دانلود از طریق وبسایت رسمی مایکروسافت : برای دانلود کنید
نتیجه گیری
به طور کلی جهان بی انتهای افزونه های خوب React ؛ فقط به همین پنج مورد خلاصه نمیشه و هزاران افزونه خفن و کاربردی دیگه در دیگر ادیتور ها واسه این غول قدرتمند جهان تکنولوژی وجود داره.
با این حال این پنج مورد نمرات بالاتر و نصب بیشتری نسبت به سایرین توی این موضوع داشتن و ما تمامی اون ها رو در قالب یک مقاله مختصر و مفید همراه با آموزش نصبشون و لینک دانلودشون برای شما قرار دادیم تا بتونید از نهایت قدرت این فریم ورک و این کد ادیتور بهره ببرید.
