Наш опыт миграции расширения Visual Studio на платформу Visual Studio code10.06.2018 12:33

Всего три года назад для программиста на стэке технологий от 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('\r\n'));
        }

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

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

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

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

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));

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

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

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

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

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

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

© Habrahabr.ru