Введение в разработку расширений

Если вы разработчик, который большую часть времени работает в Visual Studio Code (VS Code), то, возможно, задумывались о том, как сделать эту мощную IDE ещё более подходящей под ваши нужды. Один из лучших способов — это разработка собственных расширений. В этой статье мы погрузимся в мир разработки расширений с использованием TypeScript — языка, который предлагает наилучший опыт для создания расширений VS Code.

Почему TypeScript?

TypeScript — это типизированный надмножество JavaScript, которое компилируется в чистый JavaScript. Он предлагает классы, модули и интерфейсы, что делает его идеальным для создания надёжных компонентов. Сам VS Code построен на TypeScript, и сообщество настоятельно рекомендует использовать этот язык для разработки расширений из-за его безопасности типов и преимуществ в обслуживании кода.

Настройка окружения

Перед началом написания кода необходимо настроить окружение.

Установка Node.js и Git

Убедитесь, что у вас установлены Node.js и Git на вашей системе. Эти инструменты необходимы для управления пакетами и контроля версий.

Установка Yeoman и генератора VS Code Extension

Чтобы создать новый проект расширения, вы будете использовать Yeoman и генератор VS Code Extension. Вы можете установить эти инструменты глобально или использовать npx для однократного запуска:

npx --package yo --package generator-code -- yo code

Или, если предпочитаете устанавливать их глобально:

npm install --global yo generator-code

Создание нового проекта расширения

Запустите генератор и следуйте инструкциям, чтобы настроить проект:

yo code

Для проекта TypeScript выберите следующие опции:

  1. Какой тип расширения вы хотите создать? Новое расширение (TypeScript).
  2. Как называется ваше расширение? HelloWorld.
  3. Идентификатор вашего расширения? helloworld.
  4. Описание вашего расширения? ОСТАВЬТЕ ПУСТЫМ.
  5. Инициализировать репозиторий Git? Да.
  6. Собирать исходный код с помощью Webpack? Нет.
  7. Использовать какой пакетный менеджер? npm.
  8. Открыть новую папку с Visual Studio Code? Открыть с помощью команды code.

Написание первого расширения

Понимание структуры проекта

Ваш новый проект будет иметь следующую структуру:

helloworld/
├── src/
│   ├── extension.ts
│   └── test/
│       └── extension.test.ts
├── package.json
├── README.md
└── vsc-extension-quickstart.md

Файл src/extension.ts — это место, где вы будете писать основную логику вашего расширения.

Пример «Hello World»

Откройте src/extension.ts и замените его содержимое следующим кодом:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
    vscode.window.showInformationMessage('Hello VS Code!');
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

Этот код регистрирует команду helloworld.helloWorld, которая отображает сообщение при вызове.

Запуск вашего расширения

Чтобы запустить ваше расширение, откройте палитру команд в VS Code (Ctrl+Shift+P или Cmd+Shift+P на macOS) и выберите Отладка: Начать отладку. Это откроет новое окно VS Code, где вы сможете протестировать своё расширение.

В новом окне снова откройте палитру команд и запустите команду «Hello World». Должно появиться сообщение «Hello VS Code!».

Отладка вашего расширения

Отладка — важная часть любого процесса разработки. VS Code упрощает отладку ваших расширений благодаря встроенным инструментам отладки.

Установка точек останова

Откройте файл src/extension.ts и установите точку останова, щёлкнув в строке рядом с нужной строкой кода. Когда вы снова запустите команду «Hello World», VS Code достигнет точки останова, позволяя вам проверять переменные и пошагово выполнять код.

Использование консоли отладки

Вы можете использовать консоль отладки для оценки выражений и проверки переменных. Это особенно полезно для понимания состояния вашего расширения во время выполнения.

Кастомизация и расширение вашего расширения

Изменение сообщения

Давайте изменим сообщение, отображаемое командой «Hello World». Откройте файл src/extension.ts и измените функцию activate:

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
    vscode.window.showInformationMessage('Привет из нового и улучшенного HelloWorld!');
  });

  context.subscriptions.push(disposable);
}

После этого изменения перезагрузите окно, выполнив команду Разработчик: Перезагрузить окно из палитры команд, а затем снова запустите команду «Hello World», чтобы увидеть обновлённое сообщение.

Добавление новых команд

Вы можете добавить больше команд в ваше расширение, зарегистрировав их в функции activate. Вот пример того, как добавить команду, которая показывает текущее время:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  let helloDisposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
    vscode.window.showInformationMessage('Привет от нового и улучшенного HelloWorld!');
  });

  let timeDisposable = vscode.commands.registerCommand('helloworld.currentTime', () => {
    const now = new Date();
    vscode.window.showInformationMessage(`Текущее время: ${now.toLocaleTimeString()}`);
  });

  context.subscriptions.push(helloDisposable, timeDisposable);
}

export function deactivate() {}

Точки вклада

Точки вклада — статические объявления, которые вы делаете в файле package.json Manifest Extension, чтобы расширить VS Code. Например, вы можете добавить новую команду в палитру команд:

"contributes": {
  "commands": [
    {
      "command": "helloworld.helloWorld",
      "title": "Hello World"
    },
    {
      "command": "helloworld.currentTime",
      "title": "Current Time"
    }
  ]
}

Следующие шаги и продвинутые темы

Анатомия расширения

Чтобы глубже погрузиться в разработку расширений, полезно понять анатомию расширения. Файл package.json имеет решающее значение, поскольку он определяет метаданные и точки вклада вашего расширения. Файл src/extension.ts содержит логику активации, а любые дополнительные файлы могут использоваться для тестов, утилит или других функций.

Рекомендации UX

При разработке вашего расширения важно следовать рекомендациям UX VS Code, чтобы ваше расширение органично интегрировалось с IDE. Это включает использование согласованных соглашений об именах, соблюдение темы VS Code и предоставление интуитивно понятных взаимодействий с пользователем.

Продвинутые функции

Для более продвинутых функций вы можете исследовать другие API VS Code, такие как работа с файловой системой, взаимодействие с редактором и использование веб-представлений. Эти функции могут значительно улучшить функциональность вашего расширения.