Розробка власних плагінів для редактора коду Visual Studio Code

Розробка власних плагінів для Visual Studio Code — це процес, який дозволяє налаштувати цей популярний редактор під власні потреби, додавши нові функціональні можливості. Це ідеальний спосіб для розробників покращити продуктивність роботи з кодом.

Початок роботи з API Visual Studio Code

Для розробки плагінів Вам знадобляться знання основ JavaScript або TypeScript, адже API Visual Studio Code підтримує розробку на цих мовах. Використовуючи API, Ви зможете інтегруватися з редактором, обробляти події, створювати нові команди та розширювати інтерфейс.

Встановлення інструментів

Перед тим, як розпочати, варто встановити наступні інструменти:

• Node.js та npm — потрібні для роботи з JavaScript та управління пакетами.
• Yeoman та Generator Code — для автоматичного створення скелету плагіна.

Встановлення Yeoman та Generator Code виглядає так:

npm install -g yo generator-code

Створення нового плагіна

Щоб створити базовий плагін, відкрийте термінал і введіть команду:

yo code

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

Структура проєкту

Базова структура містить такі основні файли:

• package.json — містить метадані про плагін, такі як залежності та версія.
• extension.js чи extension.ts — головний файл, що містить код плагіна.
• README.md — інформація та інструкції з користування.

Реєстрація команд

Реєстрація команд — одна з основних функцій плагінів. Для створення нових команд, необхідно їх оголосити у package.json, і реалізувати в extension.js.

Проста реєстрація команди виглядає так:

"contributes": {
    "commands": [
        {
            "command": "extension.sayHello",
            "title": "Say Hello"
        }
    ]
}

А реалізація у extension.js:

const vscode = require('vscode');

function activate(context) {
    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        vscode.window.showInformationMessage('Hello from your plugin!');
    });

    context.subscriptions.push(disposable);
}

exports.activate = activate;

Тестування та відлагодження

Для тестування плагіна широко використовується можливість запуску розширення в середовищі відлагодження. Натиснувши F5 у Visual Studio Code, Ви запустите другий екземпляр редактора з увімкненим розширенням.

Публікація плагіна

Після завершення розробки та тестування, Ви можете опублікувати плагін у Visual Studio Marketplace. Для цього потрібні:

1. Реєстрація у marketplace та отримання Personal Access Token.
2. Встановлення vsce:

npm install -g vsce

1. Виконання команди для публікації:

vsce publish

Завдяки цим крокам, ви освоїте розробку власних плагінів Visual Studio Code і зможете не лише автоматизувати свої щоденні завдання, а й ділитися своїми розробками з іншими користувачами. Пам’ятайте, що post-release зі зворотнім зв’язком користувачів допоможе вдосконалити Ваше розширення. Наявність опенсорнсного (і не дуже) продукту буде великим плюсом на співбесіді.

Twitter  Facebook  LinkedIn  Reddit  Email