Розробка плагінів для VS Code, Figma та інших інструментів

Чому варто розробляти плагіни

Плагіни дозволяють не лише адаптувати інструмент під власні потреби, а й ділитися своїми рішеннями з іншими користувачами. Це особливо актуально в командній розробці, коли багато людей працюють з одним і тим самим ПЗ. 

Створення власного плагіна може автоматизувати ті дії, які раніше займали години, і перетворити їх на справу кількох секунд. Більше того, якісний і корисний плагін може стати популярним і навіть приносити дохід, якщо ви поширюєте його через офіційні маркетплейси.

Основи розробки плагінів для VS Code

Як це працює

Visual Studio Code — це редактор, побудований на Electron і використовує Node.js. Розширення для нього пишуться на TypeScript або JavaScript. Вони реєструють команди, додають панелі, взаємодіють із файловою системою та API редактора.

Кроки для створення плагіна

Для початку вам знадобиться встановлений Node.js і встановлений пакет yo з генератором розширень для VS Code:

npm install -g yo generator-code
yo code

Після генерації шаблону ви отримаєте проєкт з базовою структурою. Основний файл розширення — це extension.ts або extension.js, де ви реєструєте свої команди:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	const disposable = vscode.commands.registerCommand('extension.sayHello', () => {
		vscode.window.showInformationMessage('Привіт від вашого розширення!');
	});

	context.subscriptions.push(disposable);
}

Після цього ви можете запустити VS Code у режимі розробника і протестувати розширення, а потім опублікувати його через vsce (Visual Studio Code Extension CLI).

Розробка плагінів для Figma

Особливості платформи

Figma — це хмарний дизайн-інструмент, і плагіни в ньому запускаються в ізольованому iframe. Вони написані на JavaScript (можна використовувати TypeScript) і мають доступ до API для маніпуляції вузлами документа, створення інтерфейсу та зберігання даних.

Структура плагіна

Плагін Figma складається з двох основних частин:

• маніфесту (manifest.json), який описує плагін;
• основного скрипта (code.js) та опціонального інтерфейсу (HTML/JS).

Приклад простого плагіна

Простий плагін, який вставляє прямокутник:

figma.showUI(__html__);

figma.ui.onmessage = msg => {
	if (msg.type === 'create-rect') {
		const rect = figma.createRectangle();
		rect.resize(100, 100);
		rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }];
		figma.currentPage.appendChild(rect);
		figma.closePlugin();
	}
};

Ви можете використовувати HTML і CSS для створення повноцінного UI у вашому плагіні, включаючи форми, кнопки та інше. Комунікація між інтерфейсом і основним кодом йде через figma.ui.postMessage та figma.ui.onmessage.

Де розміщувати плагіни та як поширювати

Для VS Code існує офіційний магазин розширень — Visual Studio Code Marketplace, де можна опублікувати своє розширення. Ви можете зробити його безкоштовним або платним, додати аналітику та отримувати зворотний зв'язок від користувачів.

Для Figma також є власний Plugin Community Hub, де розміщуються всі плагіни. Публікація можлива через веб-інтерфейс Figma після авторизації.

Корисні поради

• Завжди пишіть зрозумілу документацію до плагіна — це допоможе іншим швидко розібратися.
• Додавайте приклади використання та скріншоти, особливо для Figma-плагінів.
• Слідкуйте за оновленнями API та змінюйте реалізацію у міру виходу нових версій.
• Перевіряйте кросплатформеність і продуктивність плагінів.
• Дотримуйтесь безпеки: не зберігайте чутливі дані без згоди користувача.