Что такое сниппеты в программировании

Сниппеты в VS Code

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

• «VS Code — Создание cниппета», вы здесь)
• «VS Code — публикуем свое расширение (сниппет)», в этой статье будет рассказано, как стать автором расширения и загрузить обернутый в пакет расширения сниппет в marketplace.

Сниппет (англ. snippet — фрагмент, отрывок) — программный термин, обозначающий небольшой фрагмент исходного кода или текста, пригодного для повторного использования. Данная технология избавляет от пустой траты времени на ввод текста с самого начала каждого проекта. Кроме того, у вас также могут быть особые требования к стандартной функции, которую вы хотите использовать. Все это может войти в сниппет. Будьте более продуктивны — используйте сниппеты

В статье мы расскажем:

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

Эта статья посвященна JavaScript и TypeScripts. Примеры кода будут написаны на указанных языках. Тем не менее, т.к статья описывает базовые принципы создания сниппетов вы сможете все понять, несмотря на то. что возможно не пишете на этих языках.

Ресурсы

Главными ресурсами для этого приложения становятся: официальная документация для VS Code и специализированная страница по созданию сниппетов кода. На этих ресурсах многому можно научиться, так что посмотрите там:

Что же такое эти причудливые сниппеты и для чего они нужны?

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

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

Так что же хорошо подходит в роле сниппета :

• Class, часто мы создаем много классов в нашем решении.
• If, мы склонны писать довольно много if , if else , if else if, else конструкций.
• Try-Catch, это также очень распространенная конструкция. Разве не было бы хорошо, если бы был сниппет, который поддерживал try, catch and finally ?
• Function, мы обычно создаем массу функций, поэтому имеет смысл использовать какую-то дефолтовую функцию в роле шаблона с подходящим количеством параметров.
• Вход на экран, мы склонны делать это довольно часто с целью отладки.
• Сниппет на ваш выбор, у вас могут быть такие вещи, которые вы делаете довольно часто и которые, возможно, уникальны для вас, к примеру, чтение из файла, доступ к базе данных. Какие сниппеты использовать зависит от вас.

Сниппеты в VS Code

Вы можете создать два типа сниппетов в VS Code:

• глобальный, подходящий для всех языков
• для конкретного языка, возможно использовать только для определенного языка

Создаем первый сниппет

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

Первое, что нам нужно сделать, это выбрать тип фрагмента, который мы собираемся создать. Сейчас оттадим предпочтение варианту global заместо language specific . Давайте создадим global snippet. Выберите в меню следующее: Code => Preference => User Snippets.

Рассмотрим этот скрин, т.к на нем есть много чего интересного:

• Существующие сниппеты: если вы создавали их заранее, то сможете выбрать и загрузить в VS
• Новый файл Global Snippets . выбор этой опции создает глобальный файл
• Файлы, зависящие от языка: при выборе любого из этих параметров будет создан специальный файл сниппета для этого языка. Выберите html и для примера создайте html.json файл.

Как мы уже говорили ранее, давайте создадим глобальный файл, поэтому выберите New Global Snippets file , второй вариант сверху. Давайте назовем его global и получим вот такой результат:

Стоит отметить, что глобальное имя само по себе называется global.code-snippets . Этот файл лежит в /Users//Library/Application Support/Code/User/snippets , если вы хотите потом на него посмотреть. Вы увидете, что все закомментировано, а все самое интересное, на самом деле, начинается с слова Example : поэтому давайте раскомментируем его и рассмотрим подробнее. Выглядит все так:

Теперь перед нами рабочий пример. Стоит отметить, что все начинается с фигурных скобок, причина в том, что мы просто редактируем файл JSON. Следующий интересный момент — за печать в консоль у нас полностью отвечает сниппет и мы лишь указываем его имя. Вывод в консоль определяет объект в фигурных скобках, поэтому давайте разберем каждое свойство :

• scope, это поддерживаемые языки для этого сниппета. В примере поддерживаются javascript and typescript. Каждый поддерживаемый язык отделяется запятой. Это означает, что если мы находимся внутри .js или .ts файла, то можно будет использовать этот сниппет.
• prefix, это то, что вам нужно ввести в окне кода, чтобы появился сниппет. В нашем случае нам нужно набрать log .
• body, это непосредственно ваш фрагмент кода. Тип данных — это массив, и для поддержки фрагмента, содержащего несколько строк, нам нужно добавить новую запись в массив, позже мы обьясним, как это сделать.
• description, это поле, в котором нужно дать краткое описание того, какой компонент за что ответственен.
• $1 , $2 , это просто отметки, где заканчивается курсор, когда вы нажимаете кнопку табуляции

Попробуем сниппет на деле

Мы указали в логике, что нам нужно ввести, чтобы активировать фрагмент, и мы помним, что, чтобы все сработало, нам нужно быть внутри файла, заканчивающегося на .js или .ts .Итак, давайте попробуем:

Как только мы начинаем набирать команду log , раскрывается список вариантов. Первый пункт в списке это наш сниппет. Вы можете видеть, что Print to console — это то, что мы написали как имя фрагмента, а Log output to console.. это наше поле описания. В этот момент мы нажимаем кнопку return и в итоге получаем следующее:

Мы видим, что наш фрагмент помещается в окно кода, но мы также видим, как наш курсор оказался внутри метода log() . Почему так получилось? Этому есть очень простое объяснение, вот здесь мы как раз указали, что курсору нужно остановиться:

Таким образом, вы видите, что от того, как мы размещаем $ 1 или $2 зависит многое, в том числе и скорость процесса разработки.

Второй сниппет- класс

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

Хорошо, теперь у нас есть второй сниппет и, к тому же, многострочный сниппет. Давайте разберемся с этим. Мы поддерживаем javascript и typescript, определяя их как значения scope. Кроме того, мы можем активировать сниппет, набрав команду cc . Затем мы подошли к текущему сниппету нашего свойства body . Теперь он будет уже многострочным. Это следует из того, что мы добавили x количество элементов в нашем свойстве массива. Значение тела — это то, что мы можем ожидать от определения класса с помощью конструктора. Здесь мы добавили несколько интересных битов, при помощи $1 и $2 . Они размещаются после свойства class и внутри конструктора. Это сделано специально, поэтому пользователь должен печатать как можно меньше. Первое, что вы будете делать как разработчик, — это, вероятно, msot, для того, чтобы дать имя классу и добавить некоторый код инициализации в ваш конструктор. Если вы делаете это в другом порядке, не стесняйтесь перемещать $1 и $2 туда, где они будут кстати.

Применим наш сниппет

Итак, мы ввели cc , чтобы активировать наш сниппет и получили его название и описание. После выбора фрагмента, нажатием кнопки return мы получим следующее:

На скриншоте вы можете увидеть, где заканчивается курсор вначале $ 1. Нажав снова на клавишу, мы должны перейти к точке второго шага табуляции, $ 2. Итак, давайте посмотрим, как это выглядит:

Мы видим, что мы дали классу название Test и можем нажать tab , в результате которого мы получим курсор внутри функции конструктора.

Сниппет для конкретного языка

На этот раз мы хотим создать фрагмент кода для конкретного языка. Итак, мы идем в меню и выбираем Code => Preferences => User Snippets. Оказавшись там, мы выбираем Typescript .

Мы видим, что в этот раз имя файла немного отличается. Вместо того, как бывает обычно .code-snippets он называется typescript.json .Поэтому, когда файл заканчивается на .json , мы имеем дело с файлом, относящимся к конкретному языку. Стоит подчеркнуть, что сниппет кода для конкретного языка будет работать только для этого фрагмента, поэтому, если мы находимся внутри файла, оканчивающегося на .js , ввод нашего prefix значения не активирует его. Вместо этого мы должны быть внутри .ts файла, чтобы наш сниппет мог быть выбран.

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

Выше мы создали сниппет, который использует некоторые специфические для языка функции из Typescript, такие как enum и private , используемые в конструкторе (который создает для нас вспомогательные поля), и, в завершение, мы создали довольно классную тему, фантастическую среду, так что если вы думали, что мы здесь в игрушки играем, то, заметьте — сниппет готов к использованию:)

Применим наш сниппет

Итак, мы задали prefix значение tc и т.к нам нужно ввести tc значение, чтобы активировать наш сниппет. Конечный результат выглядит следующим образом:

Выше мы видим, как создается наш enum CharacterTypes , а также наш сниппет класса. Теперь из этого легко можно создать объект, например, набрав:

Вот и все. Создание фрагмента для конкретного языка не так уж и отличается. Окончание имени файла выглядит по-другому, и оно ориентировано на определенный язык.

Резюмируя

Мы рассмотрели сниппеты в VS Code. Мы разобрали, каким образом можно:

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

Я надеюсь, что благодаря этим новым знаниям вы сможете использовать существующие сниппеты, создавать свои собственные и реально повысить свою производительность.

Мысли на будущее

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

Что будет дальше?

В следующей статье мы рассмотрим, как упаковать наш сниппет в расширение и расшарить его на весь мир. Почему бы не позволить всему сообществу разработчиков кода воспользоваться вашим творением. 🙂 Оставайтесь в курсе

Как ускорить свою разработку в 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. Ниже идет список ЯП, для которых можно написать персонализированные сниппеты. Для всех самых и не самых популярных ЯП имеется возможность создать свой сниппет.

Практика

Все сниппеты создаются одинаково. Рассмотрим пример создания глобального сниппета.

1. Перейдем во вкладку “File” → “Preferences” → “User Snippets”
2. Выберем «New Global Snippets file…»
3. Введем в появившемся окне наименование сниппета: «Test-snippet»

Как заполнить?

Раскомментируем все, что находится ниже слова «Example:».

«Print to console» — это наименование сниппета, он будет отображаться вам при вызове данного сниппета при условии, если отсутствует описание сниппета:

«scope» — это поле отображает языки и проекты, где можно использовать вызов данного сниппета. Т.к. по умолчанию стоит javascript и typescript, то, кроме данных файлов, нигде вызвать сниппет не получится.

«prefix» — это префикс вашего сниппета, т.е. короткое название, по которому будет вызываться ваш сниппет.

«body» — это тело сниппета, здесь хранится то, что напечатается после нажатия на кнопку “Tab”.

«description» — это поле «описание», которое поможет вам понять какой именно сниппет Вы вызываете.

Пример

Создаем сниппет с именем “picture”. Префикс даем аналогичный названию. В “description” пишем, о чем наш сниппет, чтобы всегда смогли понять «что он делает?». И самое интересное “body” – тело нашего сниппета, которое представляет из себя массив строк. Т.о. каждый элемент данного массива будет являться строкой. 0-ой элемент – открывает тег <picture>, на последнем даем отступ от сниппета, на предпоследнем закрываем тег

. В 1, 2, 3 элементах массива определяем ресурсы, откуда брать изображения. Обратите внимание, что перед <source> и <img> стоят \t – экранированная “t” – означающая табуляцию. Дальше также экранируем все кавычки и в конце строки не забываем ставить запятую, т.к. это массив.

Что такое $ ?

В сниппетах Visual Studio Code есть возможность писать плейсхолдеры. Что же это такое? Это автоматически выделенные области вашего кода, которые можно менять на лету посредством нажатия “Tab”:

На изображении выше представлен вышеупомянутый сниппет и то, что выделено белой рамкой – это и есть плейсхолдеры (placeholders). Если брать пример выше, то $ – это конструкция плейсхолдера, где Num – порядковый номер. Т.к. в srcset и в src нам нужно указать один и тот же путь, но с разными расширениями, то мы просто указываем, что во всех этих полях будет $<1:images/>, где «images/» — значение по умолчанию, которое подставляется в код и при изменении одного из этих полей изменятся все 3. Аналогично для «alt=””» и «title=””», только порядковый номер placeholder-а увеличивается на один.

Что такое сниппет, и как его правильно сделать

Сниппет — это «анонс» страницы, который отображается в поисковой выдаче. Он включает title, URL-адрес и описание (meta description). На одной странице выдачи помещается около двух десятков сниппетов и часто отличаются между собой, даже если продвигаются по единому запросу.

Сниппеты в Google и Яндекс тоже имеют отличия. Выше представлен пример из выдачи Яндекс: рядом с ссылками есть favicon (небольшая картинка слева от title), описание под заголовком занимает пару строк, и ключевые запросы в них подсвечиваются. Таковы особенности сниппетов Яндекс. В некоторых из них есть значки возле ссылок, которые показывают популярность сайта.

Рассмотрим сниппет Google. В нем нет favicon и цветных значков, но ключевые запросы также выделяются жирным шрифтом.

Эффективный способ выделиться в поисковой выдаче — создать расширенный сниппет. Кроме стандартного описания под заголовком он содержит дополнительные данные: картинки, цены, быстрые ссылки.

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

1. Как формируется сниппет

У каждой поисковой системы свой подход к формированию сниппетов. Google в основном подтягивает описание из description, если тег составлен правильно и релевантен странице. При несоответствии тематики или отсутствии description в выдаче появится фрагмент текста страницы, который выберет поисковик. Рецепт создания хорошего сниппета Google — правильно составленные и оптимизированные title и description.

С Яндекс дело обстоит иначе. Поисковик не всегда отображает description, даже если он релевантный и информативный. Чаще в выдаче появляются фрагменты текста, которые содержат запрос пользователя. Также здесь иногда отображается описание из Яндекс.Каталога. Если нужно запретить поисковику тянуть сниппет из каталога, пропишите в коде страницы такую строку:

Это делается, чтобы не менять описание каталога, но изменить сниппет сайта. Проще повлиять на него один раз через редактирование кода, чем каждый раз заходить в каталог и менять настройки.

2. Как составить качественный сниппет

Для Google достаточно составить правильные с точки зрения SEO метатеги. Оптимальная длина тега title — до 80 символов, description — до 270 символов. Можно дополнить описание эмодзи и символами для привлечения внимания посетителей и выделения сниппета. Главные ключи желательно размещать в начале заголовка и описания.

Для формирования сниппета в Яндекс создайте на странице абзац длиной до 240 символов с ключевыми словами, который будет органично вписываться в основной текст страницы. Здесь важно соблюдать баланс между оптимизацией и интересной подачей информации. После индексации страницы с этим абзацем нужно проверить, появился ли он в выдаче. Если поисковик выдаёт другой текст, можно закрыть его от индексации и создать новый оптимизированный абзац.

Чтобы закрыть текст от индексации в Яндекс, используйте метатег <noindex>:

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

Ещё несколько полезных рекомендаций по составлению хорошего сниппета:

• Используйте уникальный Favicon для сайта.
• Настройте «хлебные крошки» через редактирование кода либо с помощью плагинов для CMS. Например, BreadCrumb для WordPress. Это более актуально для Google, так как в выдаче Яндекс вложенные ссылки кликабельны.

Чтобы помочь поисковикам определить быстрые ссылки, проверьте доступ к разделам и категориям. Соблюдайте правильную иерархию категорий, используйте перелинковку страниц. В разделе Яндекс.Вебмастер «Товары и цены» можно добавить фид с данными, из которого поисковик будет подтягивать цены и описания для расширенного сниппета.

В инструментах Google на данный момент нет возможности посмотреть и отредактировать быстрые ссылки. Они появляются автоматически в сниппетах сайтов с высокой посещаемостью и полным соответствием правилам SEO-продвижения.

3. Как реализовать расширенные сниппеты

Для создания расширенного сниппета в Google можно использовать мастер разметок. Это отличный вариант для тех, кто не желает использовать стандартную микроразметку. Инструмент формирует код HTML, который нужно добавить на страницу. Но перед этим понадобится ввести данные о сайте.

После внедрения кода и следующей индексации сайта новый расширенный сниппет появится в выдаче.

Другой способ повлиять на поисковую выдачу — использовать контекстную рекламу. В этом случае вы сами прописываете текст заголовка, описания и добавляете быстрые ссылки:

Микроразметка для создания расширенного сниппета

Для создания расширенного сниппета используются словари микроразметки. Самые популярные: Schema.org и Микроформаты. Кстати, мастер разметки Google создаёт сниппеты на основе словаря Schema.org. Выберите объект из списка и сформируйте строки для вставки в код страниц. Пример кода с разметкой Schema.org:

Альтернативный вариант — использование микроформатов. Словарь описывает объекты разметки через форматы, например:

hCard — контактные данные,

hProduct — описание товара,

hCalendar — описание события.

Пример разметки с контактными данными:

Чтобы начать пользоваться бесплатным Netpeak Spider, просто зарегистрируйтесь, скачайте и установите программу — и вперёд! 😉

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

Подводим итоги

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

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

А у вас есть секреты в создании привлекательных сниппетов? Поделитесь ими в комментариях.

Как создавать собственные сниппеты кода

Photo by Stillness InMotion on Unsplash

Сниппет кода — это небольшой отрывок исходного кода, машинного кода или текста, пригодный к многократному использованию.

Сниппеты помогают программистам быстрее вводить повторяющуюся информацию в процессе кодинга. Функционал сниппетов кода доступен в большинстве редакторов и IDE.

В этом руководстве я расскажу, как писать собственные сниппеты кода.

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

Чем полезны сниппеты кода

Когда я начинала учиться программированию, первым сниппетом, который я использовала, был Ctrl + ! и enter для получения шаблона документа HTML5. Надо сказать, я вообще сомневаюсь, что кто-то умеет писать все это по памяти. В общем, это было круто, я почувствовала себя ниндзя кодинга.

По мере продвижения я познакомилась с расширениями VSCode для ускорения программирования, в том числе и со сниппетами, и начала активно их загружать.

Все шло прекрасно, пока я не начала часто использовать фреймворки и библиотеки в своих проектах. Мне приходилось вспоминать, как подключать документы к их пакетам, и использовать персонализированные CSS-установки и переменные.

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

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

Сперва я просто создала шаблоны и сохранила их в своей системе. Таким образом я могла без проблем копировать их код при создании каждого нового проекта. Но при таком подходе тоже было многовато мороки. Мне хотелось просто ввести несколько символов, нажать enter — и получить готовые шаблоны на экране. Вот на этом этапе я и познакомилась со сниппетами в VSCode.

На тот момент я не знала, что это называется сниппетами кода, поэтому две недели искала инструмент, который позволил бы мне получить нужный результат. Я уже почти сдалась, когда случайно наткнулась на видео Бреда Травести на YouTube. Это было настоящим спасением. Вскорости я уже добавляла новые пользовательские сниппеты в свою коллекцию.

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

Как создавать пользовательские сниппеты кода

Создание собственного сниппета — дело нехитрое. А благодаря дополнительному инструменту — Snippet Generator — все становится еще проще.

Шаг 1. Смотрим, позволяет ли ваш редактор создавать собственные сниппеты

Доступна ли эта фича, можно посмотреть в документации редактора. Там же вы найдете инструкции по доступу к ней.

В этом руководстве я буду пользоваться VSCode.

Чтобы добраться до нужной настройки, вы можете нажать иконку настроек в боковой панели, а затем выбрать user snippets. Или можно открыть палитру команд ( Ctrl + Shift + p в Windows или CMD + Shift + p в Mac), ввести «snippet» и кликнуть на Preferences: Configure User Snippets.

Откроется выпадающий список для выбора языка.

Шаг 2. Определите скоуп вашего сниппета

Вы можете создать глобальный сниппет. Его можно будет использовать в документах на любом языке. Второй вариант — локальный сниппет, предназначенный для использования с каким-то конкретным языком.

Соответственно, в выпадающем списке вы видите New Global Snippet File и кучу отдельных языков в алфавитном порядке.

Прокрутите до языка, для которого вы хотите написать сниппет, и нажмите на него. Или выберите New Global Snippet File, если сниппет будет использоваться с несколькими языками.

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

Здесь я выбрала глобальный сниппет.

Шаг 3. Разбираемся с синтаксисом

Синтаксис сниппета, в общем-то, довольно прост. Он пишется в формате JSON. Каждый файл содержит неограниченное число сниппетов.

Давайте разберемся, что к чему в этом коде.

• Snippet Name. Это имя сниппета. Также это то, что будет отображаться в IntelliSense, если вы не добавите описания.
• Scope. Определяет, какие языки допустимы для использования этого сниппета. Введите названия языков через запятую. Если не указать языки или пропустить эту строку, сниппет будет доступен в документе на любом языке. Эта часть есть только в глобальных сниппетах, потому что локальные и так ограничены выбранным языком.
• Prefix. Одно или больше триггерных слов, которые побудят IntelliSense показать сниппет.
• Body. Это может быть строка, если у вас однострочный код, или массив строк, если код многострочный.
• Description. Описание сниппета и того, что он делает. Если пропустить, вместо описания будет использоваться имя сниппета.

Пример сниппета № 1:

Это сниппет с именем Print to console. Он может использоваться только в JavaScript и TypeScript-файлах. Если вы наберете log в JavaScript или TypeScript-файле, IntelliSense покажет этот сниппет с описанием Log output to console. Выбрав его и нажав enter, вы увидите console.log() на экране.

Шаг 4. Добавляем стопоры табуляции

Стопоры позволяют перемещать курсор внутри сниппета. $1, $2, …, $n определяют положения, к которым курсор должен перемещаться последовательно при нажатии клавиши Tab. $0 представляет итоговую позицию, где курсор должен остановиться.

Пример сниппета № 2:

Здесь при наборе nfn будет показан сниппет Named Function. Выбрав его, вы увидите этот сниппет на экране. Вы также увидите, что курсор стоит не в конце кода, а перед круглыми скобками.

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

Если у вас есть параметр, вы можете его ввести и снова нажать клавишу Tab. Курсор переместится к следующему стопору — на позицию между фигурными скобками, где должно быть тело функции.

Примечание. При написании многострочного кода в синтаксисе JSON нельзя использовать Tab для отступов. Используйте столько пробелов, сколько вы обычно используете для отступов, например, два.

Шаг 5. Применяйте плейсхолдеры

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

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

Пример сниппета № 3:

Шаг 6. Напишите варианты для выбора

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

Для создания возможности выбора нужно прописать варианты значений через запятую, при этом окружив их вертикальными чертами. Например, $ <1|one, two, three|>.

Пример сниппета № 4:

Введя arrmth, вы сможете выбрать этот сниппет в IntelliSense. Первый стопор табуляции — выпадающий список с массивами, из которых можно выбирать. Следующий стопор — параметры, а последний — код функции.

Генераторы сниппетов

По мере разрастания ваших сниппетов их становится трудно набирать и создавать в редакторе кода. Тут вам помогут генераторы сниппетов.

Генератор принимает ваш обычный код и превращает его в сниппет кода.

В этом руководстве я буду использовать Snippet Generator. Он позволяет создавать сниппеты для VSCode, Sublime Text и Atom.

Как использовать Snippet Generator

В инпуте description введите имя сниппета и его описание, в tab trigger — префикс вашего сниппета. В your snippet.. введите код в его обычном виде (не как массив строк).

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