Пожалуйста, опишите ошибку

Нашли баг? Помогите нам его исправить, заполнив эту форму

Расширения для Visual Studio Code

Александр Хисматулин
web-разработчик

В этой статье рассмотрим такую тему, как расширения для Visual Studio Code.

VS Code – довольно-таки удобный кроссплатформенный текстовый редактор, дающий немало возможностей прямо из коробки. Но для максимально продуктивной и удобной работы этого недостаточно. Здесь на помощь приходят расширения: с помощью них пользователи могут расширять возможности редактора, добавлять удобные для себя инструменты: подсветку синтаксиса, поддержку языков и многое другое. Все это возможно благодаря API VS Code.

В этой статье мы напишем простое расширение, которое будет создавать временный файл в специальной директории. В таком файле мы сможем тестировать наш код или использовать его как «песочницу». Начнем 🙂

Microsoft позаботилась о разработчиках и сделала удобный генератор скелета приложения. Чтобы им воспользоваться, установим его: npm install -g yo generator-code. После того, как установка завершена, мы можем сгенерировать наше приложение с помощью команды yo code . Далее необходимо будет выбрать тип проекта и ответить на несколько вопросов, после чего начнется установка зависимостей. Это займет некоторое время. Для создания расширения мы будем использовать TypeScript:

Ура, мы уже можем запустить наше расширение! По умолчанию оно вызывается

командой Hello World. Для того, чтобы запустить расширение, необходимо перейти во вкладку debug и нажать кнопку Run:

За описание расширения и его возможностей отвечает package.json файл. Он похож на package.json файлы, которые мы используем в веб-приложениях, однако имеет свои особенности.

Здесь стоит сказать пару слов о свойствах activationEvents, main и contributes. В массиве activationEvents мы определяем, после каких событий будет активировано наше расширение. По умолчанию оно активируется тогда, когда выполняется команда extension.sayHello, однако вместо onCommand мы можем использовать и другие триггеры: например, onLanguage:python будет срабатывать всегда, когда мы будем открывать Python-файлы. Также имеются и другие триггеры, с которыми вы можете ознакомиться в официальной документации – https://code.visualstudio.com/docs/extensionAPI/activation-events

Следующее поле, которое стоит рассмотреть, – main. Оно довольно-таки тривиально и интуитивно понятно: здесь мы указываем входную точку нашего расширения. И последнее по порядку, но не последнее по важности – поле contributes. В этом объекте мы указываем множество настроек, таких как языки, сочетания клавиш, настройки меню команды и многое другое (и снова отправляю в документацию – https://code.visualstudio.com/docs/extensionAPI/extension-points). Мы же воспользуемся только свойствами configuration и commands. Configuration дает нам возможность задавать настройки, которые пользователь сможет позже переопределить. Свойство же commands определяет команды, которыми мы можем вызвать наше приложения и события, которые они будут активировать. В сгенерированном примере мы у нас имеется одна команда с названием Hello World, которая активирует событие extension.SayHello. Как вы помните, именно по событию extension.SayHello у нас

настроен запуск расширения в поле activationEvents.

Закончим с нашим примером и начнем реализовывать расширение. Начнем с файла package.json. В первую очередь, изменим событие, по которому будет активироваться наше расширение: Точка входа расширения останется прежней. Теперь изменим наше свойство contributes:

Здесь мы создаем объект конфигурации, где указываем его тип, имя и свойства, которые он определяет. Мы определяем одно конфигурируемое свойство – createtempfile.tmpDir и задаем ему тип, значение по умолчанию и описание. В поле commands мы создаём одну команду с именем Create temp file, которая будет вызывать событие createtmpfile.create.

На этом модификация нашего package.json файла закончена. Полный файл теперь выглядит следующим образом:

Приступим к реализации логики расширения. Вся логика будет содержаться в единственном файле extension.ts. Но для начала установим библиотеку, которая понадобится нам для на существования файла – uniquefilename. Вы можете сделать это, используя npm – npm install -–save uniquefilename или с помощь yarn – yarn add uniquefilename.

Первым делом импортируем все зависимости, которые понадобятся нам при реализации логики и объявим пустой массив, где будем хранить все созданные файлы:

Теперь необходимо реализовать функцию activate – она вызывается всякий раз, когда расширение активируется:

Функция activate принимает контекст, в котором было вызвано расширение. Внутри функции мы создам переменную: для этого мы регистрируем событие, которое мы указали в package.json файле (важно указать именно одно и то же имя), vscode.commands.registerCommand вернет нам Disposable тип, который освободит все ресурсы после завершения.

Внутри обработчика события мы создаем объект конфигурации поля ввода имени файла: указываем только предложение ко вводу.

Далее мы обращаемся к конфигурации имени временной директории, которую мы объявили в нашем package.json файле. Конфигурации доступны в vscode.workspace. Если директория не установлена, мы выставляем временной директорией временную директорию операционной системы.

После этого мы показываем пользователю поле для ввода с нашим объектом конфигурации, вызвав метод showInputBox. Метод возвращает promise, поэтому мы можем использовать ES6 then синтаксис для его обработки. С помощью полученного ввода мы составляем путь к файлу и проверяем его на уникальность, после чего создаем его. После успешного создания мы добавляем его в список созданных файлов и говорим редактору открыть файл с помощью метода vscode.workspace.openTextDocument, а после того как файл открыт – показываем его с помощью метода vscode.workspace.showTextDocument.

Единственная вещь, которую нам осталось сделать – это добавить наш Disposable в подписки текущему контексту.

Готово, метод активации реализован! Но нам нужно также и удалять созданные файлы, чтобы не замусоривать временную директорию. Для этого реализуем метод deactivate, который будет вызываться каждый раз при завершении работы расширения:

В нем мы всего лишь проходимся по созданным файлам и удаляем их. Теперь наш extension.ts файлы выглядит следующим образом:

Расширение готово, давайте проверим его работу в режиме дебага:

Как видим, расширение работает. И теперь, если перейти в параметры пользователя, мы можем задать временную директорию для создаваемых файлах – мы определяли эту конфигурацию в package.json файле.

Готово, наше расширение реализовано. Оно не обладает обширным функционалом, но дает хорошее понятие того, как работаю расширения в VS Code. Если вы захотите опубликовать свое расширение, у Microsoft имеется для вас подробный гайд о том, как поделиться с миром своим творением – https://code.visualstudio .com/docs/extensions/publish-extension

Читать и комментировать