Как сделать свой сниппет в Visual Studio Code

• Создание сниппета
• Типы сниппетов
• Код сниппета
• Настройки сниппета
• Установка курсора и заполнитель
• Примеры

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

В меню редактора проходим по следующему пути:

Файл → Параметры → Фрагменты кода пользователя

• В открывшейся командной строке нужно выбрать для какого языка программирования мы хотим создать сниппет.
• Если сниппет предназначен сразу для нескольких языков - выбираем "Новый файл с глобальным фрагментом кода".
• Если ваш сниппет будет только для одного определённого языка, то можем выбрать язык. В списке много языков и чтобы найти нужный, просто прокрутите список.

После выбора типа сниппета, появится окно сохранения сниппета. Здесь необходимо задать название для файла со сниппетом(-ами).

Обратите внимание, что в VSCode есть правила для названий файлов со сниппетами.

# Типы сниппетов

В VSCode сниппеты бывают двух типов:

1. Глобальной видимости - сниппет видим редактором во всех расширениях файлов (можно в настройках ограничить видимость для языков програмирования и задать только нужные).
2. Для заданного языка програмирования - сниппет виден только в файлах с расширением заданного языка.

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

Для заданного языка, тип файла должен быть json, а название - идектификатор языка <languageId> (например: javascript.json, php.json, css.json и т.д.).

Такой подход снижает нагрузку на работу редактора.

# Код сниппета в VSCode

Как пример, вот файл глобальной видимости main.code-snippets с тремя сниппетами:

{
	"jQuery": {
		"prefix": "jq",
		"scope": "html, php",
		"body": [
			"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>",
			"<script>window.jQuery || document.write('<script src=\"js/jquery-3.2.1.min.js\"><\/script>')</script>"
		],
		"description": "Подключение jQuery"
	},

	"Font_Awesome_5": {
		"prefix": "fafa",
		"scope": "html, php",
		"body": [
			"<script defer src=\"https://use.fontawesome.com/releases/v5.0.8/js/all.js\"></script>",
		],
		"description": "Подключение FontAwesome 5"
	},

	"Image Placholder": {
		"prefix": "imgpl",
		"body": [
			"<img src=\"https://placehold.it/${2:250x200}${3:?text=Картинка}\" alt=\"$1\">",
		],
		"description": "Картинка заполнитель"
	},
}

# Настройки сниппета

Весь код с настройками пишется внутри глобальный фигурных кавычек { }

Сначала идёт имя сниппета. В примере это: jQuery, Font_Awesome_5 и Image Placeholder. Как видно можно применять пробелы и нижние подчёркивания.

Каждый сниппет имеет ряд настроек:

• prefix - определяет, как этот фрагмент выбирается из IntelliSense при вызове табуляции. Работает точно так же как и сниппеты в редакторе Sublime Text.
• scope - необязательная настройка, ограничивающая видимость сниппета только для указанных в ней языков
• body - сам сниппет. Фрагмент, строка или массив строк, который будет вставлен после написания значения prefix-а и нажатия на клавиатуре кнопки Tab↹
• description - описание для снипета, выводимое в всплывающей подсказке из IntelliSense в редакторе.

Для сниппетов .json применяются такие же настройки кроме scope.

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

Сниппеты работают сразу после сохранения и не требуют перезагрузки редактора.

# Установка курсора и заполнитель

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

В указанном выше примере со сниппетами, в сниппете Image Placeholder настройка body имеет следующий фрагмент:

<img src=\"https://placehold.it/${2:250x200}${3:?text=Картинка}\" alt=\"$1\">

Знаком $ указывается место куда будет устанавлен курсор, цифрами - порядок перехода курсора при нажатии таба.

Если задать несколько, например $2, то курсор будет установлен в этих местах, а редактирование кода будет синхронным.

Можно курсор устанавливать с заполнителем. Тогда курсор будет установлен, а заполнитель выделен для редактирования. Например конструкция ${2:250х200} где 2 - это порядок перехода курсора после которого через двоеточие идёт заполнитель.

Так же можно ипользовать конструкцию с выбором заполнителя: ${1|one,two,three|}. Когда фрагмент вставлен и выбран заполнитель, выбор предложит пользователю выбрать одно из значений.

# Примеры

Наверное все знают, что если в файле с расширением .html набрать восклицательный знак и нажать клавишу Tab↹, то Emmet который встроен по умолчанию в редактор VSCode развернёт начальную хтмл-разметку.

Мне вот не нравится, что по умолчанию он прописывает

<html lang="en">

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

<html lang="ru">

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

Так как данный сниппет только для html-файлов, то чтобы не было лишних нагрузок, сниппет прописывается в файле html.json. На втором скрине в статье - прокрутить вниз и выбрать HTML, редактор VSCode сам создаст и откроет этот файл.

Удаляем всё что есть в этом файле (если правильно помню там закомментированая инструкция по созданию сниппетов) и вставляем такой код:

{
   "HTML на русском": {
      "prefix": "!!",
      "body": [
         "<!DOCTYPE html>",
         "<html lang=\"ru\">",
         "<head>",
         "   <meta charset=\"UTF-8\">",
         "   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
         "   <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
         "   <title>${1:Заголовок}</title>",
         "</head>",
         "<body>",
            "   $2",
            "   ",
         "</body>",
         "</html>"
      ],
      "description": "Начальная HTML-разметка на русском"
   }

}

Не забудьте после вставки сохранить.

После сниппета с начальной загрузкой HTML на русском, вы можете задать разумный вопрос: "А где в сниппете Meta Keywords и Meta Description?"

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

В упомянутом в предыдущем комментарии файле html.json я отдельно прописываю сниппеты для Meta Keywords и Meta Description.

Вот такой код для этих двух сниппетов:

    "meta-desc": {
      "prefix": "meta-d",
      "body": "<meta name=\"description\" content=\"$1\"/>",
      "description": "Описание страницы - Meta Description"
   },

   "meta-keywords": {
      "prefix": "meta-k",
      "body": "<meta name=\"keywords\" content=\"$1\"/>",
      "description": "Ключевые слова"
   }

Теперь чтобы вывести

• тег Meta Description - набираем meta-d и жмём клавишу Tab
• тег Meta Keywords - набираем meta-k и жмём клавишу Tab

Запоминать префиксы этих сниппетов хоть и не сложно, но необязательно. Достаточно начать набирать meta и редактор сам предложит варианты в всплывающей подсказке:

можно выбирать вариант как курсором, так и стрелками на клавиатуре + Enter. Ну или до конца набрать префикс сниппета и нажать клавишу Tab.

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

И ещё один вот такой сниппет для вставки фавикона:

    "favicon": {
      "prefix": "favicon",
      "body": [
         "<link href=\"favicon.ico\" rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\"/>"
      ],
      "description": "Подключение фавикона"
   }

Для вывода набираем favicon и жмём Tab.