آموزش ساخت افزونه برای VS Code: راهنمای جامع برنامه‌نویسان

توسط موسسه توپ گیم

Visual Studio Code (VS Code) یکی از محبوب‌ترین ویرایشگرهای کد در جهان است. بخش بزرگی از این محبوبیت به دلیل انعطاف‌پذیری و قابلیت گسترش آن با استفاده از افزونه‌هاست. در این مقاله، شما با مراحل ساخت یک افزونه برای VS Code آشنا خواهید شد و چگونگی افزودن قابلیت‌های جدید به این محیط توسعه قدرتمند را فرا خواهید گرفت. از انتخاب زبان برنامه‌نویسی مناسب تا انتشار افزونه در Marketplace، این راهنما به شما کمک می‌کند تا اولین افزونه خود را بسازید و به جامعه VS Code کمک کنید.

1. انتخاب زبان برنامه‌نویسی و ابزارها

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

علاوه بر TypeScript، نیاز به نصب Node.js و npm (یا yarn) دارید. Node.js محیط اجرای JavaScript خارج از مرورگر است و npm (یا yarn) مدیریت کننده بسته‌های نرم‌افزاری Node.js است که برای نصب و مدیریت وابستگی‌های پروژه استفاده می‌شود.

1.1 نصب Node.js و npm:

برای نصب Node.js و npm، به وب‌سایت رسمی Node.js مراجعه کرده و نسخه مربوط به سیستم عامل خود را دانلود و نصب کنید. پس از نصب، می‌توانید با اجرای دستور node -v و npm -v در ترمینال یا خط فرمان، نسخه‌های نصب شده را بررسی کنید.

2. ایجاد ساختار پروژه افزونه

برای ایجاد ساختار اولیه پروژه افزونه، از Yeoman و Generator VS Code Extension استفاده می‌کنیم. Yeoman یک ابزار scaffolding است که به شما کمک می‌کند تا ساختار پروژه را به طور خودکار ایجاد کنید. این کار به شما در صرفه‌جویی در زمان و تمرکز بر روی منطق افزونه کمک خواهد کرد.

2.1 نصب Yeoman و Generator VS Code Extension:

ابتدا Yeoman را با استفاده از npm نصب کنید:

npm install -g yo

سپس، Generator VS Code Extension را نصب کنید:

npm install -g @vscode/generator-code

2.2 ایجاد پروژه جدید:

بعد از نصب، دستور زیر را در ترمینال اجرا کنید تا یک پروژه جدید ایجاد شود:

yo @vscode/extension-generator

از شما خواسته می‌شود تا نام، توضیحات و سایر اطلاعات مربوط به افزونه خود را وارد کنید. این اطلاعات در فایل package.json ذخیره می‌شوند.

3. توسعه و پیاده‌سازی منطق افزونه

در این مرحله، منطق اصلی افزونه خود را در فایل‌های TypeScript مربوطه پیاده‌سازی می‌کنید. این فایل‌ها معمولا در پوشه `src` قرار دارند. مهم‌ترین فایل‌ها عبارتند از:

• extension.ts: این فایل نقطه ورود افزونه است و توابع اصلی را شامل می‌شود.
• package.json: فایل پیکربندی افزونه که شامل اطلاعات مانند نام، توضیحات، وابستگی‌ها و نقطه ورود افزونه است.

4. ساختار فایل‌ها و عملکردهای کلیدی

در زیر، جدولی از فایل‌های کلیدی و عملکردهای آن‌ها آورده شده است:

5. کامپایل و تست افزونه

پس از اتمام کدنویسی، باید افزونه را کامپایل و تست کنید. برای کامپایل کد TypeScript، از دستور زیر استفاده کنید:

npm run compile

این دستور کد TypeScript را به JavaScript کامپایل می‌کند. سپس می‌توانید افزونه را در VS Code بارگذاری کرده و آن را تست کنید. برای این کار، از طریق منوی “Extensions” و گزینه “Install from VSIX…” می‌توانید فایل VSIX را که در پوشه `out` تولید شده، نصب کنید.

6. انتشار افزونه در VS Code Marketplace

پس از تست کامل افزونه، می‌توانید آن را در VS Code Marketplace منتشر کنید تا دیگران بتوانند از آن استفاده کنند. برای این کار، نیاز به یک حساب کاربری در وب‌سایت VS Code Marketplace دارید. همچنین، باید یک فایل `README.md` با اطلاعات کامل در مورد افزونه خود و یک `LICENSE` ایجاد کنید. پس از آماده شدن، باید افزونه خود را در Marketplace ثبت و به طور رسمی منتشر کنید.

7. نکات پایانی

در طول توسعه افزونه، به نکات زیر توجه کنید:

• نوشتن کد تمیز و مستند: کد تمیز و مستند به راحتی قابل فهم و نگهداری است.
• مدیریت خطاها: استفاده از try-catch block برای مدیریت خطاها ضروری است.
• تست کامل افزونه: قبل از انتشار، افزونه را به طور کامل تست کنید.
• استفاده از best practices: از بهترین شیوه‌های برنامه‌نویسی TypeScript و API VS Code استفاده کنید.

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