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, файл откроется автоматически. Ну а если вы остановились на глобальном сниппете, вам будет предложено ввести имя сниппета, прежде чем он откроется.

Для глобальных сниппетов файл должен иметь расширение .code-snippets (например: main.code-snippets)

Шаг 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. Описание сниппета и того, что он делает. Если пропустить, вместо описания будет использоваться имя сниппета.

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

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

// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function $1($2){",
      "  $0",
      "}"
    ],
    "description": ""
  }
}

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

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

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

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

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

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

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

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

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

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

// array method
{
"Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}

5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
× iOs app

To install this Web App in your iPhone/iPad press iOs sourse and then Add to Home Screen.