Когда я впервые попробовал Visual Studio Code на своем Mac, я остался весьма впечатлен его производительностью. Инвестиции Microsoft за последние несколько лет в этот редактор действительно замечательны, учитывая также, что это программное обеспечение с открытым исходным кодом, а не коммерческое.

Как вы знаете, с помощью Visual Studio Code вы можете создавать свои собственные расширения, а затем делиться ими с сообществом внутри маркетплейса.

Для меня это был просто интересный и быстрый домашний проект, прежде чем вернуться к моим реактивным исследованиям, но им стоит поделиться.

Я создал простое расширение для получения всех аннотаций в моих проектах Javascript, сгруппированных по категориям внутри панели вывода или в файле уценки.

Вы можете загрузить расширение под названием vscode-annotations прямо из торговой площадки или внутри панели расширений в редакторе кода Visual Studio.
Если вы хотите вместо этого взглянуть на исходный код, не стесняйтесь клонировать проект из Гитхаб.

Первые шаги

Если вы хотите быстро приступить к работе над расширением, есть генератор Yeoman, предоставленный командой Visual Studio Code, который создаст структуру папок и необходимые файлы для последующей публикации вашего расширения.
Чтобы использовать его, просто запустите эти команды в окне терминала:

npm install -g yo generator-code yo code

Во время генерации интерактивный генератор спросит, предпочитаете ли вы работать с Typescript или чистым Javascript, в моем случае я выбрал последний. После этого ваш проект будет готов, и вы сможете начать получать удовольствие от Visual Studio Code!

если вы предпочитаете начать с классического проекта Hello World, не стесняйтесь проверить Учебник Microsoft.

В своем расширении для аннотаций я просто предоставил 3 команды, доступные в палитре команд (CMD+SHIFT+P или Просмотр › Палитра команд) :

. вывести все аннотации в файл, открытый внутри редактора

. вывести все аннотации в конкретном проекте

. экспортировать все аннотации в конкретном проекте в файл Markdown

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

Если вы хотите создать команду внутри палитры команд, вам нужно настроить ее в нескольких файлах, первый из которых — package.json:

"activationEvents": [      "onCommand:extension.getAnnotations",      "onCommand:extension.getAllAnnotations",      "onCommand:extension.createAnnotationsOutput" ]

а затем в массиве команд:

"contributes": {     "commands": [     {         "command": "extension.getAnnotations",         "title": "ANNOTATIONS: check current file"     },     {         "command": "extension.createAnnotationsOutput",         "title": "ANNOTATIONS: export markdown file"     },     {         "command": "extension.getAllAnnotations",         "title": "ANNOTATIONS: check current project"     }] }

поэтому в массиве команд мы просто определяем метку, которая будет находиться внутри палитры команд, и действие, которое должно запускаться, когда пользователь выбирает определенную команду.
Затем нам нужно будет добавить каждую из них в extension.js (созданный скаффолдером) внутри метода активации, который будет запущен после того, как редактор загрузит ваше расширение:

vscode.commands.registerCommand('extension.getAnnotations', function () {     // extension code here });

Всего с помощью этих нескольких строк кода вы можете увидеть ожидаемые результаты присутствия ваших команд в палитре.

Microsoft предоставляет хорошо документированные API для взаимодействия с редактором, очевидно, потому что он основан на Электроне, имейте в виду, что вы также можете использовать API Node.js для расширения функциональности вашего расширения, например, для создания файл или взаимодействие с операционной системой.

Работа с рабочей областью

Если вы хотите взаимодействовать с редактором, манипулируя файлами или печатая внутри встроенной консоли, вам нужно иметь дело с API рабочей области.
Для этого вам нужно стать уверенным в паре объектов библиотеки vscode:

С окном и рабочим пространством вы можете полностью обрабатывать пользовательский интерфейс редактора и выбранный проект. Объект Window в основном используется для понимания того, что происходит внутри файла, пока пользователь редактирует его.

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

Вместо этого с помощью объекта рабочей области вы сможете управлять всеми взаимодействиями, которые происходят внутри меню или интерфейса редактора.
Объект рабочей области полезен, когда вы хотите перебирать файлы проекта или если вам нужно понять, какие файлы открыты в данный момент в редакторе и, например, когда они будут закрыты.

В моем расширении я использовал эти 2 объекта для отображения уведомления пользователю:

vscode.window.showErrorMessage('There aren\'t javascript files in the open project!');

для взаимодействия с панелью вывода:

vscode.window.createOutputChannel(outputWin_NAME); [....] outputWin.appendLine(`FILE -> file://${doc.fileName}`); outputWin.appendLine("-----------------------------------------"); outputWin.appendLine(getBody(data, OUTPUT_PANEL_CONFIG)) outputWin.appendLine(OUTPUT_PANEL_CONFIG.newline); outputWin.show(true);

и для итерации и открытия файла javascript, присутствующего внутри проекта:

vscode.workspace.openTextDocument(file.path) [...] vscode.workspace.findFiles('**/*.js', '**/node_modules/**', 1000).then(onFilesRetrieved)

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

Учитывая, что вы разрабатываете расширение для редактора, вы можете легко отладить то, что вы делаете, просто запустив режим отладки расширения (F5 или fn+F5 на вашем macbook).

Несколько предложений по режиму отладки:

  • console.dir не работает, console.log заменит то, что делает console.dir, если вы проверяете объект, а не массив!
  • когда возникает ошибка, она не очень очевидна (престижность Facebook за встроенную обработку ошибок реакции, лучшая реализация!), поэтому вам нужно будет следовать трассировке стека, как обычно.

Публикация расширения

Последняя часть этого краткого сообщения будет связана с отправкой вашего расширения на рынок Visual Studio Code. в таком случае:

  • чтобы отправить расширение на рынок, вам необходимо создать учетные записи Microsoft и Visual Studio Team Service.
  • когда вы создаете токен личного доступа для публикации своего расширения, не забудьте установить доступ ко всем учетным записям и всей области, иначе вы можете получить ошибку 401 или 404 при попытке опубликовать расширение

  • Инструмент командной строки vsce очень хорош для создания идентификатора издателя и сверхбыстрой публикации приложения на торговой площадке.
    Учитывая, что это инструмент командной строки, вы также можете автоматизировать некоторые его части. процесса публикации (например, увеличение номера выпуска) добавление скриптов в ваш package.json
  • чтобы сделать ваше расширение более доступным на торговой площадке, не забудьте добавить массив keywords внутрь package.json с значимыми словами и соответствующей категорией, на данный момент доступны следующие категории:

Заворачивать

Можно было бы сделать массу других вещей, которые нужно сделать и открыть для разработки расширения Visual Studio Code, но я думаю, что это может быть хорошим подведением итогов извлеченных уроков для создания расширения, которое вы могли бы использовать вместе с Руководством Microsoft.

Первоначально опубликовано на сайте lucamezzalira.com 1 февраля 2017 г.