ساخت افزونه برای VSCode در چند قدم - ویژه دوران قرنطینه!

توی این روزها که بیشتر ما ها (بجز اون‌هایی که در و دیوار رو لیس میزنن!) بخاطر کرونا تا جایی که شرایط زندگی بهمون اجازه میده سعی کردیم خودمون رو قرنطینه کنیم، رفتن سراغ کارهایی که قبلا فرصت انجامش رو نداشتیم، ایده بدی نباید باشه!از بین کلی کار که حالا فرصت داشتم اما حوصله انجامش رو نداشتم، نوشتن یک Extension ساده برای VSCode بامزه به نظر میومد.ایده اولیهاحتمالا برای شما هم مثل من زیاد پیش اومده که قرار شده تغییری رو توی پروژه ایجاد کنید، کار رو شروع کردید و بعد از تغییر توی ده تا فایل مختلف، هربار چون هنوز از نتیجه مطمئن نبودید بخاطر نزدن کامیت اشتباه کار رو ادامه دادید و وقتی پیروزمندانه رفتید سراغ کامیت کردن نهایی، فراموش کردید که اون فایل رو دیگه چرا عوض کردم؟ تو این فایله چه کارهایی کردم و ... (که معمولا اینجور مواقع یا گله‌ای کامیت میکنیم یا چندتا فحش میدیم و میریم سراغ اینکه، چی چرا اینطور شده!)اگه جایی بشه یه جور کامیت موقت کرد شاید این مشکل رو حل کنه.شروعقطعا بهترین جا برای شروع، داکیومنت خود مایکروسافت هست که اینجا میتونید ببینیدش اما خلاصه اون میشه اینکه براس ساخت افزونه باید از ابزاری به اسم Yeoman استفاده کنید، که با دستور زیر نصب میشه:(طبیعتا باید قبل از اون node.js رو نصب کرده باشید)npm install -g yo generator-codeبعد از اون با زدن yo code اولین پروژه شما که به صورت پیش Hello World هستش، ساخته میشه.پروژه رو با VSCode باز کنید و با F5 اجراش کنید، یه پنجره دیگه باز میشه، توی اون Command Palette رو باز کنید (Ctrl + Shift + P) و دستور Hello World رو بزنید تا از دیدن اولین گام توی ساختن افزونه لذت ببرید!قدم بعدیتوی پروژه ای که ایجاد کردید دوتا فایل اصلی وجود داره یکی package.json و یکی extension.ts.به طور خیلی خیلی خلاصه برای شروع باید بدونید دستوراتی مثل همین Hello World رو میتونید توی فایل اول تعریف کنید و توی فایل دوم مشخص کنید که این دستور قراره چه کارهایی بکنه.توی این مرحله اول باید بدونید چه ایده ای رو قراره پیاده‌سازی کنید و بعد اینجا توی لیست API هایی که در اختیارتون قرار گرفته بگردید و ببینید چه ابزاری در اختیار دارید.* نکته اول: در مقایسه با داکیومنت هایی که مثلا برای React یا Angular هست، به نظرم داکیومنت چندان خوبی براش آماده نشده.* نکته دوم: بعضی از قابلیت هایی که داره توی داکیومنت نیست! (برای مثلا لیست دستورات داخلی که خود VSCode جدای از API ها در اختیارتون قراره میده اینجا میتونید پیدا کنید اما اگه این حلقه رو اجرا کنید توی برنامه، تعداد خیلی بیشتری دستور می‎بینید!vscode.commands.getCommands().then(command =>{ console.log(command); })نکته سوم: بهتره در کنار داکیومنت‌ها نمونه کدی که روی گیت‌هاب شون قرار دادن رو هم نگاه کنید.من چکار کردم؟میتونید اینجا روی گیت‌هابم سورس پروژه رو ببینید، اما به عنوان توضیح کمی بیشتر، من برای پیاده سازی ایده‌ام، تصمیم گرفتم چندتا دستور ایجاد کنم، با زدن دستور اول کاربر کامنتی که داره رو وارد میکنه، و من اون رو به همراه آدرس فایل، تاریخ و توضیحی که داده جایی نگه میدارم.ممکنه چند دقیقه بعد تغییر جدیدی توی همون فایل ایجاد کنید و به این نتیجه برسید که اون توضیح مناسب نبوده، خوب هنوز اتفاق بدی نیفتاده دوباره دستور Add Commit Reminder رو میزنید و متن جدید رو جایگزین قبلی میکنید، یا اصلا تصمیم میگیرید این فایل نباید الان کامیت بشه یا تغییر داده بشه که خوب با دستور Remove Commit Reminder اون رو از لیست یادآوری هاتون حذف میکنید.و وقتی کار تموم شد، من اسکریپت گیت تغییراتی که ایجاد کرده رو بهش میدم.استفاده از دستور Add موقع ویرایش فایل جاریدستوراتی که توی این نسخه وجود داره:Add Commit ReminderRemove Commit ReminderGet Commit RemindersClear Commit Remindersنمونه خروجی، اسکریپت تولید شده با دستور Get Commit Remindersانتشارقسمت خیلی جذاب ساخت افزونه اینه که خیلی راحت میتونید اون رو منتشر کنید!شما همین الان اگه توی لیست فزونه های VSCode خودتون، عنوان commit reminder رو جستجو کنید، (ممکنه چندتا افزونه با اسم مشابه پیدا میکنید، اونی که با اسم BitBird منتشر شده و آیکنش توی تصویر مقاله هست رو انتخاب کنید) میتونید افزونه من رو نصب کنید!و یا از اینجا مستقیما دریافتش کنید.اگه فرصتش رو دارید لطفا نصب کنید و اگه تونست کمکی بکنه، من رو از شنیدنش بی نصیب نگذارید.