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

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

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

Так что начнём с того, как создавать сниппеты в редакторе 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.

 

Записи по теме

Горячие клавиши в VSCode для Windows

Набор всех доступных горячих клавиш (быстрых команд) для работы с редактором кода VSCode, которые значительно упрощают ведение разработки и написание кода.

Как отключить проверку TypeScript в редакторе VSCode

Инструкция как в редакторе VSCode отключить проверку кода TypeScript выполняемую линтерами встроенными по умолчанию в ядро редактора.

Как сделать копию репозитория GitHub на компьютер

Инструкция как быстро и просто сделать копию репозитория GitHub к себе на компьютер при помощи редактора Visual Studio Code. Задача буквально на два-три клика мышкой.

Лучшие расширения для редактора VSCode

Подбора лучших расширениях для редактора кода Visual Studio Code, которыми я сам пользуюсь и советую обратить на них ваше внимание.

Подсветка синтаксиса Winter CMS в VSCode

Установка и использование расширения в редакторе кода VSCode для правильной подсветки синтаксиса кода файлов шаблонов и htm для Winter CMS.

Установка шрифта JetBrains Mono в VSCode

Как установить и настроить шрифт JetBrains Mono в редакторе кода Visual Studio Code. Небольшая инструкция по настройке шрифта в редакторе VSCode.

Делаем сниппет привлекательнее 2.0 — SEO на vc.ru

Всем привет — на связи Lezhebokov.com! Как мы писали в нашей недавней статье о SEO-трендах 2021 года – борьба за клики продолжается. Ведь с каждым годом в выдаче становится все больше агрегаторов, сервисов поисковиков, да и конкуренты в органике не стоят на месте.

6400 просмотров

Ваш сайт вышел по запросу в топ-10, но чем он лучше остальных 9 сайтов? Ваша задача — сделать всё, чтобы на сниппет захотелось кликнуть. Если Вы не знакомы со статей «Шесть способов быть заметнее в поисковой выдаче», то сначала прочтите ее и возвращайтесь!

Содержание:

  1. Галерея статей в Яндексе
  2. Красивый URL в Google
  3. Рейтинги в Google

Галерея статей в Яндексе

Делается при помощи турбо-страниц. Все еще игнорируете сообщение в Яндекс.Вебмастере о подключении турбо-страниц? А зря! Можно сделать привлекательный спиппет, добавив галерею статей от Турбо.

Галерея статей

Тем более, не стоит игнорировать, если на главной странице продвигаются высокочастотные запросы. Смотрите, какой получается привлекательный сниппет:

Сниппет с галереей статей

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

Сниппет без турбо-страниц:

Сниппет без подключения турбо

Сниппет с турбо-страницами:

Сниппет с подключением турбо

Не только подтягивается галерея статей, но и шрифт становится больше и блок выделяется рамкой, как будто купленное место у Яндекса. А это всего лишь турбо-страницы, которые делаются за 1 час.

Как сделать:

  1. Сгенерируйте RSS ленту для блога. Сделать это можно через плагины в CMS, либо через онлайн-генератор.
  2. Добавьте ссылку на RSS в Вебмастер. Начнется проверка.
  3. Настройте отображение страниц. Можно добавить поиск, комментарии, обратную связь, оформить меню.
  4. После того, как RSS проверится, включите отображение.

Подключение тубро-страниц

Готово! Через некоторое время — максимум через 24 часа галерея статей отобразится в выдаче.

Красивый URL в Google

Делается при помощи микроразметки BreadcrumbList. Специально для сниппета можно сделать URL на кириллице, еще и эмодзи добавить.

Сниппет до микрораметки:

Сниппет после внедрения микроразметки:

Как сделать:

  1. Составить микроразметку BreadcrumbList. Поля для заполнения можно взять в Google Developers.
  2. Добавить микроразметку на отдельные страницы или в Header, если нужно отобразить на всех страницах сайта.
  3. Проверить микроразметку через инструмент от Google. Внести правки при необходимости.

Проверка микроразметки BreadcrumbLis

Готово! Через 1-3 дня URL сниппете будет таким, каким вы пропишете его в микроразметке.

Рейтинги в Google

Делается при помощи микроразметки Product + aggregateRating. В сниппете появится рейтинг, количество оценок, также можно указать цену и наличие.

Сниппет без микроразметки:

Сниппет с микроразметкой:

Как сделать:

  1. Составить микроразметку Product. Поля для заполнения можно взять в Google Developers.
  2. Добавить микрораметку на отдельные страницы или в Header, если нужно отобразить на всех страницах сайта.
  3. Проверить микроразметку через инструмент от Google. Внести правки при необходимости.

Готово! Через 1-3 дня в спиппете появится рейтинг и оценки. Только случайно 2 балла из 5 не поставьте.

Анализируйте сниппеты конкурентов, замечайте новые фишки и выделяйтесь! Работайте над сниппетом уже сейчас, даже если до заветного места в ТОП-10 еще далеко.

Григорьева Елизавета

Ведущий SEO-специалист. Автор статьи

Создание, редактирование, удаление фрагментов

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

  1. В группе фрагментов выберите Новый фрагмент кнопку «+» в верхней части списка фрагментов или выберите «Файл» > «Новый фрагмент» в меню. Command+N (Mac), Control+N (Windows).
  2. Добавьте содержимое фрагмента в большое текстовое поле, которое называется Редактор фрагментов справа.
  3. Назначьте аббревиатуру в поле «Аббревиатура» под содержимым.
    Необязательно: добавьте метку для своего фрагмента в поле «Ярлык». Это шанс получить более длинное и информативное описание сниппета, чем позволяет аббревиатура. Ярлыки полезны при поиске сниппетов или если вы делитесь своими сниппетами с командой.

Другой способ создания сниппетов:

  • Создайте фрагмент из вашего буфера обмена

, что делает хорошую аббревиатуру

Хорошая аббревиатура:

  • Короткий
  • Легко запомнить
  • Неожиданно будет напечатано случайностью
222229
  • . первый символ аббревиатуры (ddate, ssig, zzip) — это один из способов создания аббревиатуры, отвечающей этим критериям. Другой способ — использовать точку или другой знак препинания в качестве первого символа вашей аббревиатуры (;date, ‘sig, /zip).

    Советы по организации

    Советы по организации фрагментов см. в разделе Организация фрагментов.

    Маркировка сниппетов

    Ярлык сниппета — это удобный способ найти свои сниппеты или четко указать, что включено в сниппет, если вы делитесь им с командой. Обычно полезно сделать метку сокращенной версией содержимого сниппета. Введите метку в поле «Метка» под редактором фрагментов.

    Редактирование фрагмента

    Откройте любой фрагмент и начните редактировать содержимое в редакторе фрагментов. Все изменения будут сохранены по умолчанию. Если вы не можете редактировать фрагмент, у вас нет прав на редактирование. Вы можете запросить их у администратора группы фрагментов, в которой находится фрагмент. (См. Разрешения)

    Как дублировать сниппет

    1. Выберите сниппет, который вы хотите продублировать.
    2. Выберите «Файл» > «Дублировать» в меню или выберите «Дублировать из меню действий фрагмента» в правом верхнем углу открытого фрагмента. Command+D (Mac), Control+D (Windows).

    Оригинал и дубликат будут иметь одну и ту же аббревиатуру, что может привести к конфликту, поэтому вам нужно немедленно изменить одну из аббревиатур на что-то уникальное.

    Как удалить фрагмент

    1. Выберите фрагмент в списке фрагментов в левой части главного окна TextExpander.
    2. Нажмите «Удалить» (отображается в виде значка корзины) на панели инструментов в правом верхнем углу окна или используйте клавишу «Удалить» на клавиатуре.

    Предварительный просмотр расширенного фрагмента

    Предварительный просмотр развернутого фрагмента в окне TextExpander, нажав кнопку «Предварительный просмотр» (глаз) в правом верхнем углу вашего клиента TextExpander или нажав клавишу Command + Return (Mac). Особенно полезно при создании фрагментов даты или времени или фрагментов с другими макросами. (См. Дополнительные элементы сниппета).

    Установка чувствительности к регистру

    TextExpander может обрабатывать регистр расширенного фрагмента по-разному в зависимости от того, в каком регистре вы вводите аббревиатуру: в верхнем или нижнем регистре. См. Расширение сниппетов с учетом регистра.

    Редактировать последний развернутый фрагмент

    Вы можете легко редактировать фрагменты по мере их использования. Если вы развернете фрагмент и поймете, что его нужно пересмотреть, скажем, вам нужен новый номер телефона в подписи электронной почты, попробуйте горячую клавишу «Редактировать последнее развернутое».

    Создание фрагментов и управление ими | Поддержка Omni CMS

    Создание сниппетов и управление ими разрешено только пользователям уровня 9 и 10. Также настраиваются категории, которые используются для сортировки сниппетов. И фрагменты, и категории доступны из Content > Snippets.

    Выбор Content > Snippets показывает категории фрагментов. В этом представлении перечислены все категории фрагментов для учетной записи. Вы можете фильтровать категории по имени, сортировать категории по имени и количеству фрагментов, а также щелкнуть имя категории, чтобы увидеть фрагменты внутри нее.

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

    Щелкните меню Дополнительные действия  для категории со следующими параметрами:

    • Переименовать: Переименование категории только изменяет ее имя и не влияет на другие файлы.
    • Удалить: При удалении категории также удаляются все фрагменты в этой категории. Удаление фрагмента не влияет на какие-либо страницы, но файл фрагмента нельзя восстановить, кроме как создать его снова.

    Чтобы создать новую категорию:

    1. Перейдите к Content > Snippets .
    2. Нажмите + Новый .
    3. Дайте категории имя, указывающее тип фрагментов, сгруппированных в ней. Обычно сниппеты группируются по функциям или по типу сайта или страницы, на которой они должны быть размещены.
    4. Нажмите Создать .

    В разделе Content > Snippets нажмите Snippets  , чтобы просмотреть список фрагментов для аккаунта.

    Нажмите Дополнительные действия , чтобы получить фрагмент для следующих пунктов меню:

    • Предварительный просмотр : Отображает предварительный просмотр кода фрагмента. Это может не совсем точно отражать внешний вид фрагмента при добавлении на страницу, так как стиль еще не применен.
    • Редактировать: Переход к режиму редактирования фрагмента.
    • Фрагмент: Раскрывающийся список с двумя вариантами: «Переименовать» и «Удалить».
      • Переименование фрагмента изменяет только его имя и не влияет на другие файлы.
      • Удаление сниппета — это необратимое действие, и сниппет нельзя восстановить, пока он не будет создан снова. Удаление не удаляет фрагмент со страниц, на которых он был размещен.

    Чтобы создать новый фрагмент:

    1. Перейдите к Content > Snippets .
    2. Нажмите Категории , чтобы увидеть фрагменты внутри или  Фрагменты .
    3. Нажмите  + Новый .
    4. Заполните информацию о сниппете. Он содержит следующие поля:
      • Имя*: Имя вашего фрагмента должно указывать на его функцию, например, «Таблица с двумя столбцами» или «Цитата блока».
      • Категория*: Выберите категорию, к которой будет принадлежать ваш фрагмент.
      • Доступно для всех сайтов?: Выберите, доступен ли этот фрагмент для использования на всех сайтах в учетной записи или нет. Если вы решите ограничить его, выберите из списка сайтов, для какого сайта или сайтов он доступен.
      • Доступно для: Выберите группу, которая может размещать этот фрагмент на страницах.
      • Описание: Добавьте краткое описание фрагмента, например, для чего он используется или где на странице его следует разместить.
        *Обязательно.
    5. Запишите исходный код фрагмента. Помните, что когда фрагмент размещается на странице, он становится частью кода страницы и подвергается воздействию редактора WYSIWYG, который может удалять определенные типы разметки. Поэтому рекомендуется HTML.
      • Фрагменты не должны включать серверный или клиентский код. Однако можно включать классы, вызываемые клиентским и серверным кодом.