M

MLOG

فارسی

با یادگیری ساخت افزونه‌های سفارشی، قدرت VS Code را آزاد کنید. این راهنما یک آموزش کامل، از راه‌اندازی تا انتشار، ارائه می‌دهد.

تسلط بر توسعه افزونه VS Code: راهنمای جامع برای توسعه‌دهندگان جهانی

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

چرا افزونه‌های VS Code را توسعه دهیم؟

توسعه افزونه‌های VS Code مزایای متعددی را هم برای توسعه‌دهندگان انفرادی و هم برای سازمان‌ها ارائه می‌دهد:

پیش‌نیازها

قبل از ورود به توسعه افزونه، اطمینان حاصل کنید که موارد زیر را نصب کرده‌اید:

راه‌اندازی محیط توسعه

با وجود پیش‌نیازها، شما آماده‌اید تا محیط توسعه خود را راه‌اندازی کنید:

  1. ایجاد یک پروژه افزونه جدید: ترمینال خود را باز کنید و دستور زیر را برای راه‌اندازی تولیدکننده افزونه اجرا کنید:
    2. yo code
  2. به سوالات پاسخ دهید: تولیدکننده مجموعه‌ای از سوالات را در مورد افزونه شما می‌پرسد. در اینجا خلاصه‌ای از سوالات رایج و پاسخ‌های پیشنهادی آورده شده است:
    • چه نوع افزونه‌ای می‌خواهید ایجاد کنید؟ برای یک افزونه مبتنی بر TypeScript، که رویکرد توصیه‌شده است، «افزونه جدید (TypeScript)» را انتخاب کنید.
    • نام افزونه شما چیست؟ یک نام توصیفی و منحصر به فرد برای افزونه خود انتخاب کنید. نمونه‌ها: «Code Spell Checker»، «JavaScript Snippets»، «Python Autocomplete».
    • شناسه افزونه شما چیست؟ این یک شناسه منحصر به فرد برای افزونه شما است، معمولاً با قالب `publisher.extension-name`. یک نام ناشر (به عنوان مثال، نام کاربری GitHub یا نام شرکت خود) انتخاب کنید.
    • توضیحات افزونه شما چیست؟ یک توضیح مختصر و آموزنده از کاری که افزونه شما انجام می‌دهد، ارائه دهید.
    • آیا می‌خواهید یک مخزن git را راه‌اندازی کنید؟ «بله» را برای راه‌اندازی یک مخزن Git برای کنترل نسخه انتخاب کنید.
    • آیا می‌خواهید از eslint برای بازبینی کد استفاده کنید؟ «بله» را برای اعمال سازگاری سبک کد انتخاب کنید.
  3. پروژه را در VS Code باز کنید: پس از تکمیل تولیدکننده، پوشه پروژه ایجاد شده جدید را در VS Code باز کنید.

درک ساختار پروژه

تولیدکننده افزونه یک ساختار پروژه اساسی با فایل‌های کلیدی زیر ایجاد می‌کند:

نوشتن اولین افزونه شما

بیایید با ایجاد یک افزونه ساده که هنگام اجرای یک دستور، پیام «Hello World» را نمایش می‌دهد، شروع کنیم:

  1. `src/extension.ts` را باز کنید: این فایل حاوی تابع `activate` است که وقتی افزونه شما فعال می‌شود، فراخوانی می‌شود.
  2. تابع `activate` را اصلاح کنید: کد موجود را با موارد زیر جایگزین کنید:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('تبریک می‌گوییم، افزونه شما \"my-extension\" اکنون فعال است!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('سلام دنیا از افزونه من!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. توضیحات:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: یک دستور را با شناسه `my-extension.helloWorld` ثبت می‌کند. این دستور در پالت دستور VS Code در دسترس خواهد بود.
    • `vscode.window.showInformationMessage('سلام دنیا از افزونه من!')`: یک پیام اطلاعاتی در پنجره VS Code نمایش می‌دهد.
    • `context.subscriptions.push(disposable)`: دستور را به اشتراک‌های افزونه اضافه می‌کند و اطمینان می‌دهد که به درستی هنگام غیرفعال شدن افزونه، حذف می‌شود.
  4. `package.json` را اصلاح کنید: موارد زیر را به بخش `contributes` اضافه کنید تا دستور را تعریف کنید:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. توضیحات:
    • `"commands"`: دستوراتی را که افزونه شما ارائه می‌کند، تعریف می‌کند.
    • `"command": "my-extension.helloWorld"`: شناسه دستوری را مشخص می‌کند که با شناسه مورد استفاده در `extension.ts` مطابقت دارد.
    • `"title": "Hello World"`: نام نمایش را برای دستور در پالت دستور تنظیم می‌کند.

تست افزونه شما

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

  1. F5 را فشار دهید: این یک پنجره VS Code جدید را با افزونه شما نصب شده راه‌اندازی می‌کند. این «Extension Development Host» است.
  2. پالت دستور را باز کنید: `Ctrl+Shift+P` (یا `Cmd+Shift+P` در macOS) را فشار دهید تا پالت دستور باز شود.
  3. «Hello World» را تایپ کنید: باید دستور خود را در پالت دستور مشاهده کنید.
  4. «Hello World» را انتخاب کنید: با کلیک روی دستور، آن را اجرا کرده و پیام «Hello World» را در پنجره VS Code نمایش می‌دهد.

اشکال‌زدایی افزونه شما

اشکال‌زدایی برای شناسایی و رفع مشکلات در افزونه شما بسیار مهم است. VS Code پشتیبانی اشکال‌زدایی عالی را ارائه می‌دهد:

  1. تنظیم نقاط شکست: در حاشیه ویرایشگر در کنار شماره خطوط کلیک کنید تا نقاط شکست را در کد خود تنظیم کنید.
  2. F5 را فشار دهید: این Extension Development Host را در حالت اشکال‌زدایی راه‌اندازی می‌کند.
  3. افزونه خود را راه‌اندازی کنید: دستور یا اقدامی را اجرا کنید که کدی را که می‌خواهید اشکال‌زدایی کنید، راه‌اندازی می‌کند.
  4. متغیرها و پشته تماس را بررسی کنید: اشکال‌زدای VS Code اجرا را در نقاط شکست شما متوقف می‌کند و به شما امکان می‌دهد متغیرها را بررسی کنید، کد را گام به گام طی کنید و پشته تماس را بررسی کنید.

کار با VS Code API

VS Code API مجموعه‌ای غنی از رابط‌ها و توابع را برای تعامل با ویرایشگر ارائه می‌دهد. در اینجا برخی از زمینه‌های کلیدی API آورده شده است:

مثال: ایجاد یک افزونه قطعه کد

بیایید یک افزونه ایجاد کنیم که یک قطعه کد برای ایجاد یک کامپوننت React اساسی اضافه می‌کند:

  1. یک پوشه `snippets` ایجاد کنید: یک پوشه جدید به نام `snippets` در ریشه پروژه خود ایجاد کنید.
  2. یک فایل قطعه کد ایجاد کنید: یک فایل به نام `react.json` در داخل پوشه `snippets` ایجاد کنید.
  3. تعریف قطعه کد را اضافه کنید: JSON زیر را به `react.json` اضافه کنید:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t<div>\n\t\t\t${2:Content}\n\t\t</div>\n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. توضیحات:
    • `"React Component"`: نام قطعه کد.
    • `"prefix": "reactcomp"`: پیشوندی که قطعه کد را فعال می‌کند. تایپ `reactcomp` و فشار دادن `Tab` قطعه کد را وارد می‌کند.
    • `"body"`: آرایه‌ای از رشته‌ها که نشان‌دهنده خطوط کد در قطعه کد است.
    • `${1:ComponentName}`: یک توقف تب که به شما امکان می‌دهد نام مؤلفه را به سرعت تغییر دهید.
    • `"description"`: توضیحی از قطعه کد.
  5. `package.json` را اصلاح کنید: موارد زیر را به بخش `contributes` اضافه کنید:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. توضیحات:
    • `"snippets"`: قطعه کدهایی را که افزونه شما ارائه می‌دهد، تعریف می‌کند.
    • `"language": "javascriptreact"`: زبانی را مشخص می‌کند که قطعه کد برای آن قابل اجرا است.
    • `"path": "./snippets/react.json"`: مسیر فایل قطعه کد را مشخص می‌کند.
  7. قطعه کد خود را تست کنید: یک فایل `.jsx` یا `.tsx` را باز کنید و `reactcomp` را تایپ کنید. `Tab` را فشار دهید تا قطعه کد وارد شود.

تکنیک‌های پیشرفته توسعه افزونه

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

بین‌المللی‌سازی و بومی‌سازی (i18n و L10n)

برای دسترسی به مخاطبان جهانی، بین‌المللی‌سازی و بومی‌سازی افزونه خود را در نظر بگیرید. این شامل تطبیق افزونه شما برای پشتیبانی از زبان‌ها و مناطق مختلف است.

انتشار افزونه شما

هنگامی که افزونه شما آماده شد، می‌توانید آن را در VS Code Marketplace منتشر کنید تا دیگران از آن استفاده کنند:

  1. ایجاد یک سازمان Azure DevOps: برای انتشار افزونه خود به یک سازمان Azure DevOps نیاز دارید. اگر ندارید، یک حساب کاربری رایگان در وب‌سایت Azure DevOps ایجاد کنید.
  2. ابزار `vsce` را نصب کنید: VS Code Extension Manager (`vsce`) یک ابزار خط فرمان برای بسته‌بندی و انتشار افزونه‌ها است. آن را با استفاده از npm به صورت سراسری نصب کنید:
    3. npm install -g vsce
  3. ایجاد ناشر: یک ناشر هویتی است که افزونه‌های شما را در Marketplace در اختیار دارد. با استفاده از دستور `vsce create-publisher` یک ناشر ایجاد کنید. شما باید یک نام ناشر و یک نشانه دسترسی شخصی (PAT) از Azure DevOps ارائه دهید.
  4. ایجاد یک نشانه دسترسی شخصی (PAT): در Azure DevOps، به «تنظیمات کاربر» -> «نشانه‌های دسترسی شخصی» بروید و یک PAT جدید با دامنه «Marketplace (Publish)» ایجاد کنید.
  5. بسته‌بندی افزونه خود: از دستور `vsce package` برای بسته‌بندی افزونه خود در یک فایل `.vsix` استفاده کنید.
  6. انتشار افزونه خود: از دستور `vsce publish` برای انتشار افزونه خود در Marketplace استفاده کنید. شما باید نام ناشر و PAT خود را ارائه دهید.

بهترین روش‌ها برای توسعه افزونه

برای ایجاد افزونه‌های VS Code با کیفیت بالا و قابل نگهداری، از این بهترین روش‌ها پیروی کنید:

منابع جامعه

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

نتیجه

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