اکستنشن تبدیل Class کامپوننت به Function کامپوننت (Hook)

نیاز من به چنین اکستنشی از جایی شروع شد که بهم یه پروژه‌ی قدیمی React ای رو دادن و گفتن اون رو توسعه بده، من چند ماهی میشه که دارم از Hook ها استفاده میکنم و دیگه از bind کردن function ها و this.setState کردن خسته شدم، واسه همین تصمیم گرفتم پروژه رو به ساختار Hook ها refactor کنم، از طرفی هم، زمان کافی واسه این refactor کردن ندارم، اول خواستم خودم دست به کار بشم و واسه این کار یه اکستشن بنویسم، ولی گفتم قبلش یه سرچی بزنم توی نت ببینم چیزی پیدا میشه، که بلللله، به قول پسرداییم: همیشه یه نفر پیدا میشه که قبل از تو به اون فکر کرده، اسم این اکستنشن دوست داشتی Glean عه که واسه VSCode نوشته شده

فقط برای اینکه از Hook پشتیبانی کنه باید بعد از نصب این اکستنشن، کانفیگ زیر رو انجام بدین

File > Preferences > Settings

حالا اون بالا کلمه glean رو سرچ کنین، مورد اول که نوشته Glean: Experiments یه خرده پایین ترش نوشته Edit in settings.json ، روش کلیک کنید و خط زیر رو به فایل json اضاف کنین.

"glean.experiments": ["hooksForFunctionalComponents"]

بعد از کانفیگ بالا و کانورت کردن، اگه سیستم عاملتون ویندوز باشه به خطا میخورید، که من اینجا یه pull request دادن و منتظر تایید شدنشم. (خب الان تایید شد و یه نسخه ریلیز جدید دادن)

حالا یکی از فایل‌های پروژتون که Class کامپوننت نوشتین رو باز کنین و از قسمتی که کلمه Class شروع میشه تا انتهای کاراکتر "{" که کلاس کامپوننت شما تموم میشه رو Select کنید، به کلمه Class اسکرول کنید و میبینید که یه چراغ زرد رنگ ظاهر شده، روش کلیک کنید و Convert Class to Function رو کلیک کنید.