Tworzenie własnych wtyczek do edytora kodu Visual Studio Code

Tworzenie własnych wtyczek dla Visual Studio Code to proces, który pozwala dostosować ten popularny edytor do własnych potrzeb, dodając nowe funkcjonalności. To idealny sposób dla programistów na poprawę wydajności pracy z kodem.

Początek pracy z API Visual Studio Code

Aby rozwijać wtyczki, potrzebujesz znajomości podstaw JavaScript lub TypeScript, ponieważ API Visual Studio Code wspiera rozwój w tych językach. Korzystając z API, będziesz mógł integrować się z edytorem, obsługiwać zdarzenia, tworzyć nowe polecenia i rozszerzać interfejs.

Instalacja narzędzi

Przed rozpoczęciem warto zainstalować następujące narzędzia:

• Node.js i npm — potrzebne do pracy z JavaScript i zarządzania pakietami.
• Yeoman i Generator Code — do automatycznego tworzenia szkieletu wtyczki.

Instalacja Yeoman i Generator Code wygląda tak:

npm install -g yo generator-code

Tworzenie nowej wtyczki

Aby stworzyć podstawową wtyczkę, otwórz terminal i wpisz polecenie:

yo code

To polecenie inicjuje tworzenie wtyczki, gdzie będziesz mógł wybrać szablon, podać nazwę i opis. Po zakończeniu procesu zostanie utworzony nowy projekt.

Struktura projektu

Podstawowa struktura zawiera następujące główne pliki:

• package.json — zawiera metadane o wtyczce, takie jak zależności i wersja.
• extension.js lub extension.ts — główny plik, który zawiera kod wtyczki.
• README.md — informacje i instrukcje dotyczące użytkowania.

Rejestracja poleceń

Rejestracja poleceń to jedna z podstawowych funkcji wtyczek. Aby stworzyć nowe polecenia, należy je zadeklarować w package.json i zaimplementować w extension.js.

Prosta rejestracja polecenia wygląda tak:

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

A implementacja w 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;

Testowanie i debugowanie

Do testowania wtyczki szeroko wykorzystuje się możliwość uruchamiania rozszerzenia w środowisku debugowania. Naciskając F5 w Visual Studio Code, uruchomisz drugi egzemplarz edytora z włączonym rozszerzeniem.

Publikacja wtyczki

Po zakończeniu rozwoju i testowania możesz opublikować wtyczkę w Visual Studio Marketplace. W tym celu potrzebne są:

1. Rejestracja w marketplace i uzyskanie Personal Access Token.
2. Instalacja vsce:

npm install -g vsce

1. Wykonanie polecenia do publikacji:

vsce publish

Dzięki tym krokom opanujesz rozwój własnych wtyczek Visual Studio Code i będziesz mógł nie tylko automatyzować swoje codzienne zadania, ale także dzielić się swoimi rozwiązaniami z innymi użytkownikami. Pamiętaj, że feedback od użytkowników po wydaniu pomoże ulepszyć Twoje rozszerzenie. Posiadanie produktu open-source (i nie tylko) będzie dużym plusem na rozmowie kwalifikacyjnej.