Наш опыт миграции расширения Visual Studio на платформу Visual Studio code

Всего три года назад для программиста на стэке технологий от Microsoft не существовало проблемы выбора иструмента разработки. Сегодня картина поменялась и Visual Studio Code выступает в качестве реальной альтернативы классическому Visual Studio и предостовляет функциональность которая ставит его гораздо ближе к IDE, чем к текстовому редактору. Бесплатный, кросс-платформенный и с открытым исходным кодом, этот редактор пользуется заслуженным уважением коммьюнити разработчиков ПО.

Данная статья описывает наш опыт в оценке возможности миграции одной из функций нашего внутреннего VS плагина на платформу Visual Studio Code.

TL;DR;

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

Классический Visual Studio заслуженно считается одним из лидеров в сфере IDE и даже самая простая его версия включает большинство функций необходимых разработчику. Если же установить must-have плагины (например ReSharper и WebEssentials), то будет трудно найти сравнимый продукт. В добавок к этому, подписавшись на MSDN (можно бесплатно через одну из spark программ, если вы удовлетворяете её критериям) вы получите доступ к ресурсам которые помогут привести ваш проект к успеху.

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

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

Но в последнее время, всё чаще мы слышим пожелания (особенно от ребят из не MS-центричного мира) что пора всерьез рассмотреть возможность миграции некоторых из функций этого плагина на платформу VS code.

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

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

Со временем были добавлены дополнительные функции которые оказались очень полезны не только для авто-сгенерированным кода. Например если добавлялся подобный комментарий в #range выражение, то уведомление показывалось только для этой области или в добавок к уведомлению, можно было запретить редактирование этого фрагмента по некоторым критериям, например по членству в группе “seniors” в нашем AD.

Определившись с выбором мы запланировали и выделили необходимые ресурсы для его реализации в одном из технических спринтов.

Шаги которые мы выполнили при миграции этого расширения:

1. Установил VS code и nodejs пакеты необходимые для генерации расширения.

Примечание: Установите последний nodejs. У меня возникли странные проблемы в связи с тем что установленный nodejs был не первой свежести. После обновления, всё заработало как положено.

2. Измените тип активации на все возможные события (*) в файле package.json

"activationEvents": [
        "*"
    ],

3. Главный метод активации расширения

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(new EditWatcherExt());
}

4. Подписываемся на события которые нас интересуют используя методы из vscode.workspace
code.visualstudio.com/docs/extensionAPI/vscode-api#_workspace

this._onOpenTextDocument = vscode.workspace.onDidOpenTextDocument(e => this.showMessages([e]));
this._onCloseTextDocument = vscode.workspace.onDidCloseTextDocument(e => this.OnCloseTextDocument(e));

5. Отображаем сообщения используя методы из vscode.window code.visualstudio.com/docs/extensionAPI/vscode-api#_window

private displayMessages(msgs: MessagesData) {
        if (msgs.Console.length > 0) {
            console.log(msgs.Console.join('rn'));
        }

        if (msgs.Info.length > 0) {
            vscode.window.showInformationMessage(msgs.Info.join('rn'));
        }

        if (msgs.Warn.length > 0) {
            vscode.window.showWarningMessage(msgs.Warn.join('rn'));
        }

        if (msgs.Error.length > 0) {
            vscode.window.showErrorMessage(msgs.Error.join('rn'), { modal: true });
        }

        if (msgs.StatusBar.length > 0) {
            if (msgs.StatusBarTimeout > 0)
                vscode.window.setStatusBarMessage(msgs.StatusBar.join('rn'), msgs.StatusBarTimeout);
            else
                vscode.window.setStatusBarMessage(msgs.StatusBar.join('rn'));
        }
    }

6. Не забыть освободить ресурсы.

dispose() {
        this._onOpenTextDocument.dispose();
        this._onCloseTextDocument.dispose();
        this._onTextDocumentChanged.forEach(e => e.dispose());
    }

Вы можете отписаться от события в любое время вызвав dispose метод.

Суммируя опыт миграции:

— Достигли ли мы поставленных целей?
Частично; не все наши требования могут быть выполнены в VS code без значительных затрат времени и ресурсов.

— Будем ли мы мигрировать другие расширения под платформу VS code?
Скорее всего нет. Несмотря на то что VS code всё более и более популярен, но мы не смогли увидеть значительных преимуществ которые бы окупили усилия на миграцию. Когда мы начнём работу над новым проектом, то мы ещё раз вернёмся к этому вопросу.

Комментарии от команды программистов по процессу разработки и возможностям VS code

• Нам показалось что входной уровень для начала разработки под VSC ниже по сравнению с классическим VS. Мы потратили примерно четыре часа с начала установки VSC до создания минимально функциональной версии. Доработка до окончательной версии заняла ещё столько же.
• Иерархия API и возможности расширения довольно логичны и хорошо продуманны.
• Документация на твёрдую четвёрку, но форматирование в стиле всё что возможно поместим на одну страницу, лично мне кажется не лучшим выбором, особенно если в следующих версиях будет её расширение.
• Примеры из документации покрывают базовые случаи, но было бы не плохо рассматривать более сложные сценарии. Но так как этот редактор с отрытым кодом, то и большинство расширений тоже открываю свой код и вы можете посмотреть примеры на любые темы.
• Скорость работы расширения приемлемая и то что расширения работают в отдельном процессе положительно сказывается на стабильности и отзывчивости редактора.
• К текущему моменту, возможности глубокой интеграции с редактором существенно ниже по сравнению с классическим VS и реализация кажущихся простыми задачами, может потребовать больше усилий.
• Использование webview позволяет реализовать многие из задач, но ограничение в возможностях интеграции являются сдерживающим фактором как. Следование общему UI стилю, также требует дополнительных усилий и самоконтроля.

Полезные ссылки
code.visualstudio.com/docs/extensions/overview — описание процесса разработки расширений для VS code и пошаговые инструкции для создания вашего первого расширения.

github.com/Microsoft/vscode/tree/master/extensions — репозиторий расширений от компании Microsoft. Много расширений отличного качества, идеальные примеры при создании вашего собственного расширения.

marketplace.visualstudio.com/VSCode — магазин расширений для VS code. Поищите расширение которое затрагивает функциональность похожую на ту что вы планируете реализовать и в большинстве случаев там будет ссылка на репозиторий с исходным кодом.

github.com/eugenebb71/EditWatcher – репозиторий нашего плагина.

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

К сожалению мои литературные способности заставляют желать лучшего, поэтому заранее приношу извинения любителям и ценителям языка. Все ваши подсказки и изменения к лучшему будут приняты с благодарностью.

"activationEvents": [
        "*"
    ],

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(new EditWatcherExt());
}

this._onOpenTextDocument = vscode.workspace.onDidOpenTextDocument(e => this.showMessages([e]));
this._onCloseTextDocument = vscode.workspace.onDidCloseTextDocument(e => this.OnCloseTextDocument(e));

<source lang="typescript">private displayMessages(msgs: MessagesData) {
        if (msgs.Console.length > 0) {
            console.log(msgs.Console.join('rn'));
        }

        if (msgs.Info.length > 0) {
            vscode.window.showInformationMessage(msgs.Info.join('rn'));
        }

        if (msgs.Warn.length > 0) {
            vscode.window.showWarningMessage(msgs.Warn.join('rn'));
        }

        if (msgs.Error.length > 0) {
            vscode.window.showErrorMessage(msgs.Error.join('rn'), { modal: true });
        }

        if (msgs.StatusBar.length > 0) {
            if (msgs.StatusBarTimeout > 0)
                vscode.window.setStatusBarMessage(msgs.StatusBar.join('rn'), msgs.StatusBarTimeout);
            else
                vscode.window.setStatusBarMessage(msgs.StatusBar.join('rn'));
        }
    }

dispose() {
        this._onOpenTextDocument.dispose();
        this._onCloseTextDocument.dispose();
        this._onTextDocumentChanged.forEach(e => e.dispose());
    }

Автор: Евгений Бобров

Источник