توی این روزها که بیشتر ما ها (بجز اون‌هایی که در و دیوار رو لیس میزنن!) بخاطر کرونا تا جایی که شرایط زندگی بهمون اجازه میده سعی کردیم خودمون رو قرنطینه کنیم، رفتن سراغ کارهایی که قبلا فرصت انجامش رو نداشتیم، ایده بدی نباید باشه!
از بین کلی کار که حالا فرصت داشتم اما حوصله انجامش رو نداشتم، نوشتن یک 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 Commit Reminder
Remove Commit Reminder
Get Commit Reminders
Clear Commit Reminders
انتشار
قسمت خیلی جذاب ساخت افزونه اینه که خیلی راحت میتونید اون رو منتشر کنید!
شما همین الان اگه توی لیست فزونه های VSCode خودتون، عنوان commit reminder رو جستجو کنید، (ممکنه چندتا افزونه با اسم مشابه پیدا میکنید، اونی که با اسم BitBird منتشر شده و آیکنش توی تصویر مقاله هست رو انتخاب کنید) میتونید افزونه من رو نصب کنید!
و یا از اینجا مستقیما دریافتش کنید.
اگه فرصتش رو دارید لطفا نصب کنید و اگه تونست کمکی بکنه، من رو از شنیدنش بی نصیب نگذارید.
