Сниппеты в Visual Studio

Программы --- Visual Studio --- Сниппеты

Одно из преимуществ интегрированной среды разработки (Integrated Development Environment - IDE) над обычным текстовым редактором заключается в том, что она позволяет повысить производительность и эффективность работы, ускоряя процесс работы над программой. Двумя наиболее мощными возможностями повышения производительности работы разработчика в системе Visual Studio 2013 являются поддержка сниппетов и инструменты для рефакторинга кода.

Сниппеты (code snippets) - это небольшие фрагменты текста, которые можно вставлять в основной код приложения, а затем настраивать в соответствии с его требованиями. Они не позволяют генерировать законченные приложения или целые файлы в отличие от шаблонов проекта и элементов управления. Вместо этого они используются для вставки часто используемых структур или запутанных блоков программ, которые тяжело запомнить. В этой статье мы покажем, как, используя сниппеты, можно значительно увеличить эффективность кодирования.

Сниппеты уже давно существовали во многих формах, но в ранних системах Visual Studio и в среде VB6 для их поддержки обычно требовались надстройки сторонних поставщиков. Система Visual Studio 2013 обеспечивает интенсивную поддержку сниппетов, что позволяет вставлять в файл блоки кода вместе с заранее подставленными переменными, облегчая их дальнейшую настройку.

Аналоги сниппетов

Прежде чем исследовать сниппеты, рассмотрим простейшие средства, с помощью которых система Visual Studio позволяет вставлять в файл заранее заготовленные блоки текста. Наряду с элементами управления, которые вставляются в форму, панель компонентов Toolbox может содержать блоки текстов (например, кода), которые тоже можно вставлять в файл. Для того чтобы добавить блок кода (или другого текста) на панель Toolbox, достаточно выбрать текст в окне редактора и перетащить его на панель Toolbox. В результате будет создан элемент панели Toolbox, именем которого является первая строка кода. Эти фрагменты можно переименовывать, переставлять и группировать так, как и любые другие компоненты инструментальной панели Toolbox. Для того чтобы вставить блок кода в файл, его следует перетащить с панели Toolbox в намеченное место файла, как показано на рисунке ниже, или дважды щелкнуть на элементе панели Toolbox, чтобы вставить Фрагмент текста в текущую позицию курсора в активном файле.

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

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

Сниппеты

Теперь рассмотрим намного более полезный способ вставки блоков кода в файл: сниппеты. Они записываются в отдельных XML-файлах вместе с переменными параметрами, облегчающими настройку сниппета для конкретной задачи. Сниппеты являются частью технологии IntelliSense и значительно упрощают поиск и вставку блоков кода в текст программы. Сниппеты на языке VB также позволяют добавлять ссылки на сборки и и вставлять инструкции импорта.

Система Visual Studio 2013 изначально содержит много заранее подготовленных сниппетов для двух основных языков, VB и C#, а также для языков JavaScript, HTML и XML. Эти сниппеты организованы в логические иерархии, поэтому их можно легко найти. Вместо инструментальной панели Toolbox для поиска сниппета можно также использовать команды или комбинации клавиш, открывающие списки основных групп сниппетов.

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

• Объявление класса. В этом случае сниппет, по существу, генерирует целый класс.

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

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

Использование сниппетов в языке C#

Команда Insert Snippet является одной из функциональных возможностей технологии IntelliSense. Она встроена в редактор кода и вначале выводит строку "Insert Snippet" вместе с раскрывающимся списком групп сниппетов, в которых можно выбрать подходящий фрагмент. Когда пользователь выбирает группу, содержащую требуемый сниппет (используя навигационные клавиши со стрелками, направленными вверх и вниз, и клавишу <Tab>), система показывает ему список сниппетов. Для выбора нужного сниппета достаточно дважды щелкнуть на его имени (или нажать клавиш) <Tab> или <Enter>).

Для того чтобы вставить сниппет в код на языке C#, пользователю достаточно показать место, куда он хочет вставить генерируемый код, а затем открыть список Insert Snippet с помощью комбинации клавиш <Ctrl+K>, <Ctrl+X>. Существуют еще два способа запустить процесс вставки сниппетов. Во-первых, можно щелкнуть правой кнопкой мыши в окне редактора кода и выбрать команду Insert Snippet из открывшегося контекстного меню. Во-вторых, можно выбрать команду Edit --> IntelliSense --> Insert Snippet.

В результате система Visual Studio откроет список Insert Snippet, как показано на рисунке ниже. Когда пользователь прокручивает этот список и устанавливает курсор мыши на его элементы, на экране появляется подсказка, в которой содержится краткое описание сниппета и указывается его сокращенное имя для вставки в программу.

Для того чтобы воспользоваться этим именем, достаточно набрать его в редакторе кода (обратите внимание на то, что сниппет указан в списке IntelliSense) и дважды нажать клавишу <Tab>. В результате сниппет будет вставлен в требуемую позицию.

На рисунке ниже показан результат выбора сниппета Automatically Implemented Property (сокращенно prop). Довольно часто получившийся код требуется модифицировать. Фрагменты текста, которые обычно можно изменять (переменные для замены), выделяются подсветкой.

Изменяя переменные в сгенерированном сниппете, система Visual Studio 2013 оказывает пользователю дополнительную помощь. Нажатие клавиши <Tab> переносит подсветку на следующую переменную, значение которой можно заменить своим собственным. Для того чтобы вернуться назад, необходимо нажать клавиши <Shift+Tab>. Таким образом, разработчик может легко найти разделы кода, которые необходимо изменить, не выбирая следующий фрагмент вручную. Некоторые сниппеты используют общие переменные. Это значит, что изменение значения такой переменой в одном месте приводит к его изменению во всех экземплярах.

Для того чтобы скрыть подсветку переменных в сниппете, можно продолжить редактирование или нажать клавишу <Enter> или <Esc>.

Использование сниппетов в языке VB

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

Для того чтобы использовать сниппет, сначала необходимо выбрать, в какое место листинга программы следует вставить сгенерированный код, и установить в этом месте курсор. Пользователю не следует беспокоиться о ссылках и инструкциях сборки, они будут помещены в правильные места. Затем, как и в случае сниппетов в программах на языке C#, с помощью одного из следующих методов можно открыть список Insert Snippet:

• Комбинация клавиш <Ctrl+K>, <Ctrl+X>.

• Щелчок правой кнопкой мыши и выбор команды Insert Snippet из контекстного меню.

• Выбор команды Edit --> IntelliSense --> Insert Snippet.

В системе VB есть еще один способ, с помощью которого можно открыть список Insert Snippet List: просто ввести знак вопроса (?) и нажать клавишу <Tab>.

Например, пройдем по иерархии и вставим сниппет Draw a Pie Chart:

На рисунке видно, что в тексте подсказки имеется строка "Shortcut: drawPie". Этот текст означает, что выбранный сниппет имеет сокращенное название, которое можно использовать для его автоматического вызова без перебора элементов иерархии сниппетов. Как и при работе с программами на языке C#, достаточно ввести это сокращенное название в окне редактора кода и нажать клавишу <Tab>. В системе VB эти названия не чувствительны к регистру, поэтому данный пример можно сгенерировать, набрав слово "drawpie" и нажав клавишу <Tab>. Обратите внимание на то, что это имя не появляется в списке IntelliSense для языка VB, как это происходило для языка C#.

Если после вставки сниппет содержит переменные для замены, пользователь может вставить их значения, а затем перемещаться между ними, нажимая клавишу <Tab>, как было описано выше при обзоре сниппетов для языка C#. Для того чтобы скрыть подсветку этих переменных сниппета, можно просто продолжить кодирование или щелкнуть правой кнопкой мыши и выбрать команду Hide Snippet Highlighting. Если необходимо подсветить все переменные для замены, входящие в сниппет, вставленные после открытия файла, достаточно щелкнуть правой кнопкой мыши и выбрать команду Show Snippet Highlighting.

Окружение кода с помощью сниппета

Последнее действие по рефакторингу, доступное в языке C# (и в языке VB с помощью надстройки CodeRush Xpress) - возможность окружить сниппетом существующий блок кода. Например, для того чтобы погрузить существующий блок кода в условный блок "try-catch", достаточно щелкнуть правой кнопкой мыши и выбрать команду Surround With или выбрать блок кода и нажать клавиши <Ctrl+K>, <Ctrl+S>.

В ответ откроется список Surround With, содержащий сниппеты, доступные для окружения выбранной строки кода:

Библиотека Code Snippets Manager

Code Snippets Manager - это главная библиотека сниппетов в системе Visual Studio. Для доступа к ней необходимо выбрать команду Tools --> Code Snippet Manager или нажать комбинацию клавиш <Ctrl+K>, <Ctrl+B>.

Когда библиотека Code Snippets Manager открывается в первый раз, в ней отобразятся доступные сниппеты на языке HTML, хотя с помощью списка Language пользователь может сам задать требуемый язык программирования. На рисунке ниже показан экран дисплея при редактировании проекта на языке C#. Иерархическая структура по умолчанию копирует множество папок на персональном компьютере, но по мере того как пользователь будет добавлять файлы со сниппетами из разных местах, новые сниппеты будут распределяться по соответствующим папкам.

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

Удалить папку очень просто, даже небезопасно просто. Достаточно выбрать узел дерева, который нужно удалить, и щелкнуть на кнопке Remove. В результате этот узел, все его дочерние узлы и сниппеты будут удалены из библиотеки Code Snippets Manager, причем окно подтверждения при этом не открывается. Если пользователь сделал это случайно, то лучше всего щелкнуть на кнопке Cancel и открыть диалоговое окно снова. Если пользователь внес изменения, которые он хочет сохранить, то достаточно выполнить все действия, описанные выше. Однако искать место для папки, случайно удаленной из списка сниппетов, заданных по умолчанию, может оказаться утомительным занятием.

Сниппеты, инсталлированные вместе с системой Visual Studio, расположены глубоко в иерархии папок инсталляции. По умолчанию библиотека сниппетов при запуске под управлением 32-битовой системы Windows инсталлируется для языка VB в папке:

%program files%\Microsoft Visual Studio {version}\VB\Snippets\1033

и для языка C# в папке:

%program files%\Microsoft Visual Studio {version}\VC#\Snippets\1033

(если используется 64-битовая система Windows, то строку %program files% следует заменить строкой %program files (x86)%). Отдельные файлы сниппетов можно импортировать в библиотеку с помощью кнопки Import. Преимущество этого метода над использованием кнопки Add заключается в том, что в этом случае пользователь получает возможность указать место каждого сниппета в структуре библиотеки.

Создание сниппетов

Система Visual Studio 2013 не содержит средств для создания или редактирования сниппетов. Тем не менее программа Bill McCarthy's Snippet Editor позволяет создавать свои собственные сниппеты, модифицировать их и управлять ими (включая поддержку для языков VB, C#, HTML, JavaScript и XML). Сначала программа Snippet Editor была внутренним проектом компании Microsoft, но теперь она представляет собой открытое программное обеспечение, расположенное на веб-сайте CodePlex, на котором компания Bill исправляет существенные ошибки и вносит дополнительные функциональные возможности. Благодаря помощи других профессионалов программа Snippet Editor поддерживает теперь много разных языков программирования.

Создание сниппетов с помощью редактирования соответствующих XML-файлов может оказаться утомительным и сложным процессом, а программа Snippet Editor делает это много проще. Начиная работать с редактором Snippet Editor, пользователь видит в правом левом углу раскрывающийся список, в котором следует выбрать версию Visual Studio. Ниже приведено дерево/содержащее все сниппеты, известные в системе Visual Studio. Раскрыв узел, можно увидеть совокупность папок, аналогичных иерархии папок в библиотеке сниппетов. Раскрыв узел, можно увидеть совокупность папок, аналогичных иерархии папок в библиотеке сниппетов:

Просмотр существующих сниппетов

Одним из преимуществ программы Snippet Editor является удобное представление структуры любого файла сниппетов, существующего в системе. Благодаря этому пользователь может просматривать сниппеты, установленные в системе Visual Studio по умолчанию, чтобы понять, как лучше создать свои собственные сниппеты.

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

Для того чтобы продемонстрировать, насколько просто программа Snippet Editor создает собственные сниппеты пользователя, перейдем к следующему упражнению, в котором создадим сниппет, для библиотеки ASP.NET AJAX.

1. Запускаем программу Snippet Editor и создаем новый сниппет. Для этого выбираем в дереве предназначенную папку, щелкаем на ней дважды и выбираем команду Add New Snippet из появившегося контекстного меню.

2. В ответ на приглашение вводим имя сниппета и щелкаем на кнопке ОК. Дважды щелкаем на новом элементе, чтобы открыть окно Editor. Обратите внимание на то, что сниппет не открывается автоматически в окне Editor - не замените свойства другого сниппета по ошибке!

3. Теперь в первую очередь редактируем поля Title, Description и Shortcut:

   

4. В окне Editor вставляем код, необходимый для создания простого Ajax-запроса с помощью библиотеки jQuery.

5. Нажимаем кнопку Save.

Наш сниппет закончен и готов к использованию. Теперь его можно вставить в окно редактора кода системы Visual Studio.