Сниппеты в Sublime Text
- Информация о материале
- Категория: Админ
- Просмотров: 1105
Сниппеты — это готовые блоки кода, которые часто используются при создании html разметки, css стилей, программного кода, и так далее. Использование сниппетов значительно сокращает время на написание кода, так как вы начинаете использовать заготовки прямо из редактора. Если вы используете расширение Emmet в Sublime Text — то вероятно знакомы со сниппетом который создает html разметку с doctype html5 при наборе знака ! и нажатии клавиши TAB. В этой статье мы разберемся подробно как создать свой сниппет в Sublime Text.
Как создать сниппет
Идем в меню Tools → New Snippet. После этого у нас появляется новое окно с заготовкой для нового сниппета. Видим вот такой код:
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
Разберемся подробнее что значат эти строки и как их можно изменить. Раскомментируем строку с тегом <tabTrigger>, и строку с тегом <scope>.
Тег tabTrigger
Содержимое в строке <tabTrigger>hello</tabTrigger> означает что при наборе символов hello и нажатии клавиши TAB будет срабатывать данный сниппет. То есть это триггер для нашего сниппета.
Тег scope
Содержимое в строке <scope>text.html</scope> означает что данный сниппет будет работать в html.
Чтобы создать сниппет который будет работать js или css необходимо использовать другие значения для строки scope.
Так, для css сниппета строка <scope> должна быть следующей:
<scope>source.css</scope>
Полный список всех возможных значений scope смотрите здесь.
Тег content
Рассмотрим блок с тегом <content>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
В параметре CDATA[ ... ] указан собственно текст сниппета, то что будет выведено когда мы наберем hello (значение tabTrigger в нашем примере) и нажмем TAB. То есть на экран выведется:
Hello, this is a snippet.
Ключевые точки
Разберемся со знаками ${1:this} и ${2:snippet}. Это ключевые точки для редактирования сниппета. После вызова сниппета перемещаться по ним можно используя клавишу TAB. В данном примере ключевые точки заданы с некоторыми значениями по умолчанию. Можно задать свое значение по умолчанию, которое выделится для редактирования когда мы создадим сниппет, либо сделать пустую ключевую точку. Создавать пустую ключевую точку имеет смысл тогда когда просто необходимо поставить курсор в нужное место. В примере ниже я изменил текст сниппета и ключевые точки. Первая точка ${1} — пустая, а вторая ${2:сниппет} с значением по умолчанию.
<content><![CDATA[ Привет, ${1}. Это ${2:сниппет}. ]]></content>
Множественные курсоры
Известно что в Sublime Text с помощью зажатой клавиши Ctrl можно поставить курсор сразу в нескольких местах для ввода текста. Множественные курсоры можно использовать и при создании сниппетов. Чтобы задать множественный курсор, необходимо несколько раз указать одну и ту же ключевую точку. Пример ниже:
<h2>${1}</h2>
<p>${2}</p>
<a href="" title="${1}">Читать далее</a>
Это пример сниппета для html разметки короткой новости или статьи. В этом примере используется множественный курсор в точке ${1}, так как она упоминается в сниппете два раза. Соответственно при запуске сниппета курсор автоматически станет в два разных места — в тег <h1>${1}</h1> и в значение атрибута title="${1}" для ссылки. Этот пример сделан только для того чтобы показать как задавать и использовать множественные курсоры при создании сниппетов в Sublime Text.
Пример готового сниппета
После манипуляций над начальным примером сниппета, можем получить вот такой сниппет для html документов:
<snippet>
<content><![CDATA[
Привет, ${1}. Это ${2:сниппет}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>hello</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
</snippet>
Сохранение
Сохранять файл со сниппетом можно в папку Packages/User. По умолчанию Sublime предлагает сохранить его под именем untitled.sublime-snippet. Имя файла изменяем на свое усмотрение, а расширение необходимо оставить неизменным. Желательно давать файлам осмысленные имена. Также можно создать структуру из вложенных папок внутри Packages/User чтобы сортировать все сниппеты, и не возникло путаницы в будущем.
