Сниппеты в VS Code

Создание сниппетов в редакторе кода Visual Studio Code

Сниппеты в VS Code - это участки кода, которые можно использовать неограниченное количество раз в своих файлах: html, css, js, php и т.п.

При вводе первых символов названия будет отображена подсказка для вывода сниппета

Как создать карту сайта с помощью Jekyll без плагинов

Для создания сниппета в VS Code необходимо выполнить следующие действия:

Как создать карту сайта с помощью Jekyll без плагинов

Далее можно выбрать создание сниппета с глобальной видимостью (1) или для определенного языка (2)

  1. выбрать пункт Новый файл с глобальным фрагментом кода. Далее ввести имя файла и сохранить.
  2. или
  3. выбрать нужный язык и продолжить создание сниппета

Пример

{
  "@media": {
    "prefix": "@media",
    "scope": "css",
    "body": [
      "@media only screen and (max-width: 768px) {",
      "  $1",
      "}"
    ],
    "description": "Вставить медиа запрос"
  }
}

Немного пояснения:

  • prefix - название для вызова сниппета с помощью tab
  • scope - для каких языков будет работать сниппет (для сниппета с глобальной видимостью)
  • body - фрагмент кода, который будет выводится
  • description - подсказка при вводе первых символов сниппета

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

{
  "@media": {
    "prefix": "@media",
    "scope": "css",
    "body": "@media only screen and (max-width: 768px) {$1}",
    "description": "Вставить медиа запрос"
  }
}

Местонахождение курсора

Для выбора расположения курсора используется символ $ ($1, $2, $3)

Для задания очередности перехода курсора при нажатии tab используется нумерация$1, $2

Двойные кавычки

Если вам необходимо в сниппете использовать двойные кавычки ", то перед ними необходимо ставить обратный слэш \

Пример

{
  "Responsive": {
    "prefix": "resp",
    "scope": "html",
    "body": "<img src=\"../path/img.gif\" class=\"my-responsive\" alt=\"image\">",
    "description": "Вставить адаптивное изображение"
  }
}

Более подробно о создании сниппетов в редакторе VS Code можно ознакомиться на официальном сайте code.visualstudio.com

Изучаем английский
EnglishRussian
PrefixПрефикс, приставка
ScopeОбласть, масштаб
BodyТело
DescriptionОписание
admin
03/10/2019 20:05