بسته افزونه برای VS Code ایجاد کنید

بررسی اجمالی

من از اوایل سال 2016 از VS Code استفاده می‌کردم که مدت زیادی از انتشار اولیه آن نگذشته بود. با تمام ویژگی‌ها و قابلیت‌های سفارشی‌سازی که به‌صورت خارج از جعبه ارائه می‌کند، قویاً معتقدم که بهترین ویرایشگر کد تا به امروز است. ناگفته نماند اکوسیستم افزونه‌ها که VS Code را تقریباً قادر می‌سازد. می‌توانید برای هر چیزی که فکرش را بکنید افزونه‌هایی پیدا کنید، و حتی اگر به چیزی فکر نکرده‌اید، باز هم افزونه‌ای برای آن وجود دارد. 😄

هنگامی که به VS Code عادت کردید، افزونه های بیشتری نصب خواهید کرد. حتی ممکن است در برخی مواقع شروع به ایجاد یک لیست سفارشی از افزونه های مورد علاقه خود کنید. آنها می توانند از موارد عمومی تا پروژه یا زبان خاص متغیر باشند. همانطور که فهرست به ناچار بزرگ می شود، مدیریت آن کمی دردسرساز می شود. گاهی اوقات حتی می توانید فراموش کنید که چه افزونه هایی را نصب کرده اید و چه کاری انجام می دهند. 😄 چگونه می توانید در این زمینه کار کنید؟ خوب، یکی از راه ها این است که بسته افزونه خود را بسازید.

بسته الحاقی چیست؟

بسته افزودنی مجموعه ای از افزونه ها است که می توانید با یک کلیک آن ها را نصب کنید. بسته بندی برنامه های افزودنی خود در یک بسته واحد مزایای خاصی را ارائه می دهد. برای مثال، می‌توانید یک بسته با پسوندهای «جهانی»، بسته دیگری برای پروژه‌های خاص، و غیره داشته باشید. یا می‌توانید بسته‌های مختلفی برای فعالیت‌های مختلف، مانند نوشتن کد، آزمایش، مستندات، و غیره داشته باشید. همراه با فضای کاری VS Code، بسته‌های افزونه به شما انعطاف‌پذیری و کنترل بیشتری بر برنامه‌های افزودنی می‌دهد.

بسته های برنامه افزودنی همچنین برای به اشتراک گذاری برنامه های افزودنی خود با دوستان یا همکارانتان مفید هستند. در نهایت، می‌توانید بسته‌ای برای پشتیبان‌گیری از برنامه‌های افزودنی خود ایجاد کنید و سپس آن‌ها را در یک دستگاه جدید یا پس از نصب جدید VS Code زمانی که هنوز همگام‌سازی را پیکربندی نکرده‌اید (یا اگر نمی‌خواهید از آن استفاده کنید) بازیابی کنید.

خب، خلاصه، بریم سر اصل مطلب.

پیش نیازها

1. برای ایجاد بسته افزودنی خود، شما نیاز دارید:

   1. VS Code یا VS Code Insiders.

   2. Node.js + npm و Git.

2. (اختیاری) برای انتشار بسته برنامه افزودنی خود، به رمز دسترسی شخصی (PAT) نیاز دارید. پس از تکمیل این مرحله، باید حساب خود را در Visual Studio Marketplace ایجاد کنید، سازمانی در Azure DevOps و Personal Access Token (PAT) ایجاد شده است.

یک بسته افزونه ایجاد کنید

در این آموزش، یک بسته ساده با چند پسوند ایجاد می‌کنید و سپس بسته را در بازار ویژوال استودیو منتشر می‌کنید. به این صورت خواهد بود:

• به صورت محلی:

• پس از انتشار:

  

توجه داشته باشید: اگر می خواهید فایل های منبع را فورا بررسی کنید، به مخزن GitHub که برای این آموزش ایجاد کردم بروید.

1. یک پوشه جدید برای بسته افزونه خود ایجاد کنید (می توانید آن را هر طور که می خواهید نام گذاری کنید) و آن را در VS Code باز کنید.

2. در پوشه، a را ایجاد کنید package.json فایلی که یک فایل مانیفست پسوندی است. محتوای فایل به شرح زیر است:

   {
       "name": "my-first-pack",
       "displayName": "Mister Gold Extension Pack",
       "version": "0.0.1",
       "preview": true,
       "publisher": "mister-gold",
       "icon": "icon.png",
       "description": "My own extension pack",
       "categories": [ "Extension Packs" ],
       "extensionPack": [ ],
       "engines": {
           "vscode": "^1.76.0"
       },
       "repository": {
           "type": "git",
           "url": "https://github.com/bandantonio/vscode-ext-pack-tutorial.git"
       }
   }
   

   من می خواهم به پارامترهای مهم زیر اشاره کنم:

   • name – شناسه بسته افزونه شما
   • publisher – نام ناشر اگر می خواهید بسته برنامه افزودنی خود را منتشر کنید، این باید شناسه حساب شما در Visual Studio Marketplace باشد.
   • extensionPack – لیست افزونه هایی که باید در بسته خود قرار دهید. فعلاً آن را خالی بگذاریم.
   • engines – نسخه(های) کد VS که بسته برنامه افزودنی شما با آنها سازگار است. راه اندازی نسخه فعلی و به بعد به اندازه کافی خوب است.
   • repository – پیوند به مخزن که بسته برنامه افزودنی شما در آن میزبانی می شود. در حال حاضر، برای ساده نگه داشتن انتشار، می توانید از پیوند نمایه GitHub خود استفاده کنید.

3. یک نماد برای بسته برنامه افزودنی خود اضافه کنید. را icon پارامتر مشخص شده در بالا، به فایلی که وجود ندارد اشاره می کند. می‌توانید از اسکرین شات استفاده کنید یا عکس خود را ایجاد کنید. اندازه نماد باید 128×128 پیکسل (256×256 برای نمایشگرهای Retina) باشد.

4. ایجاد یک README.md فایل با محتوای زیر:

   # Mister Gold Extension Pack
   
   Hello world! this is my extension pack for VS Code.
   

5. ایجاد یک CHANGELOG.md فایل با محتوای زیر:

   # Changelog
   
   All notable changes to the "my-first-pack" extension pack will be documented in this file.
   
   ## 0.0.1
   
   - Initial release
   

6. ایجاد یک LICENSE فایل با محتوای زیر:

   MIT License
   

بیایید بسته افزونه را با ایجاد یک بسته VSIX با استفاده از آن آزمایش کنیم @vscode/vsce ابزار CLI. برای راحتی، می توانید از npx دستور اجرای ابزار بدون نصب سراسری:

npx @vscode/vsce package
Need to install the following packages:
  @vscode/vsce
Ok to proceed? (y) y
 DONE  Packaged: /vscode-extension-pack/my-first-pack-0.0.1.vsix (7 files, 5.44KB)

پس از آن، باید یک فایل جدید در پوشه خود مشاهده کنید: my-first-pack-0.0.1.vsix:

برای نصب بسته، دستور زیر را در ترمینال خود اجرا کنید:

# if you use VS Code
code --install-extension my-first-pack-0.0.1.vsix

# if you use VS Code Insiders
code-insiders --install-extension my-first-pack-0.0.1.vsix

پس از آن، باید بسته افزونه را در لیست افزونه های نصب شده مشاهده کنید:

تا اینجای کار خیلی خوبه! در حال حاضر، افزونه هنوز هیچ کار مفیدی انجام نمی دهد، اما کار می کند. بیایید به جالب ترین قسمت برویم و چند افزونه به بسته اضافه کنیم.

اما ابتدا باید بسته افزونه «دوممی» را حذف نصب کنید. برای انجام این کار، باید از شناسه افزونه استفاده کنید که می‌توانید در بخش اطلاعات بیشتر به عنوان پیدا کنید Identifier:

نکته: شناسه برنامه افزودنی شامل publisher و name پارامترها از package.json فایل و دارای فرمت زیر است: publisher.name.

همچنین می توانید در نمای Extensions روی افزونه کلیک راست کرده و انتخاب کنید Copy Extension ID.

# if you use VS Code
code --uninstall-extension mister-gold.my-first-pack

# if you use VS Code Insiders
code-insiders --uninstall-extension mister-gold.my-first-pack

افزودن برنامه‌های افزودنی به بسته شما فرآیندی است که شناسه‌های آن‌ها را به بسته اضافه می‌کنید extensionPack بخش شما package.json فایل. برای این آموزش، پسوندهای زیر را اضافه می کنم:

• سرور زنده (ID: ritwickdey.liveserver)
• تم نماد مواد (ID: pkief.material-icon-theme)
• داکر (ID: ms-azuretools.vscode-docker)
• Astro (ID: astro-build.astro-vscode)

می‌توانید با همان افزونه‌ها دنبال کنید یا خودتان را انتخاب کنید. با پسوندهای ذکر شده در بالا، extensionPack بخش از package.json فایل به شکل زیر خواهد بود:

"extensionPack": [
    "ritwickdey.liveserver",
    "pkief.material-icon-theme",
    "ms-azuretools.vscode-docker",
    "astro-build.astro-vscode"
]

اکنون باید یک بسته VSIX جدید ایجاد کرده و آن را نصب کنید:

npx @vscode/vsce package                                  
 DONE  Packaged: /vscode-extension-pack/my-first-pack-0.0.1.vsix (7 files, 5.57KB)

code-insiders --install-extension my-first-pack-0.0.1.vsix
Installing extensions...
Extension 'my-first-pack-0.0.1.vsix' was successfully installed.

نمای Extensions را باز کنید و بررسی کنید که همه برنامه‌های افزودنی که به بسته خود اضافه کرده‌اید نصب شده باشند:

همچنین به نشان خاکستری در سمت چپ پایین نماد بسته توجه کنید. تعداد افزونه هایی که بسته شامل می شود را نشان می دهد.

عالی! در این مرحله، یک بسته افزونه کار دارید که می توانید آن را به هر شکلی که می خواهید سفارشی کنید و به عنوان یک بسته VSIX به اشتراک بگذارید. اگر این سناریو به اندازه کافی برای شما خوب است، از خواندن این آموزش در اینجا خودداری کنید. برای کسانی که می خواهند یک تجربه کامل داشته باشند، بیایید به مرحله بعدی برویم و بسته افزونه را در Visual Studio Marketplace منتشر کنیم.

بسته افزونه را منتشر کنید

اگر در حال خواندن این بخش هستید، به این معنی است که قبلاً مرحله دوم را در بخش پیش نیازهای بالا انجام داده اید. اگر نه، لطفا همین الان این کار را انجام دهید.

شما می توانید بسته افزونه خود را به دو روش منتشر کنید: با استفاده از @vscode/vsce ابزار CLI یا با استفاده از وب سایت Visual Studio Marketplace. اما چه کسی به وب سایت اهمیت می دهد؟ نینجاهای واقعی از خط فرمان استفاده می کنند.

قبل از انتشار بسته برنامه افزودنی خود، می توانید PAT ناشر خود را با استفاده از آن تست کنید vsce:

# vsce login <publisher name>
npx @vscode/vsce login mister-gold

https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher 'mister-gold': ****************************************************

The Personal Access Token verification succeeded for the publisher 'mister-gold'.

اکنون آماده انتشار بسته افزودنی خود هستید:

npx @vscode/vsce publish
 INFO  Publishing 'mister-gold.my-first-pack v0.0.1'...
 INFO  Extension URL (might take a few minutes): https://marketplace.visualstudio.com/items?itemName=mister-gold.my-first-pack
 INFO  Hub URL: https://marketplace.visualstudio.com/manage/publishers/mister-gold/extensions/my-first-pack/hub
 DONE  Published mister-gold.my-first-pack v0.0.1.

تبریک می گویم! بسته برنامه افزودنی شما با موفقیت منتشر شد و اکنون از طریق URL برنامه افزودنی مشخص شده قابل دسترسی است.

بررسی کنید که اکنون بسته افزونه شما در دسترس است:

• در VS Code:
  
• در بازار:
  

توجه داشته باشید: پسوند منتشر شده در حال حاضر ممکن است با آنچه در این آموزش نشان داده شده است متفاوت باشد. لطفاً برای مشاهده نسخه دقیق فایل‌های منبع مورد استفاده در هنگام ایجاد این آموزش، به مخزن GitHub مراجعه کنید.

خوب، برای این مقاله تمام شد. با تشکر برای خواندن. امیدوارم ازش لذت برده باشی!