Inter-Net.PRO

Visual Studio Code  Visual Studio Code - бесплатный редактор от Microsoft, в последнее время активно развивающийся и быстро набирающий популярность. Работает на осях Linux, Mac OSX и Windows.

  Не так давно я полностью перешёл на VSCode и теперь пишу только в нём. Работает он не нагружая систему и не зависая. Единственный минус - нет уроков и мало инфы на русском языке.

  Так что начнём с того, как создавать сниппеты в редакторе Visual Studio Code.


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

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

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

свой сниппет VSCode

 

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

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

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

тип сниппета VSCode

 

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

название файла сниппета VSCode

 

  Обратите внимание, что в 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 в редакторе.

 

  Для сниппетов <languageId>.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|} Когда фрагмент вставлен и выбран заполнитель, выбор предложит пользователю выбрать одно из значений.


Inter-Net PRO аватар
Inter-Net PRO ответил в теме #1 08 сен 2018 16:42
И ещё один вот такой сниппет для вставки фавикона:
"favicon": {
      "prefix": "favicon",
      "body": [
         "<link href=\"favicon.ico\" rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\"/>"
      ],
      "description": "Подключение фавикона"
   }
Для вывода набираем favicon и жмём Tab.
Inter-Net PRO аватар
Inter-Net PRO ответил в теме #2 08 сен 2018 16:23
После комментария выше, вы можете задать разумный вопрос: "А где в сниппете 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.

Так как два этих тега тесно связаны, то их можно объединить в один сниппет. Наверное так будет даже правильней.
Inter-Net PRO аватар
Inter-Net PRO ответил в теме #3 08 сен 2018 15:25
Наверное все знают, что если в файле с расширением .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-разметка на русском"
   }

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

Особо изобретать я ничего не стал и повесил вызов данного сниппета на два восклицательных знака. То есть, теперь чтобы вызвать начальную разметку, набираем два восклицательных знака !! и жмём клавишу Tab.

Авторизация

Войти через соцсети: