Приступая к разработке расширений Visual Studio
если вы ранее не написали Visual Studioное расширение, возможно, у вас есть вопросы. Некоторые из наиболее распространенных из них перечислены здесь. Если вы не видите нужную информацию, воспользуйтесь кнопками обратной связи (Эта страница полезна в правом верхнем углу экрана), чтобы запросить нужные сведения.
Эта статья относится к Visual Studio в Windows. дополнительные Visual Studio для Mac см. в разделе расширение Visual Studio для Mac. Visual Studio Code см. в разделе API расширения Visual Studio Code.
какое программное обеспечение требуется для разработки расширений Visual Studio?
для разработки расширений Visual Studio необходимо установить пакет SDK для Visual Studio в дополнение к Visual Studio. пакет SDK Visual Studio можно установить в рамках обычной установки или позже. дополнительные сведения об установке пакета sdk для Visual Studio см. в разделе установка пакета sdk для Visual Studio.
какие виды действий можно выполнить с помощью расширений Visual Studio?
предельное значение перевозки, когда приходится выключать различные расширения Visual Studio. Конечно, большинство расширений имеют что-то, что нужно делать с написанием кода, но это не должно быть так. Ниже приведены некоторые примеры типов расширений, которые можно создать.
поддержка языков, которые не входят в Visual Studio, с использованием расцветки синтаксиса, технологии IntelliSense и поддержки компилятора и отладки
Средства повышения производительности, расширяющие возможности интегрированной среды разработки с дополнительными шаблонами, рефакторинг кода, новые диалоговые окна и окна инструментов
Зависящие от домена конструкторы для таких сценариев, как проектирование данных или поддержка в облаке
примеры расширений см. в Visual Studio Marketplace. многие расширения открыты с открытым исходным кодом, и в Marketplace имеются ссылки на их GitHub репозиторий.
какие возможности Visual Studio можно расширить?
теоретически, вы можете расширить практически любую часть Visual Studio: меню, панелей инструментов, команд, окон, решений, проектов, редакторов и т. д.
На практике мы обнаружили, что большинство пользователей хотят расширить возможности команд, меню и панелей инструментов, окон, IntelliSense и проектов. Ниже приведены ссылки на соответствующие разделы.
расширение меню и команд: добавление собственных элементов в Visual Studio меню и панелей инструментов. их можно использовать для запуска новых Visual Studio функциональных возможностей или собственных внешних вспомогательных приложений. Можно также указать настраиваемые сочетания клавиш для пунктов меню.
расширение и настройка средства Windows: расширение существующих окон инструментов или создание собственных окон инструментов. Например, можно добавить в Свойства новые свойства или создать новое окно инструментов для добавления дополнительных компонентов.
расширения редактора и языковой службы: добавьте собственные настройки в IntelliSense, предоставляемую для Visual Studio языков, или создайте поддержку для новых языков программирования. Можно создавать новые завершения операторов, предложения и новые подсказки краткие сведения. С помощью лампочкй можно добавлять предложения рефакторинга и исправления кода для поддержки новых языков программирования.
Какие шаблоны проектов предоставляются VSSDK?
Два основных типа расширений — это пакеты VSPackage и расширения MEF. Как правило, расширения VSPackage используются для расширений, которые используют или расширяют команды, окна инструментов и проекты. расширения MEF используются для расширения или настройки редактора Visual Studio.
для расширений Visual C# и Visual Basic VSSDK предоставляет пустой шаблон проекта VSIX, который можно использовать вместе с новыми шаблонами элементов, которые создают команды меню, окна инструментов и расширения редактора. Этот шаблон также можно использовать для упаковки шаблонов проектов, фрагментов кода и других артефактов для распространения другим пользователям.
Для C++ мастер VSPackage предоставляет код для добавления команд меню, окон инструментов и пользовательских редакторов.
шаблон изолированной оболочки используется для упаковки расширения в версии оболочки Visual Studio, которую можно распространять и предоставлять самостоятельно. В следующих разделах показано, как приступить к работе с каждым типом расширения.
Разделы справки получить расширение, которое будет выглядеть Visual Studio?
получите советы по проектированию пользовательского интерфейса для расширения в Visual Studio рекомендации по работе с пользователем.
Где можно найти примеры кода VSSDK?
Каждая из ссылок, перечисленных в предыдущем разделе, содержит пошаговые пошаговые руководства, демонстрирующие способы реализации конкретных функций. примеры VSSDK с открытым исходным кодом также можно найти на GitHub Visual Studio примерах.
Как можно распространить расширение?
Вы можете установить расширение на другом компьютере или отправить его своим друзьям в виде VSIX-файла, который устанавливается двойным щелчком. дополнительные сведения о пакетах VSIX можно найти в Visual Studio расширениях.
вы также можете опубликовать расширение в Visual Studio Marketplace, что делает его видимым для большого количества Visual Studioных клиентов. пример упаковки расширения в Marketplace см. в разделе пошаговое руководство. публикация расширения Visual Studio. Дополнительные сведения о том, что необходимо сделать для публикации в Marketplace, см. в разделе Products and Extensions for Visual Studio.
Как создать расширение Visual Studio Code
Visual Studio Code – это редактор кода от Microsoft, доступный для систем Windows, Linux и macOS. Для внедрения дополнительных функций он предлагает готовые расширения, которые вы можете установить через Visual Studio Code Marketplace. Но если вы не можете найти расширение, которое делает именно то, что вам нужно, вы можете создать необходимое расширение самостоятельно.
В этом руководстве вы узнаете, как создать свое первое расширение Visual Studio Code.
Требования
Для выполнения этого урока нужно:
Это руководство было проверено на версиях Node v14.4.0, npm v6.14.5, yo v3.1.1 и generator-code v1.2.16.
1: Установка инструментов
Команда Visual Studio Code разработала специальный генератор для создания расширений. Он генерирует все необходимые стартовые файлы, чтобы вы легко могли начать создание вашего расширения.
Чтобы начать разработку расширений VS Code, вам понадобятся два пакета npm:
Используйте встроенный терминал Visual Studio Code, чтобы при помощи npx запустить локальные копии yo и generator-code, а затем введите команду yo code для инициализации вашего нового проекта:
После этого Yeoman запустит генератор кода.
2: Создание расширения
Теперь вы готовы начать разработку вашего первого расширения. На вашем экране вы увидите сообщение:
Сейчас вам нужно будет ответить на несколько вопросов о проекте: указать, какое расширение вы создаете, а также выбрать между TypeScript и JavaScript. В этом уроке мы выберем JavaScript.
Затем вам будет предложено еще несколько вопросов. В этом мануале мы выбрали следующие ответы:
После завершения этого процесса вы получите все файлы, необходимые для начала работы. Два самых важных файла:
Откройте package.json и взгляните на его содержимое. Вы увидите название, описание проекта и т.п. В нем есть два очень важных раздела.
Мы вернемся к ним в ближайшее время.
Вы также можете просмотреть файл extension.js. В нем мы напишем код для нашего расширения. Здесь уже есть шаблонный код, давайте разберемся с ним.
В выделенной ниже строке мы регистрируем в VS Code нашу команду. Обратите внимание, что имя helloWorld совпадает с именем команды в package.json. Это не случайно. Пакет package.json определяет, какие команды доступны пользователю, но файл extension.js регистрирует код для этой команды.
В этом примере наша команда будет только отображать на экране пользователя сообщение «Hello World».
3: Отладка расширения
Теперь, когда все необходимые файлы установлены, мы можем запустить наше расширение.
В этом файле проводится отладка расширения. Откройте вкладку debug в левой части экрана, а затем кликните на плей.
Это откроет новый (отладочный) экземпляр VS Code.
Открыв его, вы можете развернуть палитру команд (с помощью Command + Shift + P на Mac или Ctrl + Shift + P в Windows) и запустить Hello World.
Вы увидите всплывающее сообщение «Hello World» в правом нижнем углу.
4: Редактирование расширения
Прежде чем приступить к работе над кодом, давайте еще раз взглянем на раздел activateEvents в файле package.json. Как вы уже знаете, этот раздел содержит список событий, которые активируют наше расширение всякий раз, когда происходят. По умолчанию расширение активируется при запуске нашей команды.
Теоретически это событие может быть любым (что определяется символом *). Если установить для события активации значение *, то ваше расширение будет загружено при запуске VS Code.
Примечание: Этого делать не нужно, это просто комментарий.
Итак, у нас есть необходимые файлы и мы знаем, как их отлаживать. Приступим же к созданию нашего расширения. Предположим, мы хотим, чтобы это расширение создавало HTML-файл, который содержит шаблонный код и добавляется в наш проект.
Сначала давайте обновим название нашей команды. Откройте extension.js и обновите имя команды с extension.helloworld на extension.createBoilerplate.
Соответствующим образом обновите package.json:
Теперь напишем наш функционал. Первое, что нужно сделать, это потребовать пару пакетов. Мы будем использовать модули fs (file system) и path. В файл extension.js поместите:
Также нам нужно получить путь к текущей папке. Внутри раздела command поместите следующий фрагмент:
Нам также нужно присвоить шаблонный HTML-код переменной в файле extension.js, чтобы он автоматически записывался в файл. Вот этот шаблонный HTML:
Теперь нужно вызвать функцию writeFile модуля файловой системы и передать ее в пути к папке и HTML-коде.
Обратите внимание, мы используем модуль path, чтобы объединить путь к папке с именем файла, который мы хотим создать. Если внутри обратного вызова есть ошибка, мы отображаем ее пользователю. В противном случае расширение сообщает, что шаблонный файл успешно создан:
Вот как выглядит полный код extension.js:
Попробуйте выполнить отладку вашего нового расширения. Откройте палитру команд и запустите Create Boilerplate (помните, мы изменили имя).
После выполнения команды вы увидите только что созданный файл index.html и сообщение, которое уведомляет вас об этом:
Заключение
Чтобы узнать больше о том, какие API можно использовать и как именно их использовать, прочтите документацию по API от Visual Studio.
Рассказ о 33 расширениях для VS Code, об их разработке и об управлении ими
Автор материала, перевод которого мы сегодня публикуем, создал 33 расширения для VS Code. Он решил поделиться с теми, кому нравится этот редактор, методикой разработки и поддержки расширений. Кроме того, он кратко рассказал о своих проектах. Возможно, вы найдёте среди них что-нибудь такое, что вам пригодится.
Как писать расширения
Я стремлюсь к продуктивной работе и люблю автоматизацию, поэтому я выработал чётко организованный процесс разработки расширений для VS Code. Расскажу об основных составных частях этого процесса.
▍Инструменты
Я написал очень простой инструмент, который помогает быстро начинать работу над новыми проектами, используя шаблон. Соответствующая утилита работает так:
▍Шаблон
Вот как я, пользуясь шаблоном template-vscode-extension, приступаю к разработке нового расширения для VS Code.
Создание нового проекта
Если вы планируете заняться разработкой расширений для VS Code, я посоветовал бы вам создать собственный шаблон, возможно, взяв за основу мой.
▍Полезная документация
В процессе разработки я всегда держу под рукой документацию по API VS Code. Поначалу работать с этим документом, представляющим собой огромную страницу, не особенно удобно, но если вы уделите некоторое время на то, чтобы бегло его просмотреть, если поймёте, какие API вам доступны, пользоваться им будет комфортно. В целом, могу отметить, что меня набор доступных API вполне устраивает.
И, кстати, если вы хотите разрабатывать расширения для VS Code, вам будет крайне полезно почитать этот раздел документации.
▍О разработанных мной расширениях
Я разрабатываю расширения для решения различных задач, о них мы поговорим ниже. Кроме того, некоторые из этих расширений помогают мне разрабатывать другие расширения.
Мои расширения
Как я уже говорил, я стремлюсь к продуктивности, поэтому многие мои расширения направлены на повышение производительности труда. Я стараюсь не заниматься постоянным изобретением велосипеда, пытаюсь добиваться чёткого разделения функций различных расширений для того, чтобы их совместное использование не вызывало бы проблем.
Не знаю, хорошо это или плохо, но мне нравится создавать расширения для VS Code. К тому же, поток задач, которые можно автоматизировать, не иссякает. Именно поэтому я, после того, как написал первое расширение, сделал второе, потом третье, дойдя, в итоге, до тридцать третьего.
Сейчас я в двух словах расскажу о моих расширениях. Подробности о них вы можете найти на их страницах.
▍Расширения для создания расширений
№1. Debug Manager
Расширение Debug Manager позволяет запускать отладку, даже из терминала, без необходимости создания задач или конфигурационных файлов. Я создал это расширение из-за того, что мне не хотелось засорять репозитории ненужными файлами (да и кто, например, пользуется задачами?). Я полагаю, что запуск отладчика из терминала — это возможность настолько полезная, что её стоило бы включить в сам VS Code.
Запуск отладчика из терминала
№2. StatusBar Debugger
Расширение StatusBar Debugger добавляет средства управления отладкой в строку состояния программы. Это гораздо удобнее, чем стандартная панель отладки. Кроме того, если бы VS Code давал бы больше данных по отладке, моё расширение было бы ещё лучше.
№4. Bump
Расширение Bump позволяет увеличивать номер версии проекта и вносить новые данные в журнал изменений. Этот инструмент действует, следуя собственной внутренней логике, но поддаётся настройке. Создал я его из-за того, что любому приличному расширению нужен журнал изменений, но это не означает, что разработчик такого расширения должен вносить записи в журнал вручную. Это — одно из моих любимых расширений. Возможно, я создам на его основе инструмент командной строки, так как мне хотелось бы, чтобы когда-нибудь оно позволило бы автоматизировать и GitHub-релизы.
Использование расширения Bump
№5. Optimize Images
Расширение Optimize Images позволяет оптимизировать изображения, имеющиеся в проекте, с использованием внешнего приложения, выбранного пользователем. Одна команда — и дело сделано.
▍Управление проектами
№6. Projects+
Расширение Projects+ служит для управления проектами. Оно обладает богатыми возможностями, поддаётся настройке, автоматически находит проекты. Одним из наиболее широко используемых расширений такого рода является Project Manager, но у меня около сотни репозиториев, и мне нужны подходящие инструменты для управления ими, одним из которых является поддержка групп неограниченного уровня вложенности.
Работа с расширением Project+
▍Управление todo-списками
№7. Todo+
Подсветка синтаксиса с использованием Todo+ и сведения уровня проекта
№8. Highlight
Расширение Highlight представляет собой продвинутое средство подсветки синтаксиса, основанное на регулярных выражениях. Оно пригодится для работы с todo-списками, аннотациями и прочим подобным. Весьма популярным в этой сфере является расширение TODO Highlight, но моё расширение является более универсальным и гораздо более мощным. Кроме того, вероятно, оно работает быстрее.
№9. Markdown Todo
Расширение Markdown Todo позволяет упростить работу с todo-списками внутри markdown-файлов. В нём нет ничего особенного, но оно позволяет пользоваться возможностями Todo+ внутри markdown-файлов.
№10. Projects+ Todo+
Расширение Projects+ Todo+ позволяет анализировать проекты, так сказать, с высоты птичьего полёта, видеть результат агрегации всех todo-файлов в одном файле. Если вы используете, для управления проектами, расширение Projects+, а для работы с todo-списками — Todo+, то, благодаря этому расширению, вы сможете собрать todo-списки из всех (или из некоторых) проектов в одном месте.
▍Расширения для открытия файлов
Мне важна возможность быстрого переключения между различными приложениями или веб-страницами. Именно поэтому я создал серию расширений для VS Code, упрощающих решение подобных задач.
№11. Open in Application
Расширение Open in Application позволяет открывать произвольные файлы в заданном по умолчанию приложении или в том приложении, которое решит использовать разработчик. Это — универсальное расширение.
№12. Open in Browsers
Расширение Open in Browsers добавляет в редактор команды, позволяющие открыть текущий файл или проект в любом браузере или даже сразу во всех доступных браузерах.
№13. Open in Code
Расширение Open in Code упрощает переключение между VS Code и VS Code Insiders.
№14. Open in Finder
Расширение Open in Finder предназначено для открытия текущего файла или проекта в файловом менеджере Finder.
№15. Open in GitHub
Расширение Open in GitHub позволяет открывать текущий проект или файл на github.com. Существует множество расширений для решения этой задачи, но, когда я их опробовал, оказалось, что в них слишком много функций, которые мне не нужны.
№16. Open in GitTower
Расширение Open in GitTower добавляет в редактор команду для открытия текущего проекта в GitTower.
№17. Open in Marketplace
Расширение Open in Marketplace оснащает редактор командой для открытия текущего проекта в каталоге расширений для VS Code.
№18. Open in node_modules
Расширение Open in node_modules позволяет находить в папке node_modules модули, соответствующие выделенному тексту или некоей произвольной строке, и открывать их папки. Оно полезно для тех случаев, когда разработчик хочет лучше разобраться с используемыми им модулями.
№19. Open in NPM
Расширение Open in NPM позволяет открывать страницы модулей в каталоге npm. Его удобно использовать для просмотра справочной информации модулей.
№20. Open in Ship
Расширение Open in Ship добавляет в редактор команду для открытия текущего проекта в Ship. К сожалению, Ship прекратил работу. Поэтому теперь мне, для того, чтобы не забыть о поступающих мне сведениях о проблемах в моих проектах, приходится пользоваться специальным листком с напоминаниями в Noty.
№21. Open in Terminal
Расширение Open in Terminal упрощает открытие текущего проекта в терминале.
№22. Open in Transmit
Расширение Open in Transmit позволяет открывать текущий файл или проект в Transmit.
▍Разное
№23. Browser Refresh
Расширение Browser Refresh позволяет обновлять страницу в браузере по нажатию ⌘R прямо из VS Code, без необходимости переключения на браузер. Это расширение пригодится в тех случаях, когда возможностью интерактивной перезагрузки пользоваться нельзя, и тогда, когда вам не нужно, чтобы browser-sync обновлял бы страницу без необходимости в этом.
№24. Commands
Расширение Commands позволяет вызывать произвольные команды из строки состояния. Поддерживается передача аргументов.
Пользовательские команды, созданные средствами Commands
№25. Diff
Расширение Diff позволяет сравнивать открытые файлы. Я создал это расширение из-за того, что конструкция code-diff path1 path2 работает слишком медленно.
№26. Git File History
Расширение Git File History упрощает анализ отличий текущего файла от его предыдущей версии. Существует множество расширений для решения этой задачи, но когда я их пробовал, они оказывались либо переполненными ненужными мне возможностями, либо нерабочими.
№27. GitHub Notifications
Расширение GitHub Notifications, безопасное и поддающееся настройке, предназначено для вывода в строку состояния сведений об уведомлениях на GitHub.
№28. Тема Monokai Night
Monokai Night Theme — это минималистичная тёмная тема, основанная на теме Monokai. Создал я её из-за того, что не смог подобрать то, что меня бы устраивало, из существующих тем.
Тема Monokai Night
№29. No [Unsupported]
Расширение No [Unsupported] предназначено для удаления строки «[Unsupported]» из заголовка редактора. Это расширение уже устарело, поэтому вместо него я рекомендую Fix VSCode Checksums. К несчастью, даже после этого и этого обсуждений надоедливая надпись «[Unsupported]» так никуда и не делась.
№30. Open Multiple Files
Расширение Open Multiple Files позволяет одновременно открывать все файлы в некоей папке. При необходимости файлы можно фильтровать по шаблону.
№31. Search — Open All Results
Расширение Search — Open All Results позволяет одновременно выводить все результаты поиска с использованием единственной команды.
№32. Terminals Manager
Расширение Terminals Manager автоматизирует работу сразу с несколькими терминалами, например, выполнение в них каких-то команд. Надо сказать, что Terminals Manager было моим первым расширением. Если вы пользуетесь терминалами — рекомендую его попробовать.
№33. Transmit
Расширение Transmit оснащает редактор несколькими командами для организации взаимодействия с Transmit.
Управление расширениями
Управление множеством репозиториев может оказаться непростой задачей. Расскажу о том, как это делаю я.
▍Повторяющиеся коммиты
Рано или поздно наступает момент, когда требуется внести некое изменение во все поддерживаемые репозитории. Это сводится к тому, что во множество репозиториев приходится делать одни и те же коммиты. Очень скоро это превращается в скучнейшее занятие.
Для того чтобы автоматизировать решение этой задачи я создал autogit — инструмент, который позволяет выполнять команды в применении ко множеству репозиториев.
Выполнение команды с помощью autogit
▍Синхронизация описания и ключевых слов с GitHub
То, о чём тут пойдёт речь, делать необязательно, но мне не помешал бы инструмент, который автоматизирует синхронизацию описаний и ключевых слов. С этой задачей можно справиться средствами моих инструментов autogit и autogit-command-github-sync.
Синхронизация описаний и ключевых слов средствами autogit
А вот autogit-command-github-publish — моё средство для автоматизированного создания новых репозиториев.
▍Отчёты
Вскоре после того, как я создал несколько расширений, мне стало интересно узнать о том, насколько они популярны, как, со временем, меняется количество их загрузок. Найти сведения по всем расширениям некоего разработчика можно на специальной странице. Например, вот моя страница. Однако эта страница не даёт сведений, например, о том, сколько загрузок расширений было сделано с момента последней проверки. Именно поэтому я создал rssa. Это — инструмент, который позволяет отслеживать изменения всего чего угодно, доступного по URL.
Данные, получаемые средствами rssa
График загрузок Todo+
Здесь, в некоторых местах, можно заметить резкое увеличение числа загрузок. Происходит это при публикации обновлений, так как установка обновлений расширения учитывается системой как загрузка. Это ведёт к тому, что любой может оказаться автором расширения с миллионом загрузок, написав его и опубликовав множество обновлений. Это, кстати, одна из проблем каталога расширений для VS Code.
Итоги
Одно время я думал, что, по количеству опубликованных расширений для VS Code, я нахожусь на втором месте после Microsoft. Однако, как оказалось, кое у кого их на 2 больше, чем у меня. Поэтому я продолжаю писать расширения.
Уважаемые читатели! Пишете ли вы расширения для VS Code?