Inter-Net.PRO

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

  • 216 50
10 март 2018 14:53 #1 от Inter-Net PRO
Создание сниппета в Visual Studio Code
  В...

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

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

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

Подробнее...

  • 216 50
08 сен 2018 15:25 - 08 сен 2018 15:39 #2 от Inter-Net PRO
Наверное все знают, что если в файле с расширением .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.

  • 216 50
08 сен 2018 16:23 - 08 сен 2018 16:46 #3 от Inter-Net PRO
После комментария выше, вы можете задать разумный вопрос: "А где в сниппете 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.

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

  • 216 50
08 сен 2018 16:42 #4 от Inter-Net PRO
И ещё один вот такой сниппет для вставки фавикона:
"favicon": {
      "prefix": "favicon",
      "body": [
         "<link href=\"favicon.ico\" rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\"/>"
      ],
      "description": "Подключение фавикона"
   }
Для вывода набираем favicon и жмём Tab.

Авторизация

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