Сниппет кода — это небольшой отрывок исходного кода, машинного кода или текста, пригодный к многократному использованию.
Сниппеты помогают программистам быстрее вводить повторяющуюся информацию в процессе кодинга. Функционал сниппетов кода доступен в большинстве редакторов и 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. Каждый файл содержит неограниченное число сниппетов.
{
// Code Snippet 1
"Snippet name": {
"scope": "language1, language2"
"prefix": "trigger word 1",
"body": ["your code snippet"],
"description": "description of the code"
},
// Code Snippet 2
"Snippet name": {
"scope": "language1, language2"
"prefix": ["trigger word 1, trigger word 2"],
"body": ["your code snippet"],
"description": "description of the code"
}
}
Давайте разберемся, что к чему в этом коде.
- Snippet Name. Это имя сниппета. Также это то, что будет отображаться в IntelliSense, если вы не добавите описания.
- Scope. Определяет, какие языки допустимы для использования этого сниппета. Введите названия языков через запятую. Если не указать языки или пропустить эту строку, сниппет будет доступен в документе на любом языке. Эта часть есть только в глобальных сниппетах, потому что локальные и так ограничены выбранным языком.
- Prefix. Одно или больше триггерных слов, которые побудят IntelliSense показать сниппет.
- Body. Это может быть строка, если у вас однострочный код, или массив строк, если код многострочный.
- Description. Описание сниппета и того, что он делает. Если пропустить, вместо описания будет использоваться имя сниппета.
Пример сниппета № 1:
{
// log to console
"Print to console": {
"scope": "javascript, typescript",
"prefix": "log",
"body": "console.log();",
"description": "Log output to console"
}
}
Это сниппет с именем Print to console. Он может использоваться только в JavaScript и TypeScript-файлах. Если вы наберете log в JavaScript или TypeScript-файле, IntelliSense покажет этот сниппет с описанием Log output to console. Выбрав его и нажав enter, вы увидите console.log() на экране.
Шаг 4. Добавляем стопоры табуляции
Стопоры позволяют перемещать курсор внутри сниппета. $1, $2, …, $n определяют положения, к которым курсор должен перемещаться последовательно при нажатии клавиши Tab. $0 представляет итоговую позицию, где курсор должен остановиться.
Пример сниппета № 2:
// named function
{
"Named Function": {
"scope": "javascript, typescript",
"prefix": "nfn",
"body": [
"function $1($2){",
" $0",
"}"
],
"description": ""
}
}
Здесь при наборе nfn будет показан сниппет Named Function. Выбрав его, вы увидите этот сниппет на экране. Вы также увидите, что курсор стоит не в конце кода, а перед круглыми скобками.
Введите имя функции, например, GetUsers, и нажмите клавишу Tab. Вы заметите, что курсор переместился внутрь скобок.
Если у вас есть параметр, вы можете его ввести и снова нажать клавишу Tab. Курсор переместится к следующему стопору — на позицию между фигурными скобками, где должно быть тело функции.
Примечание. При написании многострочного кода в синтаксисе JSON нельзя использовать Tab для отступов. Используйте столько пробелов, сколько вы обычно используете для отступов, например, два.
Шаг 5. Применяйте плейсхолдеры
Плейсхолдеры — это стопоры с заданными значениями. Они помогают пользователю разобраться, что нужно вводить на каждой отдельной позиции курсора.
Плейсхолдер подсвечивается, так что вы сразу его заметите и сможете заменить нужными значениями.
Пример сниппета № 3:
// named function
{
"Named Function": {
"scope": "javascript, typescript",
"prefix": "nfn",
"body": [
"function ${1:functionName}(${2:parameter}){",
" ${0:functionBody}",
"}"
],
"description": ""
}
}
Шаг 6. Напишите варианты для выбора
Плейсхолдеры могут иметь варианты выбора в качестве значений. То есть вместо того чтобы набирать значения вручную, вы сможете выбрать из выпадающего списка.
Для создания возможности выбора нужно прописать варианты значений через запятую, при этом окружив их вертикальными чертами. Например, ${1|one, two, three|}.
Пример сниппета № 4:
// array method
{
"Array Method": {
"scope": "javascript, typescript",
"prefix": "arrmth",
"body": [
"${1|forEach, map, filter, reduce|}((${2:item}) => {",
" $0",
"})"
],
"description": ""
}
}
Введя arrmth, вы сможете выбрать этот сниппет в IntelliSense. Первый стопор табуляции — выпадающий список с массивами, из которых можно выбирать. Следующий стопор — параметры, а последний — код функции.
Генераторы сниппетов
По мере разрастания ваших сниппетов их становится трудно набирать и создавать в редакторе кода. Тут вам помогут генераторы сниппетов.
Генератор принимает ваш обычный код и превращает его в сниппет кода.
В этом руководстве я буду использовать Snippet Generator. Он позволяет создавать сниппеты для VSCode, Sublime Text и Atom.
Как использовать Snippet Generator
В инпуте description введите имя сниппета и его описание, в tab trigger — префикс вашего сниппета. В your snippet.. введите код в его обычном виде (не как массив строк).
После этого вы сможете добавить стопоры табуляции, плейсхолдеры и варианты выбора, как уже объяснялось выше.
Пример сниппета № 5:
//named function
function ${1:functionName}(${2: parameter}) {
${0:functionBody}
}
Пример сниппета № 6:
//array method
${1|forEach, map, filter, reduce,|}((${2:item}) => {
$0
)}
Конечный код сниппета
{
// log to console
"Print to console": {
"scope": "javascript, typescript",
"prefix": "log",
"body": "console.log();",
"description": "Log output to console"
},
// named function
"Named Function": {
"scope": "javascript, typescript",
"prefix": "nfn",
"body": [
"function ${1:functionName}(${2:parameter}){",
" ${0:functionBody}",
"}"
],
"description": ""
},
// array method
"Array Method": {
"scope": "javascript, typescript",
"prefix": "arrmth",
"body": [
"${1|forEach, map, filter, reduce|}((${2:item}) => {",
" $0",
"})"
],
"description": ""
}
}
Вот и все.
Итоги
Давайте повторим. Мы узнали, что:
- сниппет кода — это маленький кусочек пригодного к повторному использованию кода, который помогает разработчикам экономить время на написании повторяющихся отрывков
- файл сниппета кода может содержать неограниченное количество сниппетов
- сниппет может быть локальным (только для одного языка) или глобальным (для двух и более языков)
- сниппеты кода пишутся в синтаксисе JSON
- в сниппеты можно добавлять стопоры табуляции, плейсхолдеры и опции выбора
- для создания сниппетов можно пользоваться специальными генераторами.
Перевод статьи «How to Create Your Own Custom Code Snippets Right in Your Code Editor».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
