Как сделать свой сниппет в Visual Studio Code
Visual Studio Code — бесплатный редактор от Microsoft, в последнее время активно развивающийся и быстро набирающий популярность. Работает на осях Linux, Mac OSX и Windows.
В конце 2017 года я полностью перешёл на VSCode и с тех пор пишу только в нём. Работает он не нагружая систему и не зависая. Единственный минус — нет уроков и мало инфы на русском языке.
Так что начнём с того, как создавать сниппеты в редакторе Visual Studio Code.
- Создание сниппета
- Типы сниппетов
- Код сниппета
- Настройки сниппета
- Установка курсора и заполнитель
- Примеры
# Создание сниппета в Visual Studio Code
В меню редактора проходим по следующему пути:
Файл → Параметры → Фрагменты кода пользователя
- В открывшейся командной строке нужно выбрать для какого языка программирования мы хотим создать сниппет.
- Если сниппет предназначен сразу для нескольких языков — выбираем «Новый файл с глобальным фрагментом кода».
- Если ваш сниппет будет только для одного определённого языка, то можем выбрать язык. В списке много языков и чтобы найти нужный, просто прокрутите список.
После выбора типа сниппета, появится окно сохранения сниппета. Здесь необходимо задать название для файла со сниппетом(-ами).
Обратите внимание, что в VSCode есть правила для названий файлов со сниппетами.
# Типы сниппетов
В VSCode сниппеты бывают двух типов:
- Глобальной видимости — сниппет видим редактором во всех расширениях файлов (можно в настройках ограничить видимость для языков програмирования и задать только нужные).
Для заданного языка програмирования — сниппет виден только в файлах с расширением заданного языка.
Для глобальных сниппетов файл должен иметь расширение .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 сайтов? Ваша задача — сделать всё, чтобы на сниппет захотелось кликнуть. Если Вы не знакомы со статей «Шесть способов быть заметнее в поисковой выдаче», то сначала прочтите ее и возвращайтесь!
Содержание:
- Галерея статей в Яндексе
- Красивый URL в Google
- Рейтинги в Google
Галерея статей в Яндексе
Делается при помощи турбо-страниц. Все еще игнорируете сообщение в Яндекс.Вебмастере о подключении турбо-страниц? А зря! Можно сделать привлекательный спиппет, добавив галерею статей от Турбо.
Галерея статей
Тем более, не стоит игнорировать, если на главной странице продвигаются высокочастотные запросы. Смотрите, какой получается привлекательный сниппет:
Сниппет с галереей статей
Даже если на главной странице продвигается только брендовый запрос, сравните, как сниппет выглядит с турбо-страницами и как без.
Сниппет без турбо-страниц:
Сниппет без подключения турбо
Сниппет с турбо-страницами:
Сниппет с подключением турбо
Не только подтягивается галерея статей, но и шрифт становится больше и блок выделяется рамкой, как будто купленное место у Яндекса. А это всего лишь турбо-страницы, которые делаются за 1 час.
Как сделать:
- Сгенерируйте RSS ленту для блога. Сделать это можно через плагины в CMS, либо через онлайн-генератор.
- Добавьте ссылку на RSS в Вебмастер. Начнется проверка.
- Настройте отображение страниц. Можно добавить поиск, комментарии, обратную связь, оформить меню.
- После того, как RSS проверится, включите отображение.
Подключение тубро-страниц
Готово! Через некоторое время — максимум через 24 часа галерея статей отобразится в выдаче.
Красивый URL в Google
Делается при помощи микроразметки BreadcrumbList. Специально для сниппета можно сделать URL на кириллице, еще и эмодзи добавить.
Сниппет до микрораметки:
Сниппет после внедрения микроразметки:
Как сделать:
- Составить микроразметку BreadcrumbList. Поля для заполнения можно взять в Google Developers.
- Добавить микроразметку на отдельные страницы или в Header, если нужно отобразить на всех страницах сайта.
- Проверить микроразметку через инструмент от Google. Внести правки при необходимости.
Проверка микроразметки BreadcrumbLis
Готово! Через 1-3 дня URL сниппете будет таким, каким вы пропишете его в микроразметке.
Рейтинги в Google
Делается при помощи микроразметки Product + aggregateRating. В сниппете появится рейтинг, количество оценок, также можно указать цену и наличие.
Сниппет без микроразметки:
Сниппет с микроразметкой:
Как сделать:
- Составить микроразметку Product. Поля для заполнения можно взять в Google Developers.
- Добавить микрораметку на отдельные страницы или в Header, если нужно отобразить на всех страницах сайта.
- Проверить микроразметку через инструмент от Google. Внести правки при необходимости.
Готово! Через 1-3 дня в спиппете появится рейтинг и оценки. Только случайно 2 балла из 5 не поставьте.
Анализируйте сниппеты конкурентов, замечайте новые фишки и выделяйтесь! Работайте над сниппетом уже сейчас, даже если до заветного места в ТОП-10 еще далеко.
Григорьева Елизавета
Ведущий SEO-специалист. Автор статьи
Создание, редактирование, удаление фрагментов
Фрагменты являются основным строительным блоком TextExpander. Они представляют собой комбинацию содержимого, которое вы хотите использовать, и сокращения, которое вы вводите для его использования. Вы захотите создать полную библиотеку сниппетов, чтобы все, что вам нужно вводить повторно, правильно или долго, было сохранено и готово к работе.
- В группе фрагментов выберите Новый фрагмент кнопку «+» в верхней части списка фрагментов или выберите «Файл» > «Новый фрагмент» в меню. Command+N (Mac), Control+N (Windows).
- Добавьте содержимое фрагмента в большое текстовое поле, которое называется Редактор фрагментов справа.
- Назначьте аббревиатуру в поле «Аббревиатура» под содержимым.
Необязательно: добавьте метку для своего фрагмента в поле «Ярлык». Это шанс получить более длинное и информативное описание сниппета, чем позволяет аббревиатура.Ярлыки полезны при поиске сниппетов или если вы делитесь своими сниппетами с командой.
Другой способ создания сниппетов:
- Создайте фрагмент из вашего буфера обмена
, что делает хорошую аббревиатуру
Хорошая аббревиатура:
- Короткий
- Легко запомнить
- Неожиданно будет напечатано случайностью
Советы по организации
Советы по организации фрагментов см. в разделе Организация фрагментов.
Маркировка сниппетов
Ярлык сниппета — это удобный способ найти свои сниппеты или четко указать, что включено в сниппет, если вы делитесь им с командой. Обычно полезно сделать метку сокращенной версией содержимого сниппета. Введите метку в поле «Метка» под редактором фрагментов.
Редактирование фрагмента
Откройте любой фрагмент и начните редактировать содержимое в редакторе фрагментов. Все изменения будут сохранены по умолчанию. Если вы не можете редактировать фрагмент, у вас нет прав на редактирование. Вы можете запросить их у администратора группы фрагментов, в которой находится фрагмент. (См. Разрешения)
Как дублировать сниппет
- Выберите сниппет, который вы хотите продублировать.
- Выберите «Файл» > «Дублировать» в меню или выберите «Дублировать из меню действий фрагмента» в правом верхнем углу открытого фрагмента. Command+D (Mac), Control+D (Windows).
Оригинал и дубликат будут иметь одну и ту же аббревиатуру, что может привести к конфликту, поэтому вам нужно немедленно изменить одну из аббревиатур на что-то уникальное.
Как удалить фрагмент
- Выберите фрагмент в списке фрагментов в левой части главного окна TextExpander.
- Нажмите «Удалить» (отображается в виде значка корзины) на панели инструментов в правом верхнем углу окна или используйте клавишу «Удалить» на клавиатуре.
Предварительный просмотр расширенного фрагмента
Предварительный просмотр развернутого фрагмента в окне TextExpander, нажав кнопку «Предварительный просмотр» (глаз) в правом верхнем углу вашего клиента TextExpander или нажав клавишу Command + Return (Mac). Особенно полезно при создании фрагментов даты или времени или фрагментов с другими макросами. (См. Дополнительные элементы сниппета).
Установка чувствительности к регистру
TextExpander может обрабатывать регистр расширенного фрагмента по-разному в зависимости от того, в каком регистре вы вводите аббревиатуру: в верхнем или нижнем регистре. См. Расширение сниппетов с учетом регистра.
Редактировать последний развернутый фрагмент
Вы можете легко редактировать фрагменты по мере их использования. Если вы развернете фрагмент и поймете, что его нужно пересмотреть, скажем, вам нужен новый номер телефона в подписи электронной почты, попробуйте горячую клавишу «Редактировать последнее развернутое».
Создание фрагментов и управление ими | Поддержка Omni CMS
Создание сниппетов и управление ими разрешено только пользователям уровня 9 и 10. Также настраиваются категории, которые используются для сортировки сниппетов. И фрагменты, и категории доступны из Content > Snippets.
Выбор Content > Snippets показывает категории фрагментов. В этом представлении перечислены все категории фрагментов для учетной записи. Вы можете фильтровать категории по имени, сортировать категории по имени и количеству фрагментов, а также щелкнуть имя категории, чтобы увидеть фрагменты внутри нее.
Все фрагменты должны принадлежать к категории; поэтому для создания сниппетов у вас должна быть хотя бы одна категория.
Щелкните меню Дополнительные действия для категории со следующими параметрами:
- Переименовать: Переименование категории только изменяет ее имя и не влияет на другие файлы.
- Удалить: При удалении категории также удаляются все фрагменты в этой категории. Удаление фрагмента не влияет на какие-либо страницы, но файл фрагмента нельзя восстановить, кроме как создать его снова.
Чтобы создать новую категорию:
- Перейдите к Content > Snippets .
- Нажмите + Новый .
- Дайте категории имя, указывающее тип фрагментов, сгруппированных в ней. Обычно сниппеты группируются по функциям или по типу сайта или страницы, на которой они должны быть размещены.
- Нажмите Создать .
В разделе Content > Snippets нажмите Snippets , чтобы просмотреть список фрагментов для аккаунта.
Нажмите Дополнительные действия , чтобы получить фрагмент для следующих пунктов меню:
- Предварительный просмотр : Отображает предварительный просмотр кода фрагмента.
Это может не совсем точно отражать внешний вид фрагмента при добавлении на страницу, так как стиль еще не применен.
- Редактировать: Переход к режиму редактирования фрагмента.
- Фрагмент: Раскрывающийся список с двумя вариантами: «Переименовать» и «Удалить».
- Переименование фрагмента изменяет только его имя и не влияет на другие файлы.
- Удаление сниппета — это необратимое действие, и сниппет нельзя восстановить, пока он не будет создан снова. Удаление не удаляет фрагмент со страниц, на которых он был размещен.
Чтобы создать новый фрагмент:
- Перейдите к Content > Snippets .
- Нажмите Категории , чтобы увидеть фрагменты внутри или Фрагменты .
- Нажмите + Новый .
- Заполните информацию о сниппете. Он содержит следующие поля:
- Имя*: Имя вашего фрагмента должно указывать на его функцию, например, «Таблица с двумя столбцами» или «Цитата блока».
- Категория*: Выберите категорию, к которой будет принадлежать ваш фрагмент.
- Доступно для всех сайтов?: Выберите, доступен ли этот фрагмент для использования на всех сайтах в учетной записи или нет. Если вы решите ограничить его, выберите из списка сайтов, для какого сайта или сайтов он доступен.
- Доступно для: Выберите группу, которая может размещать этот фрагмент на страницах.
- Описание: Добавьте краткое описание фрагмента, например, для чего он используется или где на странице его следует разместить.
*Обязательно.
- Имя*: Имя вашего фрагмента должно указывать на его функцию, например, «Таблица с двумя столбцами» или «Цитата блока».
- Запишите исходный код фрагмента. Помните, что когда фрагмент размещается на странице, он становится частью кода страницы и подвергается воздействию редактора WYSIWYG, который может удалять определенные типы разметки. Поэтому рекомендуется HTML.
- Фрагменты не должны включать серверный или клиентский код. Однако можно включать классы, вызываемые клиентским и серверным кодом.
- Фрагменты не должны включать серверный или клиентский код. Однако можно включать классы, вызываемые клиентским и серверным кодом.