Как ускорить свою разработку в VS Code — Сниппеты
Реклама
Что значит ускорить разработку?
При программировании мы выполняем много рутинной работы, которая отнимает много времени. Чтобы упростить разработку того или иного продукта изначально были придуманы среды разработки такие, как VS Code. Это один из самых мощных инструментов, который сейчас представлен на рынке. На нем можно как писать сайты, так и скрипты на python, php или js. Можно встроить интерпретатор или подключить компилятор внутрь среды и «горячими клавишами» выполнять ту или иную задачу.
Сегодня в статье рассмотрим один из самых крутых инструментов – сниппет.
Что такое сниппет?
Сниппет, грубо говоря, это кусок заранее написанного кода, который можно вызывать внутри среды Vs Code. Представляет из себя json код, который содержит префикс, тело и описание сниппета. В данном случае мы рассмотрим такие сниппеты, которые можно вставить в любом месте нашего файла.
Сниппеты по умолчанию
В VS Code есть снипппеты по умолчанию, которые уже имеются в среде после установки. Самый популярный – это кусок html кода, который встраивается в вашу страницу. Так, например, если создать файл index.html и в первой строчке файла поставить “!” знак и нажать на “Tab”, то у вас встроится следующий код:
Это пустой шаблон html страницы. После встраивания данного сниппета вы можете менять его так, как Вам это нужно
Как это работает?
Сниппеты работают по принципу Emmet. Если вы когда-либо писали сайты или создавали приложения в Visual Studio, то, наверное, знаете про Emmet. Это набор встроенных или установленных плагинов, которые ускоряют разработку путем написания меньшего объема кода. По сути, то же, что будем делать и мы. Так, например, в html с помощью emmet Вы можете писать длинные конструкции в одну строчку и преобразовывать их таким образом:
Нажмем Tab и преобразуем в.
Собственные сниппеты
После того, как мы разобрались, что такое сниппеты и какие они бывают по умолчанию, время разобраться с тем, как создать свой собственный. Чтобы создать свой сниппет в Visual Studio Code, необходимо перейти во вкладку “File” → “Preferences” → “User Snippets”
После этого в верху окна откроется окно выбора / создания сниппета:
Здесь до горизонтальной разделительной черты находятся ваши собственные сниппеты. Далее есть пункт, который создает Глобальный сниппет «New Global Snippets file…», он может быть вызван и применен в любом проекте и на любом языке. Также можно создать локальный сниппет для конкретного проекта: «New Snippets file for ‘Project_name’…». В данном случае Ваш сниппет также может быть вызван в любом ЯП (Языке программирования), но внутри вашего проекта или внутри директории, для которой Вы открыли VS Code. Ниже идет список ЯП, для которых можно написать персонализированные сниппеты. Для всех самых и не самых популярных ЯП имеется возможность создать свой сниппет.
Практика
Все сниппеты создаются одинаково. Рассмотрим пример создания глобального сниппета.
Как заполнить?
Раскомментируем все, что находится ниже слова «Example:».
«Print to console» — это наименование сниппета, он будет отображаться вам при вызове данного сниппета при условии, если отсутствует описание сниппета:
«scope» — это поле отображает языки и проекты, где можно использовать вызов данного сниппета. Т.к. по умолчанию стоит javascript и typescript, то, кроме данных файлов, нигде вызвать сниппет не получится.
«prefix» — это префикс вашего сниппета, т.е. короткое название, по которому будет вызываться ваш сниппет.
«body» — это тело сниппета, здесь хранится то, что напечатается после нажатия на кнопку “Tab”.
«description» — это поле «описание», которое поможет вам понять какой именно сниппет Вы вызываете.
Пример
Создаем сниппет с именем “picture”. Префикс даем аналогичный названию. В “description” пишем, о чем наш сниппет, чтобы всегда смогли понять «что он делает?». И самое интересное “body” – тело нашего сниппета, которое представляет из себя массив строк. Т.о. каждый элемент данного массива будет являться строкой. 0-ой элемент – открывает тег
, на последнем даем отступ от сниппета, на предпоследнем закрываем тег
. В 1, 2, 3 элементах массива определяем ресурсы, откуда брать изображения. Обратите внимание, что перед и стоят \t – экранированная “t” – означающая табуляцию. Дальше также экранируем все кавычки и в конце строки не забываем ставить запятую, т.к. это массив.
В сниппетах Visual Studio Code есть возможность писать плейсхолдеры. Что же это такое? Это автоматически выделенные области вашего кода, которые можно менять на лету посредством нажатия “Tab”:
Сниппеты в VS Code
Впереди нас ждут две увлекательные статьи, так что, пожалуй, начнем же прямо сейчас.
В статье мы расскажем:
Эта статья посвященна JavaScript и TypeScripts. Примеры кода будут написаны на указанных языках. Тем не менее, т.к статья описывает базовые принципы создания сниппетов вы сможете все понять, несмотря на то. что возможно не пишете на этих языках.
Ресурсы
Главными ресурсами для этого приложения становятся: официальная документация для VS Code и специализированная страница по созданию сниппетов кода. На этих ресурсах многому можно научиться, так что посмотрите там:
Что же такое эти причудливые сниппеты и для чего они нужны?
Мы можем использовать сниппеты, которые кто-то другой создал для нас, или же мы создаем свои собственные, соответствующие код стайлу нашей компании.
Так что же хорошо подходит в роле сниппета :
Сниппеты в VS Code
Вы можете создать два типа сниппетов в VS Code:
Создаем первый сниппет
Просто взять и создать сниппет практически невозможно, поэтому давайте детально разберем как мы приходим к его созданию.
Рассмотрим этот скрин, т.к на нем есть много чего интересного:
Попробуем сниппет на деле
Второй сниппет- класс
Итак, теперь мы знаем и понимаем всю внутреннюю анатомию сниппета. Настало время создать собственный сниппет с нуля:
Применим наш сниппет
Сниппет для конкретного языка
Итак, давайте на секунду отвлечемся и подумаем, мы выбрали Typescript в качестве конкретного языка, так что это пока единственный язык, что мы собираемся поддерживать. Это означает, что мы собираемся создавать сниппеты, используя специфические для языка конструкции, такие как типы и всякие другие вещи. Давайте воссоздадим наш сниппет кода, но для Typescript:
Применим наш сниппет
Итак, мы задали prefix значение tc и т.к нам нужно ввести tc значение, чтобы активировать наш сниппет. Конечный результат выглядит следующим образом:
Вот и все. Создание фрагмента для конкретного языка не так уж и отличается. Окончание имени файла выглядит по-другому, и оно ориентировано на определенный язык.
Резюмируя
Мы рассмотрели сниппеты в VS Code. Мы разобрали, каким образом можно:
Я надеюсь, что благодаря этим новым знаниям вы сможете использовать существующие сниппеты, создавать свои собственные и реально повысить свою производительность.
Мысли на будущее
Мы лишь немного набросали примеров того, как можно использовать сниппеты кода, но этого должно быть достаточно, чтобы начать работу. Для получения дополнительной информации о сниппетах, пожалуйста, читайте официальную документацию «Создание собственных фрагментов»
Что будет дальше?
В следующей статье мы рассмотрим, как упаковать наш сниппет в расширение и расшарить его на весь мир. Почему бы не позволить всему сообществу разработчиков кода воспользоваться вашим творением. 
Оставайтесь в курсе
Сниппет
Сниппет (англ. snippet — фрагмент, отрывок) — программный термин, обозначающий небольшой фрагмент исходного кода или текста, пригодного для повторного использования. Сниппеты не являются заменой процедур, функций или других подобных понятий структурного программирования. Они обычно используются для более лёгкой читаемости кода функций, которые без их использования выглядят слишком перегруженными деталями, или для устранения повторения одного и того же общего участка кода.
Управление сниппетами (snippet management) — функциональность некоторых редакторов кода и сред разработки. Она позволяет пользователю сохранять сниппеты для дальнейшего использования в процессе разработки кода в этом редакторе.
Содержание
Обзор
Сниппеты в поисковых системах
Термин сниппет иногда используется для небольших отрывков текста из найденной поисковой машиной страницы сайта, использующихся в качестве описания ссылки в результатах поиска. Как правило, они содержат контекст, в котором встретилось ключевое слово в тексте на странице. В качестве сниппетов также может выводиться текст из метатэга «Description». Более подробно см. страница выдачи результатов поиска.
Просмотрев сниппет, можно приблизительно понять, соответствует ли страница именно вашему запросу, даже не открывая самой этой страницы.
Сниппеты в текстовых редакторах
Функция управления сниппетами в текстовых редакторах популярна среди разработчиков программного обеспечения и тех, кому постоянно требуется ввод повторяющегося текста. Эта потребность объясняется тем, что вводимый фрагмент текста не меняется, или меняется очень мало.
Текстовые редакторы, включающие такую функциональность, обычно имеют механизм, который позволяет управлять набором сниппетов (каталогом) аналогично тому, как редакторы или операционные системы позволяют управлять документами или файлами. Этот механизм включает такие операции, как просмотр, добавление, изменение, удаление, сортировка, фильтрация, группировка и переименование сниппетов в репозитории, каталоге или базе данных.
Сниппеты в средах разработки
Интегрированные среды разработки (IDE) содержат встроенные средства для ввода конструкций языка. Например, в Microsoft Visual Studio, Borland Developer Studio, для этого необходимо ввести ключевое слово и нажать определённую клавишную комбинацию. В IDE Geany существует специальный файл snippets.conf (путь к файлу: /home/user/.config/geany) позволяющий создавать свои сниппеты. Другие программы, такие как Macromedia Dreamweaver и Zend Studio, позволяют использовать сниппеты в Веб-программировании.
Классификация программных сниппетов
Функциональность сниппетов, дополнительная к описанной выше, может быть использована для классификации снипеттов по степени их «интерактивности» (модифицируемости, настраиваемости).
С этой точки зрения сниппеты делятся на:
Статические сниппеты состоят главным образом из неизменного текста, который пользователь может выбрать для вставки в текущий документ. Пользователь не может задать никаких дополнительных параметров, кроме, может быть, положения курсора относительно вставляемого текста. Статические снипетты напоминают простые макросы в языках программирования.
Динамические снипетты состоят из неизменного текста и динамических элементов. Пользователь может задать как значение этих динамических элементов, так и их положение в неизменном тексте в процессе выбора и вставки сниппета. Примерами динамических элементов являются переменные, принимающие значение текущей даты или системного времени, или ввода пользователя через графический интерфейс. Динамические сниппеты имеют много общего с макрокомандами и шаблонами (template).
Скриптовые сниппеты состоят из кода на программном макроязыке или скриптовом языке. Скриптовые сниппеты дают пользователю максимальную гибкость, конечно в рамках возможностей, предоставляемых программным языком, известности языка для пользователя и распространённости языка.
Возможности команд скрипта различаются и зависят от приложения, использующего сниппеты (хост-приложения). Они могут включать выполнение команд командного интерпретатора, вывод диалоговых окон и другие способы взаимодействия пользователя с операционной системой и компонентами хост-приложения.
Возможности программных сниппетов
Поддержка приложениями возможностей скриптовых сниппетов сильно различается. Ниже описываются функции, которые обычно присутствуют в системах, поддерживающих программируемые сниппеты.
Статичный текст (plain text)
Хотя поддержка неизменяемого текста является базовой функциональностью, реализованной даже в программах, поддерживающих только статические сниппеты, программируемые снипетты используются также и для работы с таким текстом.
Одной общей трудностью, однако, является то, что система, поддерживающая программируемые сниппеты, часто должна иметь возможность различать, что является статичным текстом, а что — программными командами. Дополнительным усложнением такого различения является то, что приложения, поддерживающие программные сниппеты, почти всегда включают поддержку нескольких языков программирования или через подсветку синтаксиса, или через выполнение встроенных команд.
По этим и другим причинам, выделение статичного текста из программного сниппета почти всегда сопряженно с необходимостью избежать трудностей с синтаксическим анализом и идентификацией разделителей.
Константы и переменные
Программируемые сниппеты часто предоставляют пользователю возможность указать пространство имён или область действия существующих переменных, в которых он может затем выбрать различные константы и переменные для формирования текста сниппета. Это может быть адрес электронной почты пользователя, работающего в системе, текущее системное время или дата, результат работы функции.
Скриптовые сниппеты часто ассоциируются с файлами, над которыми идёт работа. Поэтому переменные в сниппетах могут включать значения переменных среды и аргументы, определяющие имя файла, позицию курсора в нём, содержащий файл каталог и другие величины, относящиеся к редактируемому файлу.
Интерпретируемый код
Скриптовые сниппеты могут содержать код на нескольких языках программирования. Это могут быть как самостоятельные языки программирования, так и язык, специфичный для приложения, в рамках которого он используется. [1]
Заполняемые шаблоны
Скриптовые сниппеты обычно включают возможность для подстановки значения, введённого пользователем. Это значение не определено до момента, когда сниппет вставляется или активируется каким-либо образом в ходе редактирования. Некоторые приложения определяют специальный язык разметки, который позволяет редактору определить границы шаблона в вводимом тексте.
Другие приложения используют графический интерфейс пользователя и модальные окна, которые позволяют пользователю ввести одно или несколько значений для подстановки на место шаблонов.
Идентификаторы шаблонов
Обычно шаблоны выделяются при помощи специальных символов или последовательностей символов, отделяющих их от остального текста сниппета. Некоторые системы позволяют давать названия (идентификаторы) шаблонам. Идентификаторы могут быть полезны для поддержки функций повторения или модификации шаблона.
Повторение шаблона
Повторение позволяет пользователю использовать значение, сопоставленное шаблону, в тексте сниппета несколько раз. В предыдущем примере идентификатор шаблона first_name является примером такого использования.
Модификация шаблона
Эта функциональность позволяет указать, что значение, сопоставленное шаблону, должно модифицироваться при использовании в разных частях текста сниппета. Например, пользователь может указать что шаблон, заменяемый на название документа и повторяющийся в сниппете несколько раз, выводится первый раз заглавными буквами, а во всех остальных случаях — строчными.
Программы, поддерживающие сниппеты
Ниже приводится неполный перечень приложений, поддерживающих сниппеты. Дополнительные сведения приводятся в статье о текстовых редакторах.
Сниппеты. Как сделать процесс работы с документацией проще
Привет, Хабр! Меня зовут Павел Лесюк. Я тестировщик нативных мобильных приложений. В своей предыдущей статье я привел список инструментов, которые могут использоваться тестировщиками и некоторыми другими специалистами для повышения продуктивности своей работы.
В новой серии статей я бы хотел рассмотреть некоторые инструменты поближе и показать на примерах их использование. Первая статья будет посвящена наиболее эффективному и простому решению — сниппетам.
Сниппеты — это фрагменты текста (кода), которые сохраняются для последующего многократного использования. Сниппеты бывают трех видов: статические (обычный текст), динамические (с использованием переменных) и скриптовые (с использованием кода).
В этой статье мы рассмотрим примеры создания статических и динамических сниппетов при работе с десктопом и мобильными приложениями. Помните, что сниппеты — это универсальный инструмент, который может использовать любой специалист, работающий с текстовой информацией.
Инструменты для десктопа
В macOS есть встроенная автозамена. Найти ее можно по пути: «Настройки» → «Клавиатура» → «Текст».
В ней поддерживается только обычный текст, так что ее можно использовать только для простых шаблонов.
Заполнение отчетов о дефектах
Допустим, мы хотим автоматизировать процесс создания отчетов о дефектах. Для начала создадим наиболее полный шаблон для заполнения описания в баг-трекинговой системе Jira. Будем учитывать то, что в будущем мы захотим создать все комбинации наиболее часто используемых полей для заполнения описания отчетов. Приступим.
Создание группы сниппетов
Присваивание имени и аббревиатуры
Теперь нужно создать новый сниппет, присвоить ему имя и аббревиатуру. Имя — идентификатор, с помощью которого можно быстро определить, что содержится в сниппете и найти его при необходимости. Аббревиатура — последовательность символов, при вводе которых будет вставляться содержимое сниппета.
Вот несколько свойств хороших аббревиатур:
Заполнение сниппета
Мы создали статический сниппет. Символы «*» и «#» — синтаксис форматирования в Jira (жирный и нумерованный список соответственно). Посмотрим как работает вставка.
Таким же образом можем создать шаблоны для всех используемых комбинаций полей в описании отчета о дефекте. Можно создать именно тот набор шаблонов, который мы будем использовать чаще всего.
Например, у меня этот набор выглядит следующим образом:
Использование динамических элементов
Рассмотрим еще несколько примеров.
Например, мне нужно быстро вшить ссылку в текст при оформлении отчета. При использовании встроенного инструмента в Jira это выглядит так:
С помощью динамических элементов мы вставляем скопированный в буфер обмена контент и устанавливаем курсор в нужную нам позицию. Посмотрим как работает вставка.
Теперь усовершенствуем наш первый шаблон. Допустим, вы мобильный тестировщик, у вас есть парк мобильных устройств, часть которого закреплена за вами. Вы тестируете на этих устройствах чаще всего, и вам хотелось бы иметь их список под рукой при оформлении отчета о дефекте.
Для начала создадим список устройств. Сделаем это с использованием опциональных для выбора элементов.
Отлично! Теперь перейдем к нашему основному сниппету и обогатим его контентом.
Мы добавили вставку опциональных элементов из других сниппетов и установили позицию курсора, чтобы можно было сразу приступить к вводу текста. Посмотрим как работает наш усовершенствованный сниппет.
При вставке динамических элементов, которые ожидают от пользователя каких-либо действий (заполнение, выбор и т. д.), будет открываться отдельное окно, в котором над этими элементами нужно будет произвести соответствующие действия.
Создание шаблонов заметок
Еще один пример: создание шаблонов структуры рабочих заметок. Я веду заметки с поддержкой markdown для билдов мобильных приложений с определенной структурой и использую сниппеты для их быстрого генерирования.
Ниже продемонстрирован пример вставки готового шаблона в заметки.
Заполнение тестовых форм
С помощью имитации нажатия кнопки Tab переход между полями происходит автоматически.
Создание отчетов
Рассмотрим создание отчета о тестировании. Предположим, что раз в неделю мы пишем отчет о новых проектах в мобильных приложениях.
Используем динамические элементы, форматированный текст и картинки.
В итоге получим готовую структуру отчета, которую можно быстро заполнить нужными значениями и отправить письмо.
Инструменты для мобильных ОС
Android
В Android можно использовать Texpand или Gboard. К сожалению, в обоих приложениях нет возможности синхронизации между устройствами.
Gboard поддерживает только обычный текст. По сути это расширенный буфер обмена, в котором можно закреплять некоторые из фрагментов.
В TextExpander все сниппеты синхронизируются между десктопной и мобильной версией. В мобильной версии есть ряд ограничений по сравнению с десктопной версией:
Ниже продемонстрирован пример работы с динамическим сниппетом.
Заключение
Мы рассмотрели работу статических и динамических сниппетов на примере создания тестовой документации. Их также можно использовать для создания различного рода писем (повторяющихся почтовых рассылок, предложений о рассмотрении вакансий и т. д.), структуры документов и заметок, генерации кода и много чего еще.
Спасибо за то, что дочитали статью до конца. Надеюсь, информация, изложенная в ней, окажется для вас полезной, и вы сможете сэкономить время, используя ее на практике. Если у вас возникли какие-либо вопросы по статье — буду рад на них ответить. В следующей статье я планирую написать об использовании скриптовых сниппетов. А пока предлагаю подписаться на мой Telegram-канал, где я публикую всю остальную информацию на тему тестирования.